[FIX] web_editor, *: ease understanding of snippet drag, not click

*: web, website

Make the empty oe_structure messages "wizz" when the user clicks on a
snippet to drag instead of dragging it.

Part of https://github.com/odoo/odoo/pull/60837
Related to task-2363616

closes odoo/odoo#60837

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

3 files changed, 29 insertions, 9 deletions

diff --git a/addons/web/static/src/js/libs/jquery.js b/addons/web/static/src/js/libs/jquery.js
index 7c3273abc91..471d07bb980 100644
--- a/addons/web/static/src/js/libs/jquery.js
+++ b/addons/web/static/src/js/libs/jquery.js
@@ -92,15 +92,15 @@ $.fn.extend({
     },
     /**
      * Makes DOM elements bounce the way Odoo decided it.
+     *
+     * @param {string} [extraClass]
      */
-    odooBounce: function () {
-        return this.each(function () {
-            var $el = $(this);
-            $el.addClass('o_catch_attention');
-            setTimeout(function () {
-                $el.removeClass('o_catch_attention');
-            }, 400);
-        });
+    odooBounce: function (extraClass) {
+        for (const el of this) {
+            el.classList.add('o_catch_attention', extraClass);
+            setTimeout(() => el.classList.remove('o_catch_attention', extraClass), 400);
+        }
+        return this;
     },
     /**
      * Allows to bind events to a handler just as the standard `$.on` function
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index 2f69ca64685..5e25ecd32a7 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -870,6 +870,7 @@ var SnippetsMenu = Widget.extend({
     id: 'oe_snippets',
     cacheSnippetTemplate: {},
     events: {
+        'click .oe_snippet': '_onSnippetClick',
         'click .o_install_btn': '_onInstallBtnClick',
         'click .o_we_add_snippet_btn': '_onBlocksTabClick',
         'click .o_we_invisible_entry': '_onInvisibleEntryClick',
@@ -1930,7 +1931,6 @@ var SnippetsMenu = Widget.extend({
 
         const smoothScrollOptions = this._getScrollOptions({
             jQueryDraggableOptions: {
-                distance: 0,
                 handle: '.oe_snippet_thumbnail:not(.o_we_already_dragging)',
                 helper: function () {
                     const dragSnip = this.cloneNode(true);
@@ -2490,6 +2490,17 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * @private
+     */
+    _onSnippetClick() {
+        const $els = this.getEditableArea().find('.oe_structure.oe_empty').addBack('.oe_structure.oe_empty');
+        for (const el of $els) {
+            if (!el.children.length) {
+                $(el).odooBounce('o_we_snippet_area_animation');
+            }
+        }
+    },
+    /**
+     * @private
      * @param {OdooEvent} ev
      * @param {Object} ev.data
      * @param {function} ev.data.exec
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 7cb42d99603..1b659a2bb4c 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -11,12 +11,21 @@ $-editor-messages-margin-x: 2%;
         content: attr(data-editor-message);
         display: block;
         font-size: 20px;
+        line-height: 50px; // Useful for the "wizz" animation on snippet click to be more visible
     }
     &:after {
         content: attr(data-editor-sub-message);
         display: block;
     }
 }
+.o_we_snippet_area_animation {
+    animation-delay: 999ms; // Disable it but allow to inherit the animation
+
+    &::before {
+        animation: inherit;
+        animation-delay: 0ms;
+    }
+}
 
 .o_editable {
     &:not(:empty), &[data-oe-type] {