[IMP] website, web_editor: add options to fully control shadows

task-2182909

closes odoo/odoo#46816

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

4 files changed, 96 insertions, 7 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 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"/>
 </template>
 
+<template id="website.snippet_options_shadow">
+    <we-select string="Shadow" data-no-preview="true" data-shadow-class="shadow">
+        <we-button data-set-shadow="">None</we-button>
+        <we-button data-set-shadow="outset" data-name="shadow_active_opt">Outset</we-button>
+        <we-button data-set-shadow="inset" data-name="shadow_inset_opt">Inset</we-button>
+    </we-select>
+    <we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
+        <we-colorpicker class="w-100 my-1" string="Color" data-select-style="" data-css-compatible=""/>
+        <we-row class="my-1">
+            <we-input string="X" data-select-style="" data-unit="px"/>
+            <we-input string="Y" data-select-style="" data-unit="px"/>
+        </we-row>
+        <we-row class="my-1">
+            <we-input string="Blur" data-select-style="" data-unit="px"/>
+            <we-input string="Spread" data-select-style="" data-unit="px"/>
+        </we-row>
+        <!-- Inset parameter always hidden (as controlled above) but needed -->
+        <!-- for the we-multi widget to work properly. -->
+        <we-checkbox data-select-style="inset" style="display: none;"/>
+    </we-multi>
+</template>
+
 <template id="snippet_options">
     <t t-call="web_editor.snippet_options"/>
 
     <!-- COLOR, BORDER, SHADOW | .s_three_columns | .s_comparisons -->
-    <div data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
+    <div data-js="Box"
+         data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
          data-target=".card">
         <we-colorpicker string="Background Color"
             data-select-style="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
         <t t-call="website.snippet_options_border"/>
-        <we-checkbox string="Shadow" data-select-class="shadow"/>
+        <t t-call="website.snippet_options_shadow"/>
     </div>
 
     <!-- COLOR | .s_cards -->
@@ -323,10 +346,11 @@
     </div>
 
     <!-- Border | Columns -->
-    <div data-selector="section .row > div"
-        data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
+    <div data-js="Box"
+         data-selector="section .row > div"
+         data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
         <t t-call="website.snippet_options_border"/>
-        <we-checkbox string="Shadow" data-select-class="shadow"/>
+        <t t-call="website.snippet_options_shadow"/>
     </div>
 
     <div data-js="sizing_y"