From affc184a7605693565f25648917c46b49fd4f961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Souk=C3=A9ina=20Bojabza?= <sobo@odoo.com>
Date: Mon, 7 Nov 2022 13:17:23 +0000
Subject: [PATCH] [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>
---
 .../static/src/js/editor/snippets.options.js  | 39 +++++++++++++++++++
 .../static/src/scss/wysiwyg_snippets.scss     | 23 +++++++++++
 .../src/snippets/s_masonry_block/001.scss     | 11 +++++-
 3 files changed, 71 insertions(+), 2 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 9da8466cdf7..fdc5dded37b 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/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;
+    },
 });
 
 /**
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e3f4b5dcb7b..6615db54978 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/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;
+    }
+}
diff --git a/addons/website/static/src/snippets/s_masonry_block/001.scss b/addons/website/static/src/snippets/s_masonry_block/001.scss
index 54f1283a7a2..d4e599c0dec 100644
--- a/addons/website/static/src/snippets/s_masonry_block/001.scss
+++ b/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;
+    }
 }