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

[IMP] web_editor: apply important on selectStyle only when needed

Browse Source 
Before this commit `selectStyle` was always applying inline styles as
`!important`.

After this commit the `!important` priority is only set if the style is
not taken into account without it.

Steps to reproduce:
- drop a "Text - Image" snippet
- select a solid Background color
=> `background-color` appears in inline style without `!important`
- select the image
- set a 10px Border width
=> `border-width` appears in inline style with `!important`
- set a 10px Round Corners
=> `border-radius` appears in inline style with `!important`
- set a 1px Border width
=> `border-width` does NOT appear in inline style because the added
`border` class already specifies that width

task-2765880

closes odoo/odoo#84765

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Benoit Socias
2022-04-04 18:46:50 +02:00
parent bc6c87f19d
commit d3c3dab895
1 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+28 -1
View File
@@ -3273,8 +3273,35 @@ const SnippetOptionWidget = Widget.extend({
hasUserValue = applyCSS.call(this, cssProps[0], values.join(' '), styles) || hasUserValue;
function applyCSS(cssProp, cssValue, styles) {
// This condition requires extraClass to NOT be set.
if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
this.$target[0].style.setProperty(cssProp, cssValue, 'important');
// Property must be set => extraClass will be enabled.
if (params.extraClass) {
// The extraClass is temporarily removed during selectStyle
// because it is enabled only if the element style is set
// by the option. (E.g. add the bootstrap border class only
// if there is a border width.) Unfortunately the
// extraClass might specify default !important properties,
// therefore determining whether !important is needed
// requires the class to be applied.
this.$target[0].classList.add(params.extraClass);
// Set inline style only if different from value defined
// with extraClass.
if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
this.$target[0].style.setProperty(cssProp, cssValue);
}
} else {
// Inline style required.
this.$target[0].style.setProperty(cssProp, cssValue);
}
// If change had no effect then make it important.
// This condition requires extraClass to be set.
if (!weUtils.areCssValuesEqual(styles[cssProp], cssValue, cssProp, this.$target[0])) {
this.$target[0].style.setProperty(cssProp, cssValue, 'important');
}
if (params.extraClass) {
this.$target[0].classList.remove(params.extraClass);
}
return true;
}
return false;