[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

3 files changed, 56 insertions, 93 deletions

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>