[IMP] web_editor,*: highlight the grid items padding when it is changed

*: website

When changing the padding of the grid items with the `Padding (Y, X)`
option (when the grid mode is toggled), depending on these items
content, the effects are not always visible.

This commit adds a highlight effect on the grid items when the padding
is changed, to better show the changes being made.

task-3058630

closes odoo/odoo#111584

X-original-commit: f3f2c4c73ce08d3898b8c88e1ef045f7bbd1f624
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -4917,6 +4917,15 @@ registry.Box = SnippetOptionWidget.extend({
 
 
 registry.layout_column = SnippetOptionWidget.extend({
+    /**
+     * @override
+     */
+    cleanForSave() {
+        // Remove the padding highlights.
+        this.$target[0].querySelectorAll('.o_we_padding_highlight').forEach(highlightedEl => {
+            highlightedEl._removePaddingPreview();
+        });
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -5061,6 +5070,24 @@ registry.layout_column = SnippetOptionWidget.extend({
         gridUtils._resizeGrid(rowEl);
         this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)});
     },
+    /**
+     * @override
+     */
+    async selectStyle(previewMode, widgetValue, params) {
+        await this._super(...arguments);
+        if (params.cssProperty.startsWith('--grid-item-padding')) {
+            // Reset the animations.
+            this._removePaddingPreview();
+            void this.$target[0].offsetWidth; // Trigger a DOM reflow.
+
+            // Highlight the padding when changing it, by adding a pseudo-
+            // element with an animated colored border inside the grid items.
+            const rowEl = this.$target[0];
+            rowEl.classList.add('o_we_padding_highlight');
+            rowEl._removePaddingPreview = this._removePaddingPreview.bind(this);
+            rowEl.addEventListener('animationend', rowEl._removePaddingPreview);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -5173,6 +5200,18 @@ registry.layout_column = SnippetOptionWidget.extend({
         // Adding back an align-items-* class.
         rowEl.classList.add('align-items-start');
     },
+    /**
+     * Removes the padding highlights that were added when changing the grid
+     * items padding.
+     *
+     * @private
+     */
+    _removePaddingPreview() {
+        const rowEl = this.$target[0];
+        rowEl.removeEventListener('animationend', rowEl._removePaddingPreview);
+        rowEl.classList.remove('o_we_padding_highlight');
+        delete rowEl._removePaddingPreview;
+    },
 });
 
 /**

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -2556,3 +2556,26 @@ we-button-group.o_grid {
     padding: 0;
     border: $o-we-handle-border-width solid $o-we-accent;
 }
+
+// Highlight of the grid items padding.
+@keyframes highlightPadding {
+    from {
+        border: solid rgba($o-we-handles-accent-color, 0.2);
+        border-width: var(--grid-item-padding-y) var(--grid-item-padding-x);
+    }
+    to {
+        border: solid rgba($o-we-handles-accent-color, 0);
+        border-width: var(--grid-item-padding-y) var(--grid-item-padding-x);
+    }
+}
+
+.o_we_padding_highlight > .o_grid_item {
+    position: relative;
+
+    &::after {
+        content: "";
+        @include o-position-absolute(0, 0, 0, 0);
+        animation: highlightPadding 2s;
+        pointer-events: none;
+    }
+}

addons/website/static/src/snippets/s_masonry_block/001.scss

@@ -4,6 +4,13 @@
     justify-content: center;
 }
 
-.s_masonry_block[data-vcss='001'] .row.o_grid_mode > div.o_grid_item_image {
-    padding: 0 !important;
+.s_masonry_block[data-vcss='001'] .row.o_grid_mode {
+    > div.o_grid_item_image {
+        padding: 0 !important;
+    }
+
+    // No padding highlight on the images.
+    &.o_we_padding_highlight > .o_grid_item_image::after {
+        animation: none;
+    }
 }