From 27604376a9fde507bb75e03fe3fc70907810de03 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Wed, 29 Sep 2021 14:09:39 +0000
Subject: [PATCH] [IMP] web_editor, website: improve "palettes-chooser"
 dropdown design

This commit reviews the component design in order to match the
"Configurator" one.

As a result, 'color-4' and 'color-5' are hidden in the palette-chooser
while remaining visible/editable once the palette is active.

This commit will also reorder color fields in the sidebar and in the
colopicker in order to match both the palette-preview & CC-list colors
order.

Beside design consistency, another reason behind these changes goes back
to the initial stages of the color system introduced with v14.

At the very beginning the system was designed to handle 3 custom colors
+ "locked" black and white.
Being able to edit black and white sounded interesting at that time;
as a result 'color-4' and 'color-5' have been introduced in the
system.

Despite being a powerful tool for designers and pro-users, the edition
of these color has been proven to be tricky an potentially unsafe.

Together with new default palettes that standardize 'color-4' and
'color-5' to safe values, hiding these color from the list simplify
the palette selection process and aims, implicitly, to communicate to
"normal" users that these colors are "not part of the palette", while
somehow related.

task-2656337

closes odoo/odoo#77857

X-original-commit: 02aba326710523bf210644e9038198059db1672c
Related: odoo/design-themes#514
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_editor/views/editor.xml            |  6 ++-
 .../static/src/js/editor/snippets.options.js  |  4 +-
 .../static/src/scss/website.wysiwyg.scss      | 39 +++++++++++++++----
 addons/website/views/snippets/snippets.xml    |  4 +-
 4 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml
index 6b9a4d577e5..ba70ecfce88 100644
--- a/addons/web_editor/views/editor.xml
+++ b/addons/web_editor/views/editor.xml
@@ -35,7 +35,11 @@
 <template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user">
     <colorpicker>
         <div class="o_colorpicker_section" data-name="theme">
-            <button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button>
+            <button data-color="o-color-1"/>
+            <button data-color="o-color-3"/>
+            <button data-color="o-color-2"/>
+            <button data-color="o-color-4" class="ml-2"/>
+            <button data-color="o-color-5"/>
         </div>
         <div class="o_colorpicker_section" data-name="common">
             <button data-color="black"></button>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 4a3b11b9f6b..b9dfacc6a19 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1237,13 +1237,13 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             const btnEl = document.createElement('we-button');
             btnEl.classList.add('o_palette_color_preview_button');
             btnEl.dataset.customizeWebsiteVariable = `'${paletteName}'`;
-            for (let c = 1; c <= 5; c++) {
+            [1, 3, 2].forEach(c => {
                 const colorPreviewEl = document.createElement('span');
                 colorPreviewEl.classList.add('o_palette_color_preview');
                 const color = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${c}`, style);
                 colorPreviewEl.style.backgroundColor = color;
                 btnEl.appendChild(colorPreviewEl);
-            }
+            });
             paletteSelectorEl.appendChild(btnEl);
         }
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 68d986d3e00..44cfd93c2bd 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -114,20 +114,33 @@ $i: 1;
 
 #oe_snippets > .o_we_customize_panel {
     .o_we_user_value_widget.o_palette_color_preview_button {
+        display: inline-flex;
+        margin: 1% 0;
+        padding-right: 0.3rem;
+        width: 50%;
+        background: transparent;
+
+        &.active, &:hover {
+            background: transparent;
+
+            > div {
+                box-shadow: 0 0 0 2px $o-we-bg-darkest, 0 0 0 3px $o-we-accent;
+            }
+        }
+
         > div {
             display: flex;
             flex: 1 1 auto;
             align-items: stretch;
+            justify-content: flex-end;
+            margin: 3px;
+            min-height: $o-we-sidebar-content-field-dropdown-grid-item-height * .5;
+            border-radius: $o-we-sidebar-content-field-dropdown-grid-item-height;
+            box-shadow: 0 0 0 1px $o-we-bg-darkest;
         }
+
         .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;
-            }
         }
     }
 
@@ -183,7 +196,11 @@ $i: 1;
         .o_we_so_color_palette.o_we_user_value_widget {
 
             + .o_we_so_color_palette {
-                margin-left: 10px;
+                margin-left: $o-we-item-spacing * .5;
+
+                &:nth-child(4) {
+                    margin-left: $o-we-item-spacing * 3;
+                }
             }
             .o_we_color_preview {
                 width: $o-we-sidebar-content-field-colorpicker-size-large;
@@ -204,6 +221,12 @@ $i: 1;
             > div, we-toggler {
                 height: 100%;
             }
+
+            we-selection-items {
+                padding-top: $o-we-dropdown-item-height * .5;
+                padding-bottom: $o-we-dropdown-item-height * .5;
+                background: $o-we-dropdown-item-active-bg;
+            }
         }
         we-toggler {
             align-items: center;
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 5e43e150cc6..5ba530e5014 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1276,11 +1276,11 @@
             <we-colorpicker data-name="color_1_opt" title="Primary"
                             data-customize-website-color="" data-color="o-color-1"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
+            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
+                            data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-name="color_2_opt" title="Secondary"
                             data-customize-website-color="" data-color="o-color-2"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
-            <we-colorpicker data-customize-website-color="" data-color="o-color-3"
-                            data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-4"
                             data-use-css-color="true" data-selected-tab="custom-colors"/>
             <we-colorpicker data-customize-website-color="" data-color="o-color-5"