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

[FIX] website: prepare cover dataset upon color selection

Browse Source 
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) <qsm@odoo.com>
Co-authored-by: Benoit Socias <bso@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
This commit is contained in:
xO-Tx
2021-12-23 14:14:57 +00:00
committed by qsm-odoo
co-authored by Benoit Socias qsm-odoo
parent c5e6a743da
commit 50abe8947a
2 changed files with 89 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+86 -34
View File
@@ -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({
addons/website/views/snippets/snippets.xml
+3 -3
View File
@@ -1041,18 +1041,18 @@
</we-button>
</we-button-group>
</we-row>
<we-select string="Size" data-cover-opt-name="size">
<we-select string="Size" data-name="size_opt" data-cover-opt-name="size">
<we-button data-select-class="o_full_screen_height">Full Screen</we-button>
<we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
<we-button data-select-class="cover_auto">Fit text</we-button>
</we-select>
<we-select string="Filter Intensity" data-cover-opt-name="filters">
<we-select string="Filter Intensity" data-name="filters_opt" data-cover-opt-name="filters">
<we-button data-filter-value="0.0">None</we-button>
<we-button data-filter-value="0.2">Low</we-button>
<we-button data-filter-value="0.4">Medium</we-button>
<we-button data-filter-value="0.6">High</we-button>
</we-select>
<we-select string="Text Alignment" data-cover-opt-name="text_align">
<we-select string="Text Alignment" data-name="text_align_opt" data-cover-opt-name="text_align">
<we-button data-select-class="">Left</we-button>
<we-button data-select-class="text-center">Centered</we-button>
<we-button data-select-class="text-right">Right</we-button>