[FIX] website, *: do not lose the shadow configuration on option hover

*: web_editor

Hovering the shadow mode option reset the entire shadow instead of just
previewing the mode change.

Related to opw-2701512

closes odoo/odoo#81980

X-original-commit: cae1b99052ded63a3e532b92419236dd51056fd8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2021-12-28 15:06:48 +00:00
parent ab5c7f7ea8
commit 2e4d4485c9
@@ -4411,21 +4411,55 @@ registry.Box = SnippetOptionWidget.extend({
//--------------------------------------------------------------------------
/**
* TODO this should be reviewed in master to avoid the need of using the
* 'reset' previewMode and having to remember the previous box-shadow value.
* We are forced to remember the previous box shadow before applying a new
* one as the whole box-shadow value is handled by multiple widgets.
*
* @see this.selectClass for parameters
*/
async setShadow(previewMode, widgetValue, params) {
// Check if the currently configured shadow is not using the same shadow
// mode, in which case nothing has to be done.
const styles = window.getComputedStyle(this.$target[0]);
const currentBoxShadow = styles['box-shadow'] || 'none';
const currentMode = currentBoxShadow === 'none'
? ''
: currentBoxShadow.includes('inset') ? 'inset' : 'outset';
if (currentMode === widgetValue) {
return;
}
if (previewMode === true) {
this._prevBoxShadow = currentBoxShadow;
}
// Add/remove the shadow class
this.$target.toggleClass(params.shadowClass, !!widgetValue);
// Get the shadow value that is supposed to be set according to the
// shadow mode. Try to apply it via the selectStyle method so that it is
// either ignored because the shadow class had its effect or forced (to
// the shadow value or none) if toggling the class is not enough (e.g.
// if the item has a default shadow coming from CSS rules, removing the
// shadow class won't be enough to remove the shadow but in most other
// cases it will).
const defaultShadow = this._getDefaultShadow(widgetValue, params.shadowClass);
await this.selectStyle(previewMode, defaultShadow, Object.assign({cssProperty: 'box-shadow'}, params));
// Change the mode of the old box shadow. If no shadow was currently
// set then get the shadow value that is supposed to be set according
// to the shadow mode. Try to apply it via the selectStyle method so
// that it is either ignored because the shadow class had its effect or
// forced (to the shadow value or none) if toggling the class is not
// enough (e.g. if the item has a default shadow coming from CSS rules,
// removing the shadow class won't be enough to remove the shadow but in
// most other cases it will).
let shadow = 'none';
if (previewMode === 'reset') {
shadow = this._prevBoxShadow;
} else {
if (currentBoxShadow === 'none') {
shadow = this._getDefaultShadow(widgetValue, params.shadowClass);
} else {
if (widgetValue === 'outset') {
shadow = currentBoxShadow.replace('inset', '').trim();
} else if (widgetValue === 'inset') {
shadow = currentBoxShadow + ' inset';
}
}
}
await this.selectStyle(previewMode, shadow, Object.assign({cssProperty: 'box-shadow'}, params));
},
//--------------------------------------------------------------------------