[REF] website: review theme dialog engine

Refactor the code to remove useless parts, simplify behaviors and allow
more customizations in future tasks.

closes odoo/odoo#28167

5 files changed, 90 insertions, 122 deletions

diff --git a/addons/website/controllers/main.py b/addons/website/controllers/main.py
index 3705620a7c6..e68d208fb52 100644
--- a/addons/website/controllers/main.py
+++ b/addons/website/controllers/main.py
@@ -362,15 +362,17 @@ class Website(Home):
         return [enable, disable]
 
     @http.route(['/website/theme_customize'], type='json', auth="public", website=True)
-    def theme_customize(self, enable, disable, get_bundle=False):
+    def theme_customize(self, enable=None, disable=None, get_bundle=False):
         """ enable or Disable lists of ``xml_id`` of the inherit templates """
         def set_active(xml_ids, active):
             if xml_ids:
                 real_ids = self.get_view_ids(xml_ids)
                 request.env['ir.ui.view'].browse(real_ids).write({'active': active})
 
-        set_active(disable, False)
-        set_active(enable, True)
+        if disable:
+            set_active(disable, False)
+        if enable:
+            set_active(enable, True)
 
         if get_bundle:
             context = dict(request.context)
diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js
index c48bab3c74f..68a1c6bc50b 100644
--- a/addons/website/static/src/js/widgets/theme.js
+++ b/addons/website/static/src/js/widgets/theme.js
@@ -154,72 +154,45 @@ var ThemeCustomizeDialog = Dialog.extend({
 
                 switch (item.tagName) {
                     case 'OPT':
-                        var colorPalette = $item.data('colorPalette') === 'user';
-                        var icon = $item.data('icon');
+                        var widgetName = $item.data('widget');
 
                         // Build the options template
-                        var $multiChoiceLabel = $(core.qweb.render('website.theme_customize_modal_option', {
+                        var $option = $(core.qweb.render('website.theme_customize_modal_option', {
                             name: optionsName,
                             id: $item.attr('id') || _.uniqueId('o_theme_customize_input_id_'),
 
                             string: $item.attr('string'),
-                            icon: icon,
-                            color: $item.data('color'),
+                            icon: $item.data('icon'),
                             font: $item.data('font'),
 
-                            colorPalette: colorPalette,
-
                             xmlid: $item.data('xmlid'),
                             enable: $item.data('enable'),
                             disable: $item.data('disable'),
                             reload: $item.data('reload'),
+
+                            widget: widgetName,
                         }));
 
-                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="primary"]').addClass('d-none').removeClass('d-flex');
-                        $multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex');
+                        if (widgetName) {
+                            var $widget = $(core.qweb.render('website.theme_customize_' + widgetName));
+                            $option.append($widget);
+                        }
 
                         if ($container.hasClass('form-row')) {
-                            $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))});
-                            $col.append($multiChoiceLabel);
+                            $col = $('<div/>', {
+                                class: _.str.sprintf('col-%s', $item.data('col') || 6),
+                            });
+                            $col.append($option);
                             $container.append($col);
                         } else {
-                            $container.append($multiChoiceLabel);
-                        }
-                        break;
-
-                    case 'MORE':
-                        var collapseID = _.uniqueId('collapse-');
-
-                        $col = $('<div/>', {
-                            class: 'col-12',
-                        }).appendTo($container);
-
-                        var string = $item.attr('string');
-                        if (string) {
-                            var $button = $('<button/>', {
-                                'type': 'button',
-                                class: 'btn btn-primary d-block mx-auto mt-3 collapsed',
-                                'data-toggle': 'collapse',
-                                'data-target': "#" + collapseID,
-                                text: string,
-                            });
-                            $col.append($button);
+                            $container.append($option);
                         }
-
-                        var $collapse = $('<div/>',{
-                            id: collapseID,
-                            class: 'collapse form-row justify-content-between mt-3',
-                            'data-depends': $item.data('depends'),
-                        });
-                        $col.append($collapse);
-
-                        _processItems($item.children(), $collapse);
                         break;
 
                     case 'LIST':
                         var $listContainer = $('<div/>', {class: 'py-1 px-2 o_theme_customize_option_list'});
                         $col = $('<div/>', {
-                            class: 'col-6 mt-2',
+                            class: _.str.sprintf('col-%s mt-2', $item.data('col') || 6),
                             'data-depends': $item.data('depends'),
                         }).append($('<h6/>', {text: $item.attr('string')}), $listContainer);
                         $container.append($col);
@@ -353,21 +326,13 @@ var ThemeCustomizeDialog = Dialog.extend({
             $set.prop('checked', checked).closest('label').toggleClass('checked', checked);
         });
 
-        // Mark the collapsed section as visible if their dependencies are met
-        var $collapsedElements = this.$('[data-depends]');
-        _.each($collapsedElements, function (collapsed) {
-            var $collapsed = $(collapsed);
-            var enabled = false;
-            var nbDependencies = $collapsed.data('depends') ? $collapsed.data('depends').split(',').length : 0;
-            if (self._getInputs($collapsed.data('depends')).filter(':checked').length === nbDependencies) {
-                enabled = true;
-            }
-
-            if ($collapsed.is('.collapse')) {
-                $collapsed.collapse(enabled ? 'show' : 'hide');
-            } else {
-                $collapsed.toggleClass('d-none', !enabled);
-            }
+        // Make the hidden sections visible if their dependencies are met
+        _.each(this.$('[data-depends]'), function (hidden) {
+            var $hidden = $(hidden);
+            var depends = $hidden.data('depends');
+            var nbDependencies = depends ? depends.split(',').length : 0;
+            var enabled = self._getInputs(depends).filter(':checked').length === nbDependencies;
+            $hidden.toggleClass('d-none', !enabled);
         });
     },
     /**
@@ -377,8 +342,8 @@ var ThemeCustomizeDialog = Dialog.extend({
         if (reload || config.debug === 'assets') {
             window.location.href = $.param.querystring('/website/theme_customize_reload', {
                 href: window.location.href,
-                enable: enable.join(','),
-                disable: disable.join(','),
+                enable: (enable || []).join(','),
+                disable: (disable || []).join(','),
                 tab: this.$('.nav-link.active').parent().index(),
             });
             return $.Deferred();
@@ -538,7 +503,7 @@ var ThemeCustomizeDialog = Dialog.extend({
                     },
                 });
             }).then(function () {
-                self.$('#' + $color.closest('.o_theme_customize_color_previews').data('depends')).click();
+                return self._updateStyle();
             });
         });
         colorpicker.open();
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 681156835ab..de6f5d4c1a4 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -86,10 +86,6 @@
             line-height: 1;
             cursor: pointer;
 
-            &.o_theme_customize_option_palette_label {
-                display: none !important;
-            }
-
             &.checked {
                 border-color: $o-brand-odoo;
                 color: $o-brand-odoo;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index b3f823314f9..5018d28d1d9 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -22,45 +22,47 @@
     <t t-name="website.theme_customize_modal_option">
         <div t-attf-class="o_theme_customize_option my-1 flex-grow-0 #{font ? 'o_theme_customize_option_font_' + font : ''}">
             <img t-if="icon" t-att-src="icon"/>
-            <label t-attf-class="d-flex align-items-center justify-content-center text-center #{color ? 'bg-' + color : ''} #{colorPalette ? 'o_theme_customize_option_palette_label' : ''}">
+            <label t-attf-class="#{widget ? 'd-none' : 'd-flex'} align-items-center justify-content-center text-center">
                 <input t-att-id="id" t-att-name="name" type="radio" class="o_theme_customize_option_input" t-att-data-xmlid="xmlid" t-att-data-enable="enable" t-att-data-disable="disable" t-att-data-reload="reload"/>
                 <span><t t-esc="string"/></span>
             </label>
-            <div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id">
-                <div>
-                    <h6>Main colors</h6>
-                    <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color">
-                        <t t-call="website.theme_customize_color_palette_button">
-                            <t t-set="color_type" t-value="'theme'"/>
-                        </t>
-                    </t>
-                </div>
-                <div>
-                    <h6>Background colors</h6>
-                    <t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
-                        <t t-call="website.theme_customize_color_palette_button"/>
-                    </t>
-                </div>
-                <div>
-                    <h6>Text colors</h6>
-                    <t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
-                        <t t-call="website.theme_customize_color_palette_button"/>
+        </div>
+    </t>
+    <t t-name="website.theme_customize_color_palette">
+        <div class="o_theme_customize_color_previews">
+            <div>
+                <h6>Main colors</h6>
+                <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color">
+                    <t t-call="website.theme_customize_color_palette_button">
+                        <t t-set="color_type" t-value="'theme'"/>
                     </t>
-                </div>
-                <div>
-                    <h6>State colors</h6>
-                    <t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
-                        <t t-call="website.theme_customize_color_palette_button">
-                            <t t-set="color_type" t-value="'theme'"/>
-                        </t>
+                </t>
+            </div>
+            <div>
+                <h6>Background colors</h6>
+                <t t-foreach="{'body': _t('Body'), 'menu': _t('Menus'), 'footer': _t('Footer')}" t-as="color">
+                    <t t-call="website.theme_customize_color_palette_button"/>
+                </t>
+            </div>
+            <div>
+                <h6>Text colors</h6>
+                <t t-foreach="{'text': _t('Text'), 'h1': _t('Headings 1'), 'h2': _t('Headings 2'), 'h3': _t('Headings 3'), 'h4': _t('Headings 4'), 'h5': _t('Headings 5'), 'h6': _t('Headings 6')}" t-as="color">
+                    <t t-call="website.theme_customize_color_palette_button"/>
+                </t>
+            </div>
+            <div>
+                <h6>State colors</h6>
+                <t t-foreach="{'success': _t('Success'), 'info': _t('Info'), 'warning': _t('Warning'), 'danger': _t('Error')}" t-as="color">
+                    <t t-call="website.theme_customize_color_palette_button">
+                        <t t-set="color_type" t-value="'theme'"/>
                     </t>
-                </div>
+                </t>
             </div>
         </div>
     </t>
     <t t-name="website.theme_customize_color_palette_button">
         <button type="button"
-            t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}"
+            t-attf-class="btn btn-secondary #{color == 'primary' or color == 'secondary' ? 'd-none' : 'd-flex'} align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}"
             t-att-data-color="color"
             t-att-data-color-type="color_type">
             <span class="o_color_name"><t t-esc="color_value"/></span>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 4a5ad2b4e1f..0b52b91bdb1 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -437,46 +437,49 @@
 
     <opt>: Declares a new toggle option
         -> id (optional) = an ID to associate to the option
+
         -> string (optional) = option's text
         -> data-icon (optional) = an image URL to set as option's background
-        -> data-xmlid (optional) = template(s) to enable if the input is checked (list of comma-separated xml ids)
-        -> data-enable (optional) = enable other options (list of comma-separated option ids)
-        -> data-disable (optional) = disable other options (list of comma-separated option ids)
-        -> data-reload (optional) = force the reloading of the page if the url matches the value
-                                    Otherwise, only the main assets are reloaded
-        -> data-font (optional) = indicates which fonts to use to style the option and adds
-                                  default sample text if no 'string' is specified
-                                  (see $o-theme-fonts in scss)
-        -> data-color-palette (optional) = indicates which color palette to use to style the option
-                                           (see $o-theme-color-palettes in scss)
-
-    <more>: Declares a subset of options which is hidden by default (with a button to show it)
-        -> string = button's text
+        -> data-font (optional) = indicates which fonts to use to style the
+                option and adds default sample text if no 'string' is specified
+                (see $o-theme-fonts in scss)
+        -> data-col (optional, default 6) = bootstrap column size for the option
+                (ignored for options in a <list/>)
+
+        -> data-xmlid (optional) = template(s) to enable if the input is
+                checked (list of comma-separated xml ids)
+        -> data-enable (optional) = enable other options (list of
+                comma-separated option ids)
+        -> data-disable (optional) = disable other options (list of
+                comma-separated option ids)
+        -> data-reload (optional) = force the reloading of the page if the url
+                matches the value. Otherwise, only the main assets are reloaded
+
+        -> data-widget (optional) = indicates which widget to use (available
+                widgets are: color_palette)
 
     <list>: Declares a subset of options showed as a list
         -> string = list's title
+        -> data-col (optional, default 6) = bootstrap column size for the list
 -->
 <template id="theme_customize">
     <div>
         <!-- Color options -->
         <content id="theme_customize_content_colors" string="Colors" title="Choose the theme colors">
-            <opt data-xmlid="" data-color-palette="user" string="Choose your colors"/>
+            <opt data-widget="color_palette" data-col="12"/>
         </content>
 
         <!-- Layout Options -->
         <content id="theme_customize_content_layout" string="Layout" title="Choose your layout">
-            <!-- In a <more/> so that it is on a new line if themes add options before -->
-            <more data-depends="">
-                <list string="Body">
-                    <opt string="Full" data-xmlid="" data-icon="/website/static/src/img/options/layout-full.png"/>
-                    <opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed_variables" data-icon="/website/static/src/img/options/layout-boxed.png"/>
-                </list>
-                <list string="Background">
-                    <opt id="option_no_background" string="None" data-xmlid=""/>
-                    <opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
-                    <opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
-                </list>
-            </more>
+            <list string="Body">
+                <opt string="Full" data-xmlid="" data-icon="/website/static/src/img/options/layout-full.png"/>
+                <opt id="option_layout_boxed" string="Boxed" data-xmlid="website.option_layout_boxed_variables" data-icon="/website/static/src/img/options/layout-boxed.png"/>
+            </list>
+            <list string="Background">
+                <opt id="option_no_background" string="None" data-xmlid=""/>
+                <opt string="Choose an image" data-xmlid="website.option_custom_body_image"/>
+                <opt string="Choose a pattern" data-xmlid="website.option_custom_body_image, website.option_custom_body_pattern"/>
+            </list>
         </content>
 
         <!-- Font options -->