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

3 files changed, 59 insertions, 19 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 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());
+
+        // 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,
+        });
 
-        return Promise.all(proms);
+        // 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;