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 15429cf3cf6..1c717a7cef2 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1024,7 +1024,12 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({ if (typeof this._previewColor === 'string') { return this._previewColor; } - return this._super(...arguments); + let value = this._super(...arguments); + if (value && this.options.dataAttributes.hasOwnProperty('cssCompatible') && + !ColorpickerDialog.isCSSColor(value)) { + value = `var(--${value})`; + } + return value; }, /** * @override @@ -1879,7 +1884,15 @@ const SnippetOptionWidget = Widget.extend({ const styles = window.getComputedStyle(this.$target[0]); const cssProps = weUtils.CSS_SHORTHANDS[params.cssProperty] || [params.cssProperty]; const cssValues = cssProps.map(cssProp => { - return styles[cssProp].trim(); + let value = styles[cssProp].trim(); + if (cssProp === 'box-shadow') { + const inset = value.includes('inset'); + let values = value.replace(/,\s/g, ',').replace('inset', '').trim().split(/\s+/g); + const color = values.find(s => !s.match(/^\d/)); + values = values.join(' ').replace(color, '').trim(); + value = `${color} ${values}${inset ? ' inset' : ''}`; + } + return value; }); if (cssValues.length === 4 && weUtils.areCssValuesEqual(cssValues[3], cssValues[1], params.cssProperty, this.$target)) { cssValues.pop(); diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index aed48f7ea29..4bd1546c478 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -491,6 +491,17 @@ body.editor_enable.editor_has_snippets { } } + we-multi we-row > div { + flex-wrap: wrap; + + we-select .o_we_user_value_widget > div > we-select-menu { + top: 0; + } + we-row { + flex-basis: 100%; + } + } + //---------------------------------------------------------------------- // Layout Utils //---------------------------------------------------------------------- diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 8a6f89ee06f..96ba1d63bb0 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1622,6 +1622,47 @@ options.registry.anchor = options.Class.extend({ }, }); +/** + * Controls box properties. + */ +options.registry.Box = options.Class.extend({ + + //-------------------------------------------------------------------------- + // Options + //-------------------------------------------------------------------------- + + /** + * @see this.selectClass for parameters + */ + setShadow(previewMode, widgetValue, params) { + this.$target.toggleClass(params.shadowClass, !!widgetValue); + if (widgetValue) { + const inset = widgetValue === 'inset' ? widgetValue : ''; + const values = this.$target.css('box-shadow').replace('inset', '') + ` ${inset}`; + this.$target[0].style.setProperty('box-shadow', values, 'important'); + } else { + this.$target.css('box-shadow', ''); + } + }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @override + */ + _computeWidgetState(methodName, params) { + if (methodName === 'setShadow') { + if (!this.$target[0].classList.contains(params.shadowClass)) { + return ''; + } + return this.$target.css('box-shadow').includes('inset') ? 'inset' : 'outset'; + } + return this._super(...arguments); + }, +}); + options.registry.CookiesBar = options.registry.SnippetPopup.extend({ xmlDependencies: (options.registry.SnippetPopup.prototype.xmlDependencies || []).concat( ['/website/static/src/xml/website.cookies_bar.xml'] diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index a09c0c8d4f1..b359e118e4e 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -149,18 +149,41 @@ data-unit="px" data-extra-class="rounded"/> + +