From 7736d2002c7ace5999807e2ff80988544a7f78d5 Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 3 Jan 2023 15:50:23 +0000
Subject: [PATCH] [FIX] web_editor: force custom style in ui on non-custom link
with style
This reverts commit [1] so as to avoid updating the DOM in two separate
places of the code for link edition. Said commit intended to prevent the
removal of custom styles on a button on which styles were applied
(erroneously) without applying a custom button class. This fixes that
issue by adapting the UI to show the button is custom if there are
custom styles applied. This way, if any change is applied, when
modifying the DOM, the custom class will be applied as well. This is the
order in which such corrections are usually applied with the snippets
bar.
[1]: https://github.com/odoo/odoo/commit/eb4edac560227b46efdcfe958e3b93e0b88def64
closes odoo/odoo#108615
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
.../static/src/js/wysiwyg/widgets/link.js | 7 ++++++
.../src/js/wysiwyg/widgets/link_tools.js | 22 +++++++++----------
2 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
index ca67765ae687..09b704339a45 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link.js
@@ -211,6 +211,13 @@ const Link = Widget.extend({
this.$link.css('border-width', data.customBorderWidth);
this.$link.css('border-style', data.customBorderStyle);
this.$link.css('border-color', data.customBorder);
+ } else {
+ this.$link.css('color', '');
+ this.$link.css('background-color', '');
+ this.$link.css('background-image', '');
+ this.$link.css('border-width', '');
+ this.$link.css('border-style', '');
+ this.$link.css('border-color', '');
}
const attrs = Object.assign({}, this.data.oldAttributes, {
href: data.url,
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 adbb86054e7b..2b08720ddc33 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
@@ -44,14 +44,23 @@ const LinkTools = Link.extend({
/**
* @override
*/
- start: function () {
+ start: async function () {
const titleEls = this.el.querySelectorAll('we-title');
for (const titleEl of titleEls) {
// See _buildTitleElement for explanation
titleEl.textContent = titleEl.textContent.replace(/⌙/g, '└');
}
this._addHintClasses();
- return this._super(...arguments);
+ const ret = await this._super(...arguments);
+ const link = this.$link[0];
+ const customStyleProps = ['color', 'background-color', 'background-image', 'border-width', 'border-style', 'border-color'];
+ if (customStyleProps.some(s => link.style[s])) {
+ // Force custom style if style exists on the link.
+ const customOption = this.el.querySelector('[name="link_style_color"] we-button[data-value="custom"]');
+ this._setSelectOption($(customOption), true);
+ await this._updateOptionsUI();
+ }
+ return ret;
},
destroy: function () {
if (!this.el) {
@@ -375,15 +384,6 @@ const LinkTools = Link.extend({
if ($target.closest('[name="link_border_style"]').length) {
return;
}
- if ($target.closest('[name="link_style_color"]')) {
- // Reset custom styles when changing link style.
- this.$link.css('color', '');
- this.$link.css('background-color', '');
- this.$link.css('background-image', '');
- this.$link.css('border-width', '');
- this.$link.css('border-style', '');
- this.$link.css('border-color', '');
- }
const $select = $target.closest('we-select');
$select.find('we-selection-items we-button').toggleClass('active', false);
this._setSelectOption($target, true);
--
GitLab