From 700888217c526dd57296de7c96d073d5dfb8341f Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Tue, 14 Sep 2021 07:47:39 +0000
Subject: [PATCH] [IMP] web_editor: update opened colorpickers upon button
 color picking

Before this commit the button custom color colorpickers were not updated
when a color was selected - but this was alright because the
colorpickers did not remain opened.

After this commit the button custom color colorpickers are updated
whenever a color is picked, which is necessary during gradient edition.

task-2599771

X-original-commit: f40c980d7ff68f27b389a93cd2b8f60cbff5baa6
Part-of: odoo/odoo#76608
---
 .../src/js/wysiwyg/widgets/link_tools.js      | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index be14f37e3d8..539899d56e0 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -33,6 +33,8 @@ const LinkTools = Link.extend({
         }
         const link = node || this.getOrCreateLink(editable);
         this._super(parent, options, editable, data, $button, link);
+        // Keep track of each colorpicker.
+        this.colorpickers = {};
     },
     /**
      * @override
@@ -142,7 +144,8 @@ const LinkTools = Link.extend({
      * @override
      */
     _getLinkCustomFill: function () {
-        return this.$('we-selection-items[name="link-custom-color-fill"] .o_we_color_preview').css('background-color') || '';
+        const $colorPreview = this.$('we-selection-items[name="link-custom-color-fill"] .o_we_color_preview');
+        return $colorPreview.css('background-image') || $colorPreview.css('background-color') || '';
     },
     /**
      * @override
@@ -175,10 +178,19 @@ const LinkTools = Link.extend({
             if (el.dataset.value === 'custom') {
                 const textColor = this.$link[0].style['color'];
                 this.$('.link-custom-color-text .o_we_color_preview').css('background-color', textColor);
+                if (this.colorpickers['color'] && textColor && textColor !== 'false') {
+                    // Keep currently selected tab when setting color.
+                    this.colorpickers['color'].setSelectedColor(null, textColor, false);
+                }
                 const backgroundColor = this.$link[0].style['background-color'];
                 this.$('.link-custom-color-fill .o_we_color_preview').css('background-color', backgroundColor);
                 const backgroundImage = this.$link[0].style['background-image'];
                 this.$('.link-custom-color-fill .o_we_color_preview').css('background-image', backgroundImage);
+                const backgroundFill = (backgroundImage !== 'false' && backgroundImage) || backgroundColor;
+                if (this.colorpickers['background-color'] && backgroundFill && backgroundFill !== 'false') {
+                    // Keep currently selected tab when setting color.
+                    this.colorpickers['background-color'].setSelectedColor(null, backgroundFill, false);
+                }
                 const borderWidth = this.$link[0].style['border-width'];
                 const numberAndUnit = getNumericAndUnit(borderWidth);
                 this.$('.link-custom-color-border input').val(numberAndUnit ? numberAndUnit[0] : "1");
@@ -194,6 +206,10 @@ const LinkTools = Link.extend({
                 $activeBorderStyleButton.find('div').clone().appendTo($activeBorderStyleToggler);
                 const borderColor = this.$link[0].style['border-color'];
                 this.$('.link-custom-color-border .o_we_color_preview').css('background-color', borderColor);
+                if (this.colorpickers['border-color'] && borderColor && borderColor !== 'false') {
+                    // Keep currently selected tab when setting color.
+                    this.colorpickers['border-color'].setSelectedColor(null, borderColor, false);
+                }
             }
         }
     },
@@ -239,6 +255,7 @@ const LinkTools = Link.extend({
             selectedColor: color,
             withGradients: cssProperty === 'background-color',
         });
+        this.colorpickers[cssProperty] = colorpicker;
         colorpicker.appendTo($(ev.target).closest('.dropdown').find('.dropdown-menu'));
         colorpicker.on('custom_color_picked color_picked color_hover color_leave', this, (ev) => {
             let color = ev.data.color;
@@ -256,6 +273,7 @@ const LinkTools = Link.extend({
                 $colorPreview.css('background-color', color);
                 $colorPreview.css('background-image', gradientColor);
                 this.options.wysiwyg.odooEditor.historyStep();
+                this._updateOptionsUI();
             }
         });
     },