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

[FIX] web_editor: fix select theme color if match

Browse Source 
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
This commit is contained in:
fja-odoo
2020-03-11 09:57:52 +00:00
parent 3c1b50c510
commit 2c1ebbf89e
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+23 -17
View File
@@ -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,
});
});