[IMP] web_editor, *: review 'options' tab specific components design

*: website

Part of https://github.com/odoo/odoo/pull/55959
task-2157252

3 files changed, 146 insertions, 18 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index b4c6191d2b5..14a2bcfdc57 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1045,7 +1045,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
 
         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-down');
+            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);
@@ -1116,9 +1116,11 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     _onCCHeadingsTogglerClick(ev) {
         const togglerEl = ev.currentTarget;
         const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse');
-        const show = togglerEl.classList.contains('fa-caret-down');
-        togglerEl.classList.toggle('fa-caret-down', !show);
-        togglerEl.classList.toggle('fa-caret-up', show);
+        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)
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 8a6c6fceeda..148ae3cea74 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -103,20 +103,146 @@ $i: 1;
     border-top: 1px solid currentColor !important;
 }
 
-#oe_snippets > .o_we_customize_panel .o_we_user_value_widget.o_palette_color_preview_button {
-    > div {
-        display: flex;
-        flex: 1 1 auto;
-        align-items: stretch;
+#oe_snippets > .o_we_customize_panel {
+    .o_we_user_value_widget.o_palette_color_preview_button {
+        > div {
+            display: flex;
+            flex: 1 1 auto;
+            align-items: stretch;
+        }
+        .o_palette_color_preview {
+            flex: 1 0 0;
+            margin: 1px 0;
+            transition: flex 150ms ease 0s;
+        }
+        &:not(:hover) .o_palette_color_preview {
+            &:nth-child(4), &:nth-child(5) {
+                flex: 0 0 0;
+            }
+        }
+    }
+
+    //----------------------------------------------------------------------
+    // 'Options' Tab Specific Components
+    //----------------------------------------------------------------------
+
+    // Theme Colors Editor
+    .o_we_theme_colors_selector {
+
+        > we-title {
+            display: none
+        }
+        .o_we_so_color_palette.o_we_user_value_widget {
+
+            + .o_we_so_color_palette {
+                margin-left: 10px;
+            }
+            .o_we_color_preview {
+                width: $o-we-sidebar-content-field-colorpicker-size-large;
+                height: $o-we-sidebar-content-field-colorpicker-size-large;
+            }
+        }
+        > div, we-select.o_we_theme_colors_select, we-toggler {
+            display: flex;
+        }
+        > div {
+            align-items: stretch;
+            width: 100%;
+        }
+        we-select.o_we_theme_colors_select {
+            justify-content: flex-end;
+            margin-left: auto;
+
+            > div, we-toggler {
+                height: 100%;
+            }
+        }
+        we-toggler {
+            align-items: center;
+            padding: 0 0.4rem;
+            font-size: 1.5em;
+
+            &:after {
+                content: none;
+            }
+        }
     }
-    .o_palette_color_preview {
-        flex: 1 0 0;
-        margin: 1px 0;
-        transition: flex 150ms ease 0s;
+
+    // Palettes Dropdown
+    .o_palette_color_preview_button > div {
+        min-height: 24px;
     }
-    &:not(:hover) .o_palette_color_preview {
-        &:nth-child(4), &:nth-child(5) {
-            flex: 0 0 0;
+
+    // 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;
+
+        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 * -1;
+                font-size: 1.3em;
+                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-sidebar-content-field-dropdown-bg;
+                }
+                &::before {
+                    @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, 0, $-cc-l-gap);
+                }
+                + we-collapse {
+                    margin-bottom: $-cc-base-spacer * 2;
+                    padding-left: $-cc-base-spacer;
+                    border: none;
+                    background: none;
+
+                    &:before {
+                        @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -1, $-cc-l-gap);
+                    }
+                }
+            }
+        }
+        &: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-sidebar-bg;
+                opacity: .8;
+            }
+            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: 0 -1px 0 black;
+            }
+            .o_cc_subheadings_collapse::before {
+                @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2);
+            }
         }
     }
 }
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5fcec4eea1a..632df4b44ae 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -846,7 +846,7 @@
             we recommend you to try to use the new color system, which is
             still customizable.
         </we-alert>
-        <we-row>
+        <we-row class="o_we_theme_colors_selector">
             <we-colorpicker data-name="color_1_opt" title="Primary"
                             data-customize-website-color="" data-color="o-color-1"
                             data-use-css-color="true"/>
@@ -859,7 +859,7 @@
                             data-use-css-color="true"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-5"
                             data-use-css-color="true"/>
-            <we-select data-icon="fa-lightbulb-o" data-variable="color-palettes-number"/>
+            <we-select data-icon="fa-lightbulb-o" class="o_we_theme_colors_select" data-variable="color-palettes-number"/>
         </we-row>
         <div class="o_color_combinations_edition"/>
     </div>