From d9c450ac97de40c71aebd487cff725bfda6a577b Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Sat, 22 Aug 2020 15:02:21 +0000
Subject: [IMP] web_editor, website: introduce foldable zones in the editor UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 &emsp; 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>
---
 addons/website/static/src/xml/website.editor.xml | 40 +++++++++++-------------
 1 file changed, 19 insertions(+), 21 deletions(-)

(limited to 'addons/website/static/src/xml/website.editor.xml')

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>
-- 
cgit v1.2.3