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

[FIX] web_editor: fix color palette custom color behaviors

Browse Source 
Selecting a css color equals to a theme color via the custom color
was not selecting the theme color.

Opening and closing the custom color without picking a color was
unselecting the selected color.

Now the custom color picker has the selected color as default even if it
does not appear in the palette as selected. This was appearing in the
parallax snippet as no custom color is displayed.

closes odoo/odoo#44986

X-original-commit: 0c8be24ac72c223c12eadbdcf635628f203a6766
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
fja-odoo
2020-02-10 13:48:19 +00:00
committed by qsm-odoo
parent ed999bc88e
commit 574bf9bb12
1 changed files with 23 additions and 12 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 -12
View File
@@ -35,6 +35,7 @@ const ColorPaletteWidget = Widget.extend({
init: function (parent, options) {
this._super.apply(this, arguments);
this.summernoteCustomColorsArray = [].concat(...summernoteCustomColors);
this.style = window.getComputedStyle(document.documentElement);
this.options = _.extend({
selectedColor: false,
resetButton: true,
@@ -43,9 +44,8 @@ const ColorPaletteWidget = Widget.extend({
$editable: $(),
}, options || {});
const selectedColor = this.options.selectedColor;
if (selectedColor) {
this.options.selectedColor = ColorpickerDialog.normalizeCSSColor(selectedColor);
if (this.options.selectedColor) {
this.selectedColor = ColorpickerDialog.normalizeCSSColor(this.options.selectedColor);
}
this.trigger_up('request_editable', {callback: val => this.options.$editable = val});
@@ -115,16 +115,19 @@ const ColorPaletteWidget = Widget.extend({
// Compute class colors
this.colorNames = [];
const style = window.getComputedStyle(document.documentElement);
this.colorToColorNames = {};
this.el.querySelectorAll('button[data-color]').forEach(elem => {
const colorName = elem.dataset.color;
const color = ColorpickerDialog.normalizeCSSColor(style.getPropertyValue('--' + colorName).trim());
const color = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim());
const $color = $(elem);
$color.addClass('bg-' + colorName);
if (this.options.selectedColor && (this.options.selectedColor === colorName || this.options.selectedColor === color)) {
if (this.selectedColor && (this.selectedColor === colorName || this.selectedColor === color)) {
$color.addClass('selected');
}
this.colorNames.push(colorName);
if (!elem.classList.contains('d-none')) {
this.colorToColorNames[color] = colorName;
}
});
return res;
@@ -217,7 +220,7 @@ const ColorPaletteWidget = Widget.extend({
* @returns {jQuery}
*/
_createColorButton: function (color, classes) {
if (this.options.selectedColor === color) { // both colors are already normalized
if (this.selectedColor === color) { // both colors are already normalized
classes.push('selected');
}
return $('<button/>', {
@@ -255,7 +258,9 @@ const ColorPaletteWidget = Widget.extend({
const buttonEl = ev.currentTarget;
this.$('button.selected').removeClass('selected');
$(buttonEl).addClass('selected');
this.trigger_up('color_picked', this._getButtonInfo(buttonEl));
const colorInfo = this._getButtonInfo(buttonEl);
this.selectedColor = colorInfo.color;
this.trigger_up('color_picked', colorInfo);
},
/**
* Called when a color button is entered.
@@ -295,6 +300,7 @@ const ColorPaletteWidget = Widget.extend({
*/
_onColorResetButtonClick: function (ev) {
this.$('button.selected').removeClass('selected');
this.selectedColor = false;
this.trigger_up('color_reset', {
target: ev.target,
});
@@ -307,14 +313,19 @@ const ColorPaletteWidget = Widget.extend({
*/
_onCustomColorButtonClick: async function (ev) {
const target = ev.target;
const $selected = this.$('button.selected').removeClass('selected');
let selectedColor = this.selectedColor;
if (!ColorpickerDialog.isCSSColor(selectedColor)) {
selectedColor = ColorpickerDialog.normalizeCSSColor(this.style.getPropertyValue('--' + selectedColor).trim());
}
const colorpicker = new ColorpickerDialog(this, {
defaultColor: this.options.defaultColor || $selected.css('background-color'),
defaultColor: selectedColor,
});
colorpicker.on('colorpicker:saved', this, ev => {
this._addCustomColorButton(ev.data.cssColor, ['selected']);
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: ev.data.cssColor,
color: this.selectedColor,
target: target,
});
});