[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).

addons/web/static/src/js/core/dialog.js

@@ -39,6 +39,9 @@ var Dialog = Widget.extend({
      * @param {boolean} [options.buttons[].close=false]
      * @param {function} [options.buttons[].click]
      * @param {boolean} [options.buttons[].disabled]
+     * @param {boolean} [options.technical=true]
+     *        If set to false, the modal will have the standard frontend style
+     *        (use this for non-editor frontend features)
      */
     init: function (parent, options) {
         this._super(parent);
@@ -49,7 +52,8 @@ var Dialog = Widget.extend({
             size: 'large',
             dialogClass: '',
             $content: false,
-            buttons: [{text: _t("Ok"), close: true}]
+            buttons: [{text: _t("Ok"), close: true}],
+            technical: true,
         });
 
         this.$content = options.$content;
@@ -58,6 +62,7 @@ var Dialog = Widget.extend({
         this.dialogClass = options.dialogClass;
         this.size = options.size;
         this.buttons = options.buttons;
+        this.technical = options.technical;
     },
     /**
      * Wait for XML dependencies and instantiate the modal structure (except
@@ -69,7 +74,11 @@ var Dialog = Widget.extend({
         var self = this;
         return this._super.apply(this, arguments).then(function () {
             // Render modal once xml dependencies are loaded
-            self.$modal = $(QWeb.render('Dialog', {title: self.title, subtitle: self.subtitle}));
+            self.$modal = $(QWeb.render('Dialog', {
+                title: self.title,
+                subtitle: self.subtitle,
+                technical: self.technical,
+            }));
             switch (self.size) {
                 case 'large':
                     self.$modal.find('.modal-dialog').addClass('modal-lg');
@@ -209,7 +218,7 @@ Dialog.confirm = function (owner, message, options) {
             text: _t("Ok"),
             classes: 'btn-primary',
             close: true,
-            click: options && options.confirm_callback
+            click: options && options.confirm_callback,
         },
         {
             text: _t("Cancel"),

addons/web/static/src/xml/dialog.xml

@@ -3,7 +3,7 @@
 
 <!-- These templates are accessible in backend and frontend -->
 
-<div t-name="Dialog" class="modal" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true" t-att-id="_.uniqueId('modal_')">
+<div t-name="Dialog" t-attf-class="modal#{technical ? ' o_technical_modal' : ''}" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="true" t-att-id="_.uniqueId('modal_')">
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">

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,

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();

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 ;">

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">

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" />