[IMP] web_editor, website: introduce foldable zones in the editor UI

Now any set of widgets and rows can be placed in a we-collapse element
so that those elements can be foldable. The first element inside (or
the mentioned "string" on the we-collapse element itself) is used as the
always shown element (with a toggler on its left to toggle the
visibility of the other items).

we-collapse inside other we-collapse is supported as well.

Limitations / Other infos:

- The use of '⌙' and   characters is not automatic (yet?).
  Sometimes it actually make sense to use them without a we-collapse or
  to not use them in a we-collapse.

- The use of we-collapse is limited to widgets inside the same option.
  So unfortunately, there is no current way to add all bg image options
  in a folable section as those contain many different options. Maybe
  in the future.

Part of https://github.com/odoo/odoo/pull/56350

closes odoo/odoo#56350

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 19 insertions, 21 deletions

diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 6c84406a93f..164786f2398 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -85,27 +85,25 @@
     </t>
 
     <t t-name="website.color_combination_edition">
-        <div>
-            <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
-            <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
-            <we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
-            <we-row string="⌙ Sub-Headings" class="o_cc_subheadings_collapse" t-att-data-uid="number">
-                <we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6" t-att-data-sh-uid="number"/>
-            </we-row>
-            <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
-            <we-row string="Main Buttons">
-                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
-                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
-            </we-row>
-            <we-row string="Buttons">
-                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
-                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
-            </we-row>
-        </div>
+        <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
+        <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
+        <we-collapse>
+            <we-colorpicker string="Headings" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
+            <we-colorpicker string="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
+            <we-colorpicker string="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
+            <we-colorpicker string="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
+            <we-colorpicker string="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
+            <we-colorpicker string="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
+        </we-collapse>
+        <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
+        <we-row string="Main Buttons">
+            <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
+            <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
+        </we-row>
+        <we-row string="Buttons">
+            <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
+            <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
+        </we-row>
     </t>
     <div t-name="website.s_google_map_modal">
         <p>Use Google Map on your website (Contact Us page, snippets, etc).</p>