From 3c53748d7a86da2f37a30ebe0cd9621fe709793e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 29 Oct 2020 17:01:00 +0000
Subject: [PATCH] [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.

Note: also rename the "_onSnippetMouseDown" handler to not confuse it
with this new "_onSnippetClick" and add the missing documentation
comment for it.

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

closes odoo/odoo#61724

X-original-commit: bdfddace29b16404c06a7ebfc0cc242463a0e768
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web/static/src/js/libs/jquery.js       | 16 ++++++-------
 .../static/src/js/editor/snippets.editor.js   | 23 +++++++++++++++----
 .../static/src/scss/website.edit_mode.scss    |  9 ++++++++
 3 files changed, 36 insertions(+), 12 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 46ef56cdc61..340aed502f8 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -960,6 +960,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',
@@ -1130,8 +1131,8 @@ var SnippetsMenu = Widget.extend({
 
         core.bus.on('deactivate_snippet', this, this._onDeactivateSnippet);
 
-        this.$window.on('mousedown.snippets_menu', this._onSnippetMouseDown.bind(this));
-        this.$window.on('mousedown-iframe.snippets_menu', this._onSnippetMouseDown.bind(this));
+        this.$window.on('mousedown.snippets_menu', this._onContentMouseDown.bind(this));
+        this.$window.on('mousedown-iframe.snippets_menu', this._onContentMouseDown.bind(this));
 
         // Adapt overlay covering when the window is resized / content changes
         var throttledCoverUpdate = _.throttle(() => {
@@ -2034,7 +2035,6 @@ var SnippetsMenu = Widget.extend({
         const smoothScrollOptions = this._getScrollOptions({
             jQueryDraggableOptions: {
                 iframeFix: true,
-                distance: 0,
                 handle: '.oe_snippet_thumbnail:not(.o_we_already_dragging)',
                 helper: function () {
                     const dragSnip = this.cloneNode(true);
@@ -2634,7 +2634,11 @@ var SnippetsMenu = Widget.extend({
             reenable();
         });
     },
-    _onSnippetMouseDown: function (ev) {
+    /**
+     * @private
+     * @param {Event}
+     */
+    _onContentMouseDown: function (ev) {
         const el = this.editorHelpers.elementFromPoint(ev.clientX, ev.clientY);
 
         const editable = el && el.closest('.note-editable');
@@ -2732,6 +2736,17 @@ var SnippetsMenu = Widget.extend({
             this.trigger_up('request_save', data);
         }, true);
     },
+    /**
+     * @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
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 1acbc65202d..8c6cbba3d20 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] {