diff options
| author | qsm-odoo <qsm@odoo.com> | 2020-07-22 10:04:17 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2020-07-22 10:31:28 +0000 |
| commit | 85531edd1be76287daeb54e1425cd3f59e1c138c (patch) | |
| tree | ef3d7484eda8beec03a495b1cae0fa21a11e1b00 /addons/web_editor/static/src/js/editor | |
| parent | 6d96111196ed4550e655f9f6e171fcd3cd0cada4 (diff) | |
[FIX] web_editor, *: restore editor UI for selected CSS variables
*: website
Commit [1] broke the UI for some options related to CSS variables when
using Chrome. The commit made sure the string-value CSS variables are
printed with quotes, so that the JS representation of the CSS values can
distinguish them (strings = strings with surrounding quotes, others like
colors, numbers, etc = strings without surrounding quotes). With chrome,
the printed surrounding single quotes are read as double quotes for
strange reasons though... so the value "a" was not considered equal to
the value 'a'.
This commit makes sure surrounding quotes are normalized. This is done
through a new utility function to read CSS variables. This also makes
sure the values are trimmed, and colors normalized.
[1]: https://github.com/odoo/odoo/commit/3a34e39caa8544059dfb1888edc29c62c3efde31
closes odoo/odoo#54757
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Diffstat (limited to 'addons/web_editor/static/src/js/editor')
| -rw-r--r-- | addons/web_editor/static/src/js/editor/snippets.options.js | 11 |
1 files changed, 3 insertions, 8 deletions
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 285283f1fc8..daa53fb7dae 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1198,9 +1198,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({ const cssCompatible = this.options.dataAttributes.hasOwnProperty('cssCompatible'); if ((useCssColor || cssCompatible) && !ColorpickerWidget.isCSSColor(value)) { if (useCssColor) { - const style = window.getComputedStyle(document.documentElement); - value = style.getPropertyValue(`--${value}`).trim(); - value = ColorpickerWidget.normalizeCSSColor(value); + value = weUtils.getCSSVariableValue(value); } else { value = `var(--${value})`; } @@ -1840,8 +1838,7 @@ const SnippetOptionWidget = Widget.extend({ // At this point, the widget value is either a property/color name or // an actual css property value. If it is a property/color name, we will // apply a css variable as style value. - const htmlStyle = window.getComputedStyle(document.documentElement); - const htmlPropValue = htmlStyle.getPropertyValue('--' + widgetValue); + const htmlPropValue = weUtils.getCSSVariableValue(widgetValue); if (htmlPropValue) { widgetValue = `var(--${widgetValue})`; } @@ -2999,9 +2996,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({ */ _normalizeColor(color) { if (!ColorpickerWidget.isCSSColor(color)) { - const style = window.getComputedStyle(document.documentElement); - color = style.getPropertyValue('--' + color).trim(); - color = ColorpickerWidget.normalizeCSSColor(color); + color = weUtils.getCSSVariableValue(color); } return color; }, |