diff options
Diffstat (limited to 'addons/web_editor/static/src/js')
3 files changed, 89 insertions, 33 deletions
diff --git a/addons/web_editor/static/src/js/common/utils.js b/addons/web_editor/static/src/js/common/utils.js index 912b4717c69..e7e2a4fad97 100644 --- a/addons/web_editor/static/src/js/common/utils.js +++ b/addons/web_editor/static/src/js/common/utils.js @@ -139,6 +139,33 @@ function _areCssValuesEqual(value1, value2, cssProp, $target) { const numValue2 = _convertValueToUnit(value2, data[1], cssProp, $target); return (Math.abs(numValue1 - numValue2) < Number.EPSILON); } +/** + * @param {string|number} name + * @returns {boolean} + */ +function _isColorCombinationName(name) { + const number = parseInt(name); + return (!isNaN(number) && number % 100 !== 0); +} +/** + * @param {string[]} colorNames + * @param {string} [prefix='bg-'] + * @returns {string[]} + */ +function _computeColorClasses(colorNames, prefix = 'bg-') { + let hasCCClasses = false; + const classes = colorNames.map(c => { + if (_isColorCombinationName(c)) { + hasCCClasses = true; + return `o_cc${c}`; + } + return (prefix + c); + }); + if (hasCCClasses) { + classes.push('o_cc'); + } + return classes; +} return { CSS_SHORTHANDS: CSS_SHORTHANDS, @@ -148,5 +175,7 @@ return { convertNumericToUnit: _convertNumericToUnit, getNumericAndUnit: _getNumericAndUnit, areCssValuesEqual: _areCssValuesEqual, + isColorCombinationName: _isColorCombinationName, + computeColorClasses: _computeColorClasses, }; }); diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 0b30bf856ce..212ab507755 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1086,11 +1086,15 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({ * @returns {Promise} */ _renderColorPalette: function () { - const options = {}; - options.selectedColor = this._value; + const options = { + selectedColor: this._value, + }; if (this.options.dataAttributes.excluded) { options.excluded = this.options.dataAttributes.excluded.replace(/ /g, '').split(','); } + if (this.options.dataAttributes.withCombinations) { + options.withCombinations = !!this.options.dataAttributes.withCombinations; + } const oldColorPalette = this.colorPalette; this.colorPalette = new ColorPaletteWidget(this, options); if (oldColorPalette) { @@ -1108,14 +1112,17 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({ _updateUI: async function (color) { await this._super(...arguments); - this.colorPreviewEl.classList.remove(...this.colorPalette.getColorNames().map(c => 'bg-' + c)); + const classes = weUtils.computeColorClasses(this.colorPalette.getColorNames()); + this.colorPreviewEl.classList.remove(...classes); this.colorPreviewEl.style.removeProperty('background-color'); if (this._value) { if (ColorpickerWidget.isCSSColor(this._value)) { this.colorPreviewEl.style.backgroundColor = this._value; + } else if (weUtils.isColorCombinationName(this._value)) { + this.colorPreviewEl.classList.add('o_cc', `o_cc${this._value}`); } else { - this.colorPreviewEl.classList.add('bg-' + this._value); + this.colorPreviewEl.classList.add(`bg-${this._value}`); } } @@ -1631,9 +1638,15 @@ const SnippetOptionWidget = Widget.extend({ // other potential color names (to remove) and if we know about a prefix // (otherwise we suppose that we should use the actual related color). if (params.colorNames && params.colorPrefix) { - const classes = params.colorNames.map(c => params.colorPrefix + c); + const classes = weUtils.computeColorClasses(params.colorNames, params.colorPrefix); this.$target[0].classList.remove(...classes); + if (weUtils.isColorCombinationName(widgetValue)) { + // Those are the special color combinations classes. Just have + // to add it (and adding the potential extra class) then leave. + this.$target[0].classList.add('o_cc', `o_cc${widgetValue}`, params.extraClass); + return; + } if (params.colorNames.includes(widgetValue)) { const originalCSSValue = window.getComputedStyle(this.$target[0])[cssProps[0]]; const className = params.colorPrefix + widgetValue; @@ -1924,7 +1937,8 @@ const SnippetOptionWidget = Widget.extend({ case 'selectStyle': { if (params.colorPrefix && params.colorNames) { for (const c of params.colorNames) { - if (this.$target[0].classList.contains(params.colorPrefix + c)) { + const className = weUtils.computeColorClasses([c], params.colorPrefix)[0]; + if (this.$target[0].classList.contains(className)) { return c; } } diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js index 60fdec4108d..4f6d677a1cb 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js @@ -7,6 +7,7 @@ const session = require('web.session'); const {ColorpickerWidget} = require('web.Colorpicker'); const Widget = require('web.Widget'); const summernoteCustomColors = require('web_editor.rte.summernote_custom_colors'); +const weUtils = require('web_editor.utils'); const qweb = core.qweb; @@ -14,9 +15,10 @@ const ColorPaletteWidget = Widget.extend({ // ! for xmlDependencies, see loadDependencies function template: 'web_editor.snippet.option.colorpicker', events: { - 'click button': '_onColorButtonClick', - 'mouseenter button': '_onColorButtonEnter', - 'mouseleave button': '_onColorButtonLeave', + 'click .o_we_color_btn': '_onColorButtonClick', + 'mouseenter .o_we_color_btn': '_onColorButtonEnter', + 'mouseleave .o_we_color_btn': '_onColorButtonLeave', + 'click .o_we_colorpicker_switch_pane_btn': '_onSwitchPaneButtonClick', }, custom_events: { 'colorpicker_select': '_onColorPickerSelect', @@ -42,9 +44,13 @@ const ColorPaletteWidget = Widget.extend({ excluded: [], excludeSectionOf: null, $editable: $(), + withCombinations: false, }, options || {}); this.selectedColor = ''; + this.resetButton = this.options.resetButton; + this.withCombinations = this.options.withCombinations; + this.trigger_up('request_editable', {callback: val => this.options.$editable = val}); }, /** @@ -60,28 +66,20 @@ const ColorPaletteWidget = Widget.extend({ start: async function () { const res = this._super.apply(this, arguments); - const $colorSection = this.$('.o_colorpicker_sections'); - const $wrapper = $colorSection.find('.o_colorpicker_section_tabs'); + const $colorSection = this.$('.o_colorpicker_sections[data-color-tab="theme-colors"]'); const $clpicker = qweb.has_template('web_editor.colorpicker') ? $(qweb.render('web_editor.colorpicker')) : $(`<colorpicker><div class="o_colorpicker_section" data-name="common"></div></colorpicker>`); - $clpicker.appendTo($wrapper); + $clpicker.find('button').addClass('o_we_color_btn'); + $clpicker.appendTo($colorSection); // Remove excluded palettes (note: only hide them to still be able // to remove their related colors on the DOM target) - _.each(this.options.excluded, function (exc) { - $colorSection.find('[data-name="' + exc + '"]').addClass('d-none'); + _.each(this.options.excluded, exc => { + this.$('[data-name="' + exc + '"]').addClass('d-none'); }); if (this.options.excludeSectionOf) { - $colorSection.find('[data-name]:has([data-color="' + this.options.excludeSectionOf + '"])').addClass('d-none'); - } - - if (this.options.resetButton) { - let $section = this.$('.o_colorpicker_section[data-name="theme"]'); - if ($section.hasClass('d-none')) { - $section = $section.insertBefore('<div class="o_colorpicker_section" data-name="reset"/>'); - } - this._createColorButton('', ['o_colorpicker_reset', 'float-right']).appendTo($section); + this.$('[data-name]:has([data-color="' + this.options.excludeSectionOf + '"])').addClass('d-none'); } this.el.querySelectorAll('.o_colorpicker_section').forEach(elem => { @@ -109,9 +107,14 @@ const ColorPaletteWidget = Widget.extend({ this.el.querySelectorAll('button[data-color]').forEach(elem => { const colorName = elem.dataset.color; const $color = $(elem); - $color.addClass('bg-' + colorName); + const isCCName = weUtils.isColorCombinationName(colorName); + if (isCCName) { + $color.find('.o_we_cc_preview_wrapper').addClass(`o_cc o_cc${colorName}`); + } else { + $color.addClass(`bg-${colorName}`); + } this.colorNames.push(colorName); - if (!elem.classList.contains('d-none')) { + if (!isCCName && !elem.classList.contains('d-none')) { const color = ColorpickerWidget.normalizeCSSColor(this.style.getPropertyValue('--' + colorName).trim()); this.colorToColorNames[color] = colorName; } @@ -140,7 +143,7 @@ const ColorPaletteWidget = Widget.extend({ this.colorPicker = new ColorpickerWidget(this, { defaultColor: defaultColor, }); - await this.colorPicker.prependTo(this.$el); + await this.colorPicker.prependTo($colorSection); return res; }, /** @@ -217,12 +220,8 @@ const ColorPaletteWidget = Widget.extend({ _addCustomColorButton: function (color, classes = []) { classes.push('o_custom_color'); const $themeSection = this.$('.o_colorpicker_section[data-name="theme"]'); - // There is 8 buttons on a colorpalette line, the clear button is always the last of the first line. - if (this.options.resetButton && $themeSection.find('button').length < 8) { - const $resetButton = $themeSection.find('.o_colorpicker_reset'); - return this._createColorButton(color, classes).insertBefore($resetButton); - } - return this._createColorButton(color, classes).appendTo($themeSection); + const $button = this._createColorButton(color, classes); + return $button.appendTo($themeSection); }, /** * Return a color button. @@ -233,7 +232,7 @@ const ColorPaletteWidget = Widget.extend({ */ _createColorButton: function (color, classes) { return $('<button/>', { - class: classes.join(' '), + class: 'o_we_color_btn ' + classes.join(' '), style: 'background-color:' + color + ';', }); }, @@ -338,6 +337,20 @@ const ColorPaletteWidget = Widget.extend({ target: this.colorPicker.el, }, 'custom_color_picked'); }, + /** + * @private + * @param {Event} ev + */ + _onSwitchPaneButtonClick(ev) { + ev.stopPropagation(); + this.el.querySelectorAll('.o_we_colorpicker_switch_pane_btn').forEach(el => { + el.classList.remove('active'); + }); + ev.currentTarget.classList.add('active'); + this.el.querySelectorAll('.o_colorpicker_sections').forEach(el => { + el.classList.toggle('d-none', el.dataset.colorTab !== ev.currentTarget.dataset.target); + }); + }, }); //------------------------------------------------------------------------------ |