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

[FIX] web_editor: restore colorpalette compatibility colors

Browse Source 
Colorpalette compatibility system was broken so old color classes were
not removed from snippets when being edited.
The bug was introduced by [1].

Also if a compatibility color class happens to use the same css color as
a current theme class, that one will now be shown as selected.

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

closes odoo/odoo#51464

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
fja-odoo
2020-05-18 16:41:54 +00:00
committed by qsm-odoo
parent 474a40e027
commit 8fc0a06c40
1 changed files with 7 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js
+7 -26
View File
@@ -119,7 +119,8 @@ const ColorPaletteWidget = Widget.extend({
}
// Compute class colors
this.colorNames = [];
const compatibilityColorNames = ['primary', 'secondary', 'success', 'info', 'warning', 'danger'];
this.colorNames = [...compatibilityColorNames];
this.colorToColorNames = {};
this.el.querySelectorAll('button[data-color]').forEach(elem => {
const colorName = elem.dataset.color;
@@ -135,7 +136,11 @@ const ColorPaletteWidget = Widget.extend({
// Select selected Color and build customColors.
// If no color is selected selectedColor is an empty string (transparent is interpreted as no color)
if (this.options.selectedColor) {
const selectedColor = ColorpickerWidget.normalizeCSSColor(this.options.selectedColor);
let selectedColor = this.options.selectedColor;
if (compatibilityColorNames.includes(selectedColor)) {
selectedColor = this.style.getPropertyValue('--' + selectedColor).trim() || selectedColor;
}
selectedColor = ColorpickerWidget.normalizeCSSColor(selectedColor);
if (selectedColor !== 'rgba(0, 0, 0, 0)') {
this.selectedColor = this.colorToColorNames[selectedColor] || selectedColor;
}
@@ -152,12 +157,6 @@ const ColorPaletteWidget = Widget.extend({
defaultColor: defaultColor,
});
await this.colorPicker.prependTo(this.$el);
// Add those at the very end so that we don't mark hidden colors as
// selected. We want those colors to appear as selected custom colors if
// they are chosen somehow.
this._addCompatibilityColors(['primary', 'secondary', 'success', 'info', 'warning', 'danger']);
return res;
},
/**
@@ -171,24 +170,6 @@ const ColorPaletteWidget = Widget.extend({
// Private
//--------------------------------------------------------------------------
/**
* Hardcode some existing colors (but make them hidden in the colorpicker)
* so they can be removed from snippets when selecting another color.
* Normally, the chosable colors do not contain them, which prevents them to
* be removed. For example, normally, the 'alpha' and 'beta' color (which
* are the same as primary and secondary) are displayed instead of their
* duplicates... but not for all themes.
*
* @private
* @param {string[]} colorNames
*/
_addCompatibilityColors: function (colorNames) {
for (const colorName of colorNames) {
if (!this.$('button[data-color="' + colorName + '"]').length) {
this.$el.append($('<button/>', {'class': 'd-none', 'data-color': colorName}));
}
}
},
/**
* @private
*/