[FIX] web_editor: fix select theme color if match

When a default color matches a theme color it will now select the theme
color class instead of a css attribute when clicked.

Part of: https://github.com/odoo/odoo/pull/45872

task-2212288

X-original-commit: d7b3538a814f0e53cd3c5816f8296ad5e4c5f41a

1 files changed, 23 insertions, 17 deletions

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 aa3420e99bb..f94a5e7b6e4 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
@@ -44,10 +44,6 @@ const ColorPaletteWidget = Widget.extend({
             $editable: $(),
         }, options || {});
 
-        if (this.options.selectedColor) {
-            this.selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
-        }
-
         this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
     },
     /**
@@ -118,18 +114,25 @@ const ColorPaletteWidget = Widget.extend({
         this.colorToColorNames = {};
         this.el.querySelectorAll('button[data-color]').forEach(elem => {
             const colorName = elem.dataset.color;
-            const color = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
             const $color = $(elem);
             $color.addClass('bg-' + colorName);
-            if (this.selectedColor && (this.selectedColor === colorName || this.selectedColor === color)) {
-                $color.addClass('selected');
-            }
             this.colorNames.push(colorName);
             if (!elem.classList.contains('d-none')) {
+                const color = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
                 this.colorToColorNames[color] = colorName;
             }
         });
 
+        // Select selected Color
+        if (this.options.selectedColor) {
+            const selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
+            this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
+            const selectedButton = this.el.querySelector(`button[data-color="${this.selectedColor}"], button[style*="background-color:${this.selectedColor};"]`);
+            if (selectedButton) {
+                selectedButton.classList.add('selected');
+            }
+        }
+
         return res;
     },
     /**
@@ -220,9 +223,6 @@ const ColorPaletteWidget = Widget.extend({
      * @returns {jQuery}
      */
     _createColorButton: function (color, classes) {
-        if (this.selectedColor === color) { // both colors are already normalized
-            classes.push('selected');
-        }
         return $('<button/>', {
             class: classes.join(' '),
             style: 'background-color:' + color + ';',
@@ -243,6 +243,15 @@ const ColorPaletteWidget = Widget.extend({
             target: buttonEl,
         };
     },
+    /**
+     * Set the selectedColor and inform parents
+     *
+     * @param {Object} colorInfo
+     */
+    _selectColor: function (colorInfo) {
+        this.selectedColor = colorInfo.color = this.colorToColorNames[colorInfo.color] || colorInfo.color;
+        this.trigger_up('color_picked', colorInfo);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -259,8 +268,7 @@ const ColorPaletteWidget = Widget.extend({
         this.$('button.selected').removeClass('selected');
         $(buttonEl).addClass('selected');
         const colorInfo = this._getButtonInfo(buttonEl);
-        this.selectedColor = colorInfo.color;
-        this.trigger_up('color_picked', colorInfo);
+        this._selectColor(colorInfo);
     },
     /**
      * Called when a color button is entered.
@@ -322,10 +330,8 @@ const ColorPaletteWidget = Widget.extend({
         });
         colorpicker.on('colorpicker:saved', this, ev => {
             this.$('button.selected').removeClass('selected');
-            this.selectedColor = this.colorToColorNames[ev.data.cssColor] || ev.data.cssColor;
-            this._addCustomColorButton(this.selectedColor, ['selected']);
-            this.trigger_up('color_picked', {
-                color: this.selectedColor,
+            this._selectColor({
+                color: ev.data.cssColor,
                 target: target,
             });
         });