From 50abe8947a0cf7903a72949887f67478bcf8a6ce Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Mon, 20 Dec 2021 15:10:09 +0000 Subject: [PATCH] [FIX] website: prepare cover dataset upon color selection Before this commit the cover dataset was only updated during updateUI() but if the cover was saved before closing the color palette after selecting a solid color, the selected color was not confirmed and the saved cover dataset was based on the previously selected color. After this commit the cover dataset is updated whenever an option is selected to handle the specific "save before close color palette" case. task-2678100 closes odoo/odoo#81835 X-original-commit: ad59cbd33e0eaf5c7c77f9e5c0b0435917e2c155 Signed-off-by: Quentin Smetz (qsm) Co-authored-by: Benoit Socias Co-authored-by: qsm-odoo --- .../static/src/js/editor/snippets.options.js | 120 +++++++++++++----- addons/website/views/snippets/snippets.xml | 6 +- 2 files changed, 89 insertions(+), 37 deletions(-) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 4e710f68201..1454fc79d3a 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -2467,6 +2467,10 @@ options.registry.CoverProperties = options.Class.extend({ $defaultSizeBtn.click(); $defaultSizeBtn.closest('we-select').click(); } + + if (!previewMode) { + this._updateSavingDataset(); + } }, /** * @see this.selectClass for parameters @@ -2474,47 +2478,30 @@ options.registry.CoverProperties = options.Class.extend({ filterValue: function (previewMode, widgetValue, params) { this.$filter.css('opacity', widgetValue || 0); this.$filter.toggleClass('oe_black', parseFloat(widgetValue) !== 0); + + if (!previewMode) { + this._updateSavingDataset(); + } }, - - //-------------------------------------------------------------------------- - // Public - //-------------------------------------------------------------------------- - /** - * @private + * @override */ - updateUI: async function () { + selectStyle: async function (previewMode, widgetValue, params) { await this._super(...arguments); - // TODO: `o_record_has_cover` should be handled using model field, not - // resize_class to avoid all of this. - let coverClass = this.$el.find('[data-cover-opt-name="size"] we-button.active').data('selectClass') || ''; - const bg = this.$image.css('background-image'); - if (bg && bg !== 'none') { - coverClass += " o_record_has_cover"; + if (!previewMode) { + this._updateSavingDataset(widgetValue); } - // Update saving dataset - this.$target[0].dataset.coverClass = coverClass; - this.$target[0].dataset.textAlignClass = this.$el.find('[data-cover-opt-name="text_align"] we-button.active').data('selectClass') || ''; - this.$target[0].dataset.filterValue = this.$filterValueOpts.filter('.active').data('filterValue') || 0.0; - const colorPickerWidget = this._requestUserValueWidgets('bg_color_opt')[0]; - // TODO there is probably a better way and this should be refactored to - // use more standard colorpicker+imagepicker structure - const ccValue = colorPickerWidget._ccValue; - const colorOrGradient = colorPickerWidget._value; - const isGradient = weUtils.isColorGradient(colorOrGradient); - const isCSSColor = !isGradient && ColorpickerWidget.isCSSColor(colorOrGradient); - const colorNames = []; - if (ccValue) { - colorNames.push(ccValue); + }, + /** + * @override + */ + selectClass: async function (previewMode, widgetValue, params) { + await this._super(...arguments); + + if (!previewMode) { + this._updateSavingDataset(); } - if (!isGradient && !isCSSColor) { - colorNames.push(colorOrGradient); - } - this.$target[0].dataset.bgColorClass = weUtils.computeColorClasses(colorNames).join(' '); - this.$target[0].dataset.bgColorStyle = - isCSSColor ? `background-color: ${colorOrGradient};` : - isGradient ? `background-color: rgba(0, 0, 0, 0); background-image: ${colorOrGradient};` : ''; }, //-------------------------------------------------------------------------- @@ -2548,6 +2535,71 @@ options.registry.CoverProperties = options.Class.extend({ } return this._super(...arguments); }, + /** + * @private + */ + _updateColorDataset(bgColorStyle = '', bgColorClass = '') { + this.$target[0].dataset.bgColorStyle = bgColorStyle; + if (bgColorClass) { + this.$target[0].dataset.bgColorClass = bgColorClass; + } + }, + /** + * Updates the cover properties dataset used for saving. + * + * @private + */ + _updateSavingDataset(colorValue) { + const [colorPickerWidget, sizeWidget, textAlignWidget] = this._requestUserValueWidgets('bg_color_opt', 'size_opt', 'text_align_opt'); + if (!colorPickerWidget) { + // Saving without closing the color palette, but the last picked + // color was already taken into account (we still need to update the + // dataset when a custom color is selected). + if (colorValue) { + this._updateColorDataset(`background-color: ${colorValue};`); + } + return; + } + // TODO: `o_record_has_cover` should be handled using model field, not + // resize_class to avoid all of this. + // Get values from DOM (selected values in options are only available + // after updateUI) + const sizeOptValues = sizeWidget.getMethodsParams('selectClass').possibleValues; + let coverClass = [...this.$target[0].classList].filter( + value => sizeOptValues.includes(value) + ).join(' '); + const bg = this.$image.css('background-image'); + if (bg && bg !== 'none') { + coverClass += " o_record_has_cover"; + } + const textAlignOptValues = textAlignWidget.getMethodsParams('selectClass').possibleValues; + const textAlignClass = [...this.$target[0].classList].filter( + value => textAlignOptValues.includes(value) + ).join(' '); + const filterEl = this.$target[0].querySelector('.o_record_cover_filter'); + const filterValue = filterEl && filterEl.style.opacity; + // Update saving dataset + this.$target[0].dataset.coverClass = coverClass; + this.$target[0].dataset.textAlignClass = textAlignClass; + this.$target[0].dataset.filterValue = filterValue || 0.0; + // TODO there is probably a better way and this should be refactored to + // use more standard colorpicker+imagepicker structure + const ccValue = colorPickerWidget._ccValue; + const colorOrGradient = colorPickerWidget._value; + const isGradient = weUtils.isColorGradient(colorOrGradient); + const isCSSColor = !isGradient && ColorpickerWidget.isCSSColor(colorOrGradient); + const colorNames = []; + if (ccValue) { + colorNames.push(ccValue); + } + if (!isGradient && !isCSSColor) { + colorNames.push(colorOrGradient); + } + const bgColorClass = weUtils.computeColorClasses(colorNames).join(' '); + const bgColorStyle = isCSSColor ? `background-color: ${colorOrGradient};` : + isGradient ? `background-color: rgba(0, 0, 0, 0); background-image: ${colorOrGradient};` : ''; + this._updateColorDataset(bgColorStyle, bgColorClass); + }, }); options.registry.ScrollButton = options.Class.extend({ diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index b2fee2bb86b..9588d51bd17 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -1041,18 +1041,18 @@ - + Full Screen Half Screen Fit text - + None Low Medium High - + Left Centered Right