pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor: update opened colorpickers upon button color picking

Browse Source 
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
This commit is contained in:
Benoit Socias
2021-09-15 23:51:14 +00:00
committed by qsm-odoo
parent 28e4335669
commit 700888217c
1 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+19 -1
View File
@@ -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();
}
});
},