From ea994b0cbb81597ccc7be1765018223c3a6c986c Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 23 Oct 2019 13:50:21 +0000
Subject: [PATCH] [IMP] web_editor, *: review 'colorPalette' editor UI

*: website, mass_mailing

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2087383

Co-authored-by: fja-odoo <fja@odoo.com>
---
 addons/mass_mailing/views/snippets_themes.xml |  9 +--
 .../static/src/js/editor/snippets.options.js  | 52 ++++++++++----
 .../src/js/wysiwyg/widgets/color_palette.js   |  1 -
 .../static/src/scss/wysiwyg_snippets.scss     | 25 +++++--
 addons/web_editor/static/tests/test_utils.js  | 14 +---
 addons/website/views/snippets.xml             | 70 ++++---------------
 6 files changed, 78 insertions(+), 93 deletions(-)

diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml
index 75f3d04487d..1af913687fc 100644
--- a/addons/mass_mailing/views/snippets_themes.xml
+++ b/addons/mass_mailing/views/snippets_themes.xml
@@ -807,13 +807,8 @@
         data-selector=".note-editable > div:not(.o_layout), .note-editable .oe_structure > div, td, th"
         data-exclude=".o_mail_no_resize, .o_mail_no_options"/>
 
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Background Color"
         data-selector=".note-editable > div:not(.o_layout), .note-editable .oe_structure > div, td, th"
-        data-exclude=".o_mail_no_colorpicker, .o_mail_no_options">
-        <we-collapse-area>
-            <we-toggler>Background Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-exclude=".o_mail_no_colorpicker, .o_mail_no_options"/>
 </template>
 </odoo>
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 4c592157c71..1237c041bf1 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -4,7 +4,6 @@ odoo.define('web_editor.snippets.options', function (require) {
 var core = require('web.core');
 var ColorPaletteWidget = require('web_editor.ColorPalette').ColorPaletteWidget;
 var Dialog = require('web.Dialog');
-var rte = require('web_editor.rte');
 var Widget = require('web.Widget');
 var weWidgets = require('wysiwyg.widgets');
 
@@ -858,11 +857,16 @@ var SnippetOption = Widget.extend({
      * @param {string} [title]
      * @param {Object} [options] - @see this.buildElement
      * @param {HTMLElement[]} [options.childNodes]
+     * @param {HTMLElement} [options.valueEl]
      * @returns {HTMLElement}
      */
     buildSelectElement: function (title, options) {
         const selectEl = SnippetOption.prototype.buildElement('we-select', title, options);
 
+        if (options && options.valueEl) {
+            selectEl.appendChild(options.valueEl);
+        }
+
         const menuTogglerEl = document.createElement('we-toggler');
         selectEl.appendChild(menuTogglerEl);
 
@@ -1148,22 +1152,25 @@ registry['sizing_y'] = registry.sizing.extend({
 registry.colorpicker = SnippetOption.extend({
     xmlDependencies: ['/web_editor/static/src/xml/snippets.xml'],
     custom_events: {
-        color_picked: '_onColorPicked',
-        custom_color_picked: '_onCustomColor',
-        color_hover: '_onColorHovered',
-        color_leave: '_onColorLeft',
-        color_reset: '_onColorReset',
+        'color_picked': '_onColorPicked',
+        'custom_color_picked': '_onCustomColor',
+        'color_hover': '_onColorHovered',
+        'color_leave': '_onColorLeft',
+        'color_reset': '_onColorReset',
     },
 
     /**
      * @override
      */
-    start: function () {
+    start: async function () {
+        const _super = this._super.bind(this);
+        const args = arguments;
+
+        // Pre-instanciate the color palette widget
         const options = {
             selectedColor: this.$target.css('background-color'),
             targetClasses: [...this.$target[0].classList],
         };
-        const proms = [this._super(...arguments)];
         if (this.data.paletteExclude) {
             options.excluded = this.data.paletteExclude.replace(/ /g, '').split(',');
         }
@@ -1171,11 +1178,23 @@ registry.colorpicker = SnippetOption.extend({
             options.colorPrefix = this.data.colorPrefix;
         }
         this.colorPalette = new ColorPaletteWidget(this, options);
-        proms.push(this.colorPalette.appendTo(this.$el.find('we-collapse')));
+        await this.colorPalette.appendTo(document.createDocumentFragment());
 
-        return Promise.all(proms);
+        // Build the select element with a custom span to hold the color preview
+        this.colorPreviewEl = document.createElement('span');
+        const selectEl = this.buildSelectElement(this.data.string, {
+            classes: ['o_we_so_color_palette'],
+            childNodes: [this.colorPalette.el],
+            valueEl: this.colorPreviewEl,
+        });
+
+        // Replace the colorpicker UI with the select element
+        this.$el.empty().append(selectEl);
+        return _super(...args);
     },
-
+    /**
+     * @override
+     */
     onFocus: function () {
         this.colorPalette.reloadColorPalette();
     },
@@ -1199,6 +1218,13 @@ registry.colorpicker = SnippetOption.extend({
             this.$target.css('background-color', cssColor);
         }
     },
+    /**
+     * @override
+     */
+    _updateUI: function () {
+        this._super.apply(this, arguments);
+        this.colorPreviewEl.style.backgroundColor = this.$target.css('background-color');
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -1211,6 +1237,7 @@ registry.colorpicker = SnippetOption.extend({
      * @param {Event} ev
      */
     _onColorPicked: function () {
+        this._updateUI();
         this.$target.closest('.o_editable').trigger('content_changed');
         this.$target.trigger('background-color-event', false);
     },
@@ -1249,7 +1276,8 @@ registry.colorpicker = SnippetOption.extend({
      * @private
      */
     _onColorReset: function () {
-        this._targetColorChange('');
+        this._changeTargetColor('');
+        this._updateUI();
         this.$target.trigger('content_changed');
     },
 });
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
index def39a53b32..5c5ab0ca866 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
@@ -65,7 +65,6 @@ const ColorPaletteWidget = Widget.extend({
         await templatePromise;
         return res;
     },
-
     /**
      * @override
      */
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 14df9435f48..41515e626db 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -414,6 +414,24 @@ body.editor_enable.editor_has_snippets {
                 }
             }
         }
+
+        .o_we_so_color_palette {
+            we-title + span {
+                @include o-alpha-button-preview;
+                display: block;
+                flex: 0 0 auto;
+                width: 1em;
+                height: 1em;
+                margin-left: auto;
+                border: 1px solid white;
+            }
+            we-toggler {
+                display: none;
+            }
+            we-select-menu {
+                border-top-style: solid;
+            }
+        }
     }
 }
 
@@ -473,7 +491,7 @@ body.editor_enable.editor_has_snippets {
             padding-top: percentage(1 / 8);
             margin: 0;
             border: none;
-            box-shadow: inset 0 0 0 1px var(--o-we-snippets-bg-color);
+            box-shadow: inset 0 0 0 1px var(--o-we-bg-color-dark);
         }
 
         .o_colorpicker_section {
@@ -488,11 +506,6 @@ body.editor_enable.editor_has_snippets {
                     border-radius: 50%;
                 }
 
-                &:hover,
-                &.selected {
-                    box-shadow: inset 0 0 1px 1px var(--o-we-snippets-bg-color);
-                }
-
                 &.selected::before {
                     @include o-position-absolute(0, 0, 0, 0);
                     content: "\f00c" !important;
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index c757c4dfd93..d5356f3b64d 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -78,12 +78,7 @@ MockServer.include({
                         '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <we-collapse-area>' +
-                        '           <we-toggler>Background Color</we-toggler>' +
-                        '           <we-collapse/>' +
-                        '       </we-collapse-area>' +
-                        '    </div>' +
+                        '    <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
                         '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
@@ -250,12 +245,7 @@ function wysiwygData(data) {
                         '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
                         'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
                         '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-js="colorpicker" data-selector=".test_option_all">' +
-                        '       <we-collapse-area>' +
-                        '           <we-toggler>Background Color</we-toggler>' +
-                        '           <we-collapse/>' +
-                        '       </we-collapse-area>' +
-                        '    </div>' +
+                        '    <div data-js="colorpicker" string="Background Color" data-selector=".test_option_all"></div>' +
                         '    <div data-js="background" data-selector=".test_option_all">' +
                         '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
                         '    </div>' +
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index 0209c3a3f48..dc708bf308d 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -982,46 +982,25 @@
     <t t-call="web_editor.snippet_options"/>
 
     <!-- COLOR | .s_three_columns | .s_comparisons -->
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Color"
         data-selector=".s_three_columns .row > div, .s_comparisons .row > div, .s_tabs .row > div"
-        data-target=".card">
-        <we-collapse-area>
-            <we-toggler>Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-target=".card"/>
 
     <!-- COLOR | .s_hr -->
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Color"
         data-selector=".s_hr"
         data-target="hr"
         data-color-prefix="border-"
-        data-palette-exclude="transparent_grayscale, common, custom">
-        <we-collapse-area>
-            <we-toggler>Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-palette-exclude="transparent_grayscale, common, custom"/>
 
     <!-- COLOR | .s_cards -->
-    <div data-js="colorpicker"
-        data-selector=".s_card, .accordion .card">
-        <we-collapse-area>
-            <we-toggler>Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+    <div data-js="colorpicker" string="Color"
+        data-selector=".s_card, .accordion .card"/>
 
     <!-- COLOR | .s_alert -->
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Color"
         data-selector=".s_alert"
-        data-color-prefix="alert-">
-        <we-collapse-area>
-            <we-toggler>Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
-
+        data-color-prefix="alert-"/>
 
     <!-- STYLES | .s_title -->
     <div data-selector=".s_title" data-target="[class*='s_title_']">
@@ -1263,36 +1242,21 @@
     </div>
 
     <!-- Color | Section -->
-    <div id="so_main_colorpicker"
+    <div id="so_main_colorpicker" string="Background Color"
         data-js="colorpicker"
         data-selector="section, .carousel-item"
-        data-exclude=".parallax, .o_gallery .carousel-item">
-        <we-collapse-area>
-            <we-toggler>Background Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-exclude=".parallax, .o_gallery .carousel-item"/>
 
     <!-- FILTER | .s_parallax -->
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Filter"
         data-selector=".parallax"
         data-palette-exclude="common, theme, custom"
-        data-palette-default="transparent_grayscale">
-        <we-collapse-area>
-            <we-toggler>Filter</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-palette-default="transparent_grayscale"/>
 
     <!-- Color | Columns -->
-    <div data-js="colorpicker"
+    <div data-js="colorpicker" string="Background Color"
         data-selector="section .row > div"
-        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
-        <we-collapse-area>
-            <we-toggler>Background Color</we-toggler>
-            <we-collapse/>
-        </we-collapse-area>
-    </div>
+        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div"/>
 
     <div data-selector="section .row > div"
         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
@@ -1340,15 +1304,11 @@
         <we-checkbox string="Transparent" data-transparent="true" data-no-preview="true"/>
     </div>
 
-    <div data-js="topMenuColor"
+    <div data-js="topMenuColor" string="Background Color"
         data-selector="[data-main-object^='website.page('] #wrapwrap > header"
         data-palette-exclude="theme,common, custom"
         data-palette-default="transparent_grayscale"
         data-no-check="true">
-        <we-collapse-area>
-            <we-toggler>Background Color</we-toggler>
-            <div class="dropdown-menu"/>
-        </we-collapse-area>
     </div>
 
     <!-- Anchor Name -->