From 583f7ceb2dd0f52c2cc1ccf8e01d8e320b033ae8 Mon Sep 17 00:00:00 2001
From: "Arthur Detroux (ard)" <ard@odoo.com>
Date: Mon, 6 Dec 2021 11:32:22 +0000
Subject: [PATCH] [IMP] website, web_editor: provide clarity for theme colors

Prior to this commit, the color presets generated by the color palette
would always be visible by the user which could lead to confusion.
Most users would click on the presets and edit them instead of editing
the color palette.

This commit groups the presets into a collapsed section under the color
palette to incentivize the user to click on the color bubbles instead.

task-2687469

closes odoo/odoo#79921

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.options.js          |  1 +
 .../web_editor/static/src/scss/wysiwyg_snippets.scss  | 11 +++++++----
 .../website/static/src/js/editor/snippets.options.js  |  3 ++-
 addons/website/views/snippets/snippets.xml            |  2 ++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index e86e2277ece..074d8fc4eb6 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -143,6 +143,7 @@ function _buildCollapseElement(title, options) {
     const children = options && options.childNodes || [];
     if (titleEl) {
         titleEl.remove();
+        titleEl.classList.add('o_we_collapse_toggler');
         children.unshift(titleEl);
     }
     let i = 0;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 2c63afe95f5..b3d6769aa57 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1624,11 +1624,14 @@ body.editor_enable.editor_has_snippets {
                 }
             }
             &.active {
-                background-color: $o-we-sidebar-content-fold-block-bg;
                 box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
-
-                we-collapse.active, we-collapse.active .o_we_collapse_toggler {
-                    background-color: $o-we-bg-lighter;
+                we-collapse.active {
+                    &, we-toggler.o_we_collapse_toggler {
+                        background-color: $o-we-bg-lighter;
+                    }
+                }
+                &, we-collapse.active we-collapse.active, we-collapse.active we-collapse.active .o_we_collapse_toggler {
+                        background-color: $o-we-sidebar-content-fold-block-bg;
                 }
             }
             .o_we_collapse_toggler {
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 5cc1d35e936..4e710f68201 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1268,6 +1268,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             paletteSelectorEl.appendChild(btnEl);
         }
 
+        const presetCollapseEl = uiFragment.querySelector('we-collapse.o_we_theme_presets_collapse');
         for (let i = 1; i <= 5; i++) {
             const collapseEl = document.createElement('we-collapse');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
@@ -1277,7 +1278,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             for (const el of editionEls) {
                 collapseEl.appendChild(el);
             }
-            uiFragment.appendChild(collapseEl);
+            presetCollapseEl.appendChild(collapseEl);
         }
 
         await this._super(...arguments);
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index f7b8738bd2d..5111e0cdd6e 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1277,6 +1277,8 @@
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-select data-img="/website/static/src/img/snippets_options/palette.svg" class="o_we_theme_colors_select" data-variable="color-palettes-name"/>
         </we-row>
+        <we-collapse class="o_we_theme_presets_collapse" string="Color Presets">
+        </we-collapse>
     </div>
     <div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
         <we-checkbox string="Show Header"