[REF] web, website: o_website_modal -> o_technical_modal

Opening a modal in Odoo should be done thanks to the 'Dialog' class. In
the frontend, there can also be modals which are meant to be shown to
the unconnected frontend visitors and those should then get the style of
the website (bootstrap) and not the one of odoo. To manage this, the
website JS code was extending the Dialog class so that it adds the
'o_website_modal' class on modals which are opened thanks to the class.
The LESS code was then in charge of forcing the Odoo style on those.

This behavior is not the right one. "Visitors" modals should also be
able to be opened with the Dialog class. This commit is a first step
towards to the right behavior:
- The standard 'Dialog' adds the 'o_technical_modal' class on its root
  element by default and allows to not put it thanks to 'technical'
  options.
- 'o_website_modal' is then replaced by 'o_technical_modal'.

What should be done next is:
- Use the Dialog class when it is possible
- Move modal.less in the common assets and make it style only technical
  modals -> remove some forcing of the style on 'o_technical_modal' in
  the frontend

This behavior also allows future improvements, like building a
completely different structure for technical modals which would allow
better designing and the end of visitor/technical bootstrap conflicts
(and so LESS efficiency).

5 files changed, 5 insertions, 12 deletions

diff --git a/addons/website/static/src/js/website.js b/addons/website/static/src/js/website.js
index bf819b5664a..bcdf57d58c7 100644
--- a/addons/website/static/src/js/website.js
+++ b/addons/website/static/src/js/website.js
@@ -278,13 +278,6 @@ odoo.define('website.website', function (require) {
     // enable magnify on zommable img
     $('.zoomable img[data-zoom]').zoomOdoo();
 
-    Dialog.include({
-        start: function () {
-            this.$modal.addClass("o_website_modal");
-            return this._super.apply(this, arguments);
-        },
-    });
-
     var data = {
         prompt: prompt,
         error: error,
diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less
index 384262752d1..ba7de300ccc 100644
--- a/addons/website/static/src/less/website.ui.components.less
+++ b/addons/website/static/src/less/website.ui.components.less
@@ -35,7 +35,7 @@
 
 // MODALS
 body .modal {
-    &.o_website_modal {
+    &.o_technical_modal {
         .o-w-preserve-base();
         .o-w-preserve-headings();
         .o-w-preserve-forms();
diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 8f2a387e78b..269795082f1 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -10,7 +10,7 @@
      -->
 
     <t t-name="website.gallery.dialog.upload">
-        <div class="modal o_website_modal fade" >
+        <div class="modal o_technical_modal fade" >
             <div class="modal-dialog" style="max-width: 50%;">
                 <div class="modal-content">
                     <div class="modal-header">
@@ -88,7 +88,7 @@
     -->
     <t t-name="website.gallery.slideshow.lightbox">
 
-        <div class="modal o_website_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
+        <div class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog" aria-hidden="true">
 
             <div class="modal-dialog modal-lg" role="Picture Gallery"
                 t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
diff --git a/addons/website/static/src/xml/website.translator.xml b/addons/website/static/src/xml/website.translator.xml
index 4185f418fcc..7af85d55f9a 100644
--- a/addons/website/static/src/xml/website.translator.xml
+++ b/addons/website/static/src/xml/website.translator.xml
@@ -6,7 +6,7 @@
 </t>
 
 <t t-name="website.TranslatorDialog">
-    <div class="modal o_website_modal fade oe_website_translator" tabindex="-1" role="dialog">
+    <div class="modal o_technical_modal fade oe_website_translator" tabindex="-1" role="dialog">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml
index e42405ce156..d58534f5ded 100644
--- a/addons/website/static/src/xml/website.xml
+++ b/addons/website/static/src/xml/website.xml
@@ -32,7 +32,7 @@
     </t>
 
     <t t-name="website.modal_base">
-        <div class="modal o_website_modal " tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal o_technical_modal " tabindex="-1" role="dialog" aria-hidden="true">
                 <div class="modal-dialog">
                 <div class="modal-content">
                     <t t-call="website.modal_header" />