[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

1 files changed, 31 insertions, 29 deletions

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>