From f2bee5d2a138bc9dfa234f4933c9ae150ef08960 Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Fri, 15 Dec 2023 14:07:03 +0100
Subject: [PATCH] [FIX] web_editor: restore gradient custom buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since [1] when the `Colorpicker` template cache was moved from
`ColorPalette` to `getColorPickerTemplateService`, the custom buttons
fill color cannot be set as a gradient anymore.
This happens because the needed `getTemplate` props is injected for the
font and background colors, for the `we-colorpicker` but not for the
link tools color palettes.

This commit restores the gradient color selection for custom buttons by
linking the `getColorPickerTemplateService` to the link tools color
palettes.

Steps to reproduce:
- Edit Home page.
- Click on "Contact Us" link in header.
- Select link style "Custom" in link tools.
- Open "Fill Color" palette.

=> Gradient tab was not shown in palette.

[1]: https://github.com/odoo/odoo/commit/1d2e54088b0f0e28464ab6aa884fb2e1110e8e04

task-3641914

closes odoo/odoo#147373

X-original-commit: 087861bcbfe444765fdb0b81e0398c12d8db34e8
Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js | 1 +
 addons/web_editor/static/src/js/wysiwyg/wysiwyg.js            | 3 ++-
 addons/web_editor/static/src/xml/wysiwyg.xml                  | 3 +++
 3 files changed, 6 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 96a1b297c4d..92d1b71bfe0 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
@@ -24,6 +24,7 @@ export class LinkTools extends Link {
         onPreApplyLink: { type: Function, optional: true },
         onPostApplyLink: { type: Function, optional: true },
         onDestroy: { type: Function, optional: true },
+        getColorpickerTemplate: { type: Function, optional: true },
     };
     static defaultProps = {
         ...Link.defaultProps,
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 2ece37ca753..549b7cc958b 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1375,7 +1375,8 @@ export class Wysiwyg extends Component {
                         onDestroy: () => {
                             removeHintClasses();
                             this.linkToolsInfos.onDestroy();
-                        }
+                        },
+                        getColorpickerTemplate: this.getColorpickerTemplate.bind(this),
                     };
                 }
                 // update the shouldFocusUrl prop to focus on url when double click and click edit link
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index c8d045087c6..7499e0b305b 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -167,6 +167,7 @@
                                 onColorLeave="(params) => this._colorpaletteApply('color', params)"
                                 onColorPicked="(params) => this._onColorpaletteColorPicked('color', params)"
                                 onCustomColorPicked="(params) => this._onColorpaletteColorPicked('color', params)"
+                                getTemplate="this.props.getColorpickerTemplate"
                                 />
                         </we-selection-items>
                     </div>
@@ -188,6 +189,7 @@
                                 onColorLeave="(params) => this._colorpaletteApply('background-color', params)"
                                 onColorPicked="(params) => this._onColorpaletteColorPicked('background-color', params)"
                                 onCustomColorPicked="(params) => this._onColorpaletteColorPicked('background-color', params)"
+                                getTemplate="this.props.getColorpickerTemplate"
                                 />
                         </we-selection-items>
                     </div>
@@ -230,6 +232,7 @@
                                     onColorLeave="(params) => this._colorpaletteApply('border-color', params)"
                                     onColorPicked="(params) => this._onColorpaletteColorPicked('border-color', params)"
                                     onCustomColorPicked="(params) => this._onColorpaletteColorPicked('border-color', params)"
+                                    getTemplate="this.props.getColorpickerTemplate"
                                     />
                             </we-selection-items>
                         </div>