[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>

3 files changed, 30 insertions, 192 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 94bbd7f5991..548172fd0a1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -987,20 +987,6 @@ options.registry.OptionsTab = options.Class.extend({
 });
 
 options.registry.ThemeColors = options.registry.OptionsTab.extend({
-    events: Object.assign({}, options.registry.OptionsTab.prototype.events, {
-        'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick',
-        // FIXME investigate why using 'click' does not work *anymore* but those
-        // foldable areas will be made more robust and standard with the new UI.
-        'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick',
-    }),
-
-    /**
-     * @constructor
-     */
-    init() {
-        this._super(...arguments);
-        this._showCCSubHeadings = {};
-    },
     /**
      * @override
      */
@@ -1034,31 +1020,6 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     /**
      * @override
      */
-    async _computeWidgetVisibility(widgetName, params) {
-        if (params.shUid) {
-            return !!this._showCCSubHeadings[params.shUid];
-        }
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    async _renderOriginalXML($xml) {
-        const uiFragment = await this._super(...arguments);
-
-        uiFragment.querySelectorAll('.o_cc_subheadings_toggler').forEach(headingsEl => {
-            const togglerEl = document.createElement('span');
-            togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-right');
-            togglerEl.setAttribute('role', 'button');
-            const titleEl = headingsEl.querySelector('we-title');
-            titleEl.insertBefore(togglerEl, titleEl.firstChild);
-        });
-
-        return uiFragment;
-    },
-    /**
-     * @override
-     */
     async _renderCustomXML(uiFragment) {
         const paletteSelectorEl = uiFragment.querySelector('[data-variable="color-palettes-number"]');
         const style = window.getComputedStyle(document.documentElement);
@@ -1077,63 +1038,17 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             paletteSelectorEl.appendChild(btnEl);
         }
 
-        const ccEl = uiFragment.querySelector('.o_color_combinations_edition');
         for (let i = 1; i <= 5; i++) {
-            const togglerEl = document.createElement('we-toggler');
-            togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
-            const divEl = document.createElement('div');
+            const collapseEl = document.createElement('we-collapse');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
             ccPreviewEl.classList.add('text-center', `o_cc${i}`);
-            divEl.appendChild(ccPreviewEl);
-            togglerEl.appendChild(divEl);
-            ccEl.appendChild(togglerEl);
-
-            const collapseEl = document.createElement('we-collapse');
-            const editionEl = $(qweb.render('website.color_combination_edition', {number: i}))[0];
-            collapseEl.appendChild(editionEl);
-            ccEl.appendChild(collapseEl);
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onCCTogglerClick(ev) {
-        const ccTogglerEls = this.el.querySelectorAll('.o_color_combinations_edition we-toggler');
-        for (const el of ccTogglerEls) {
-            if (el !== ev.currentTarget) {
-                el.classList.remove('active');
+            collapseEl.appendChild(ccPreviewEl);
+            const editionEls = $(qweb.render('website.color_combination_edition', {number: i}));
+            for (const el of editionEls) {
+                collapseEl.appendChild(el);
             }
+            uiFragment.appendChild(collapseEl);
         }
-        ev.currentTarget.classList.toggle('active');
-    },
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onCCHeadingsTogglerClick(ev) {
-        const togglerEl = ev.currentTarget;
-        const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse');
-        const show = togglerEl.classList.contains('fa-caret-right');
-        const parentEl = togglerEl.closest('we-select');
-        togglerEl.classList.toggle('fa-caret-right', !show);
-        togglerEl.classList.toggle('fa-caret-down', show);
-        parentEl.classList.toggle('active', show);
-        this._showCCSubHeadings[collapseEl.dataset.uid] = show;
-        // FIXME big hack to rerender the interface (all the foldable code is
-        // a hack currently anyway, it needs to be generic)
-        this.trigger_up('snippet_edition_request', {exec: async () => {
-            return new Promise(resolve => setTimeout(() => {
-                this.trigger_up('snippet_option_update', {
-                    onSuccess: () => resolve(),
-                });
-            }));
-        }});
     },
 });
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 862068e506b..d36be483290 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -59,10 +59,6 @@
 
 #oe_snippets {
     top: $o-we-sidebar-top-height;
-
-    .o_color_combinations_edition {
-        margin-top: $o-we-sidebar-content-field-spacing;
-    }
 }
 
 .note-statusbar {
@@ -173,88 +169,17 @@ $i: 1;
         min-height: 24px;
     }
 
-    // CC Editor
-    .o_color_combinations_edition {
-        $-cc-base-spacer: 16px;
-        $-cc-r-gap: $o-we-sidebar-content-block-spacing * -1;
-        $-cc-l-gap: ($o-we-sidebar-content-indent * -1) - 1px;
+    // CC Edition
+    .o_we_cc_preview_wrapper {
+        border: 1px solid $o-we-sidebar-content-field-dropdown-border-color;
 
-        we-toggler {
-            margin: ($-cc-base-spacer * .5) 0;
-            border: 0;
-            padding-right: 0;
-            background: none;
-            overflow: visible;
-
-            &:after {
-                top: $-cc-base-spacer * .3;
-                left: $-cc-base-spacer * -.8;
-                transform: rotate(-90deg);
-            }
-            .o_we_cc_preview_wrapper {
-                border: 1px solid $o-we-sidebar-content-field-dropdown-border-color;
-            }
-            &.active {
-                &::after {
-                    transform: rotate(180deg);
-                }
-                &::before, + we-collapse::before {
-                    content: '';
-                    background-color: $o-we-bg-light;
-                }
-                &::before {
-                    @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, 0, $-cc-l-gap);
-                    z-index: auto;
-                    transform: none;
-                }
-                + we-collapse {
-                    margin-bottom: $-cc-base-spacer * 1.3;
-                    padding-left: $-cc-base-spacer;
-                    border: none;
-                    background: none;
-
-                    &:before {
-                        @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap);
-                        box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, 0.2);
-                    }
-                }
-            }
-        }
-        &:last-of-type we-toggler {
-            margin-bottom: 0;
-        }
-        we-collapse {
-            we-select.o_cc_subheadings_toggler, .o_cc_subheadings_collapse {
-                we-title {
-                    position: relative;
-                    overflow: visible;
-                }
-            }
-            .o_cc_subheadings_collapse {
-                margin-bottom: $-cc-base-spacer;
-            }
-            we-select.o_cc_subheadings_toggler.active::before, .o_cc_subheadings_collapse::before {
-                content: '';
-                background-color: $o-we-bg-dark;
-            }
-            we-select.o_cc_subheadings_toggler.active:before {
-                @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2);
-                box-shadow: $o-we-item-standup-top $o-we-item-standup-color-dark;
-            }
-            .o_cc_subheadings_collapse::before {
-                @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2);
-                box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
-            }
+        + .o_we_collapse_toggler {
+            height: 35px; // FIXME hardcoded...
         }
     }
 }
 
 // SNIPPET OPTIONS
-we-collapse {
-    position: relative;
-    padding: 0.3em 0.3em 0.3em 1em;
-}
-
 .o_we_border_preview {
     display: inline-block;
     width: 999px;
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>