From a50c09e3b432d7601cd0e02cbbfabe24a67ba70f Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Tue, 14 Dec 2021 16:04:35 +0000
Subject: [PATCH] [IMP] web_editor: display help tooltip when clicking on a
 snippet

This commit introduces a tooltip to indicate to the user that he can
drag and drop the block into the page.

This tooltip is shown after a delay; if the user has started dragging
the block in the meantime, the tooltip won't be shown. Otherwise, it
auto fades out.

task-2431469

closes odoo/odoo#81430

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js   | 44 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

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 911b2cfbdcc..13eb6842625 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -2156,6 +2156,13 @@ var SnippetsMenu = Widget.extend({
             })
             .not('[data-module-id]');
 
+        // Enable the snippet tooltips
+        this.$snippets.tooltip({
+            trigger: 'manual',
+            placement: 'bottom',
+            title: _t("Drag and drop the building block."),
+        });
+
         // Hide scroll if no snippets defined
         if (!this.$snippets.length) {
             this.$el.detach();
@@ -2361,6 +2368,8 @@ var SnippetsMenu = Widget.extend({
                     return dragSnip;
                 },
                 start: function () {
+                    self._hideSnippetTooltips();
+
                     const prom = new Promise(resolve => dragAndDropResolve = () => resolve());
                     self._mutex.exec(() => prom);
 
@@ -2975,7 +2984,7 @@ var SnippetsMenu = Widget.extend({
      *
      * @private
      */
-    _onMouseDown: function () {
+    _onMouseDown: function (ev) {
         const $blockedArea = $('#wrapwrap'); // TODO should get that element another way
         this.options.wysiwyg.odooEditor.automaticStepSkipStack();
         $blockedArea.addClass('o_we_no_pointer_events');
@@ -2990,6 +2999,39 @@ var SnippetsMenu = Widget.extend({
             clearTimeout(enableTimeoutID);
             reenable();
         });
+
+        const snippetEl = ev.target.closest('.oe_snippet');
+        if (snippetEl && !snippetEl.querySelector('.o_we_already_dragging')) {
+            this._showSnippetTooltip($(snippetEl));
+        }
+    },
+    /**
+     * Displays an autofading tooltip over a snippet, after a delay.
+     * If in the meantime the user has started to drag the snippet, it won't be
+     * shown.
+     *
+     * @private
+     * @param {jQuery} $snippet
+     * @param {Number} [delay=1500]
+     */
+    _showSnippetTooltip($snippet, delay = 1500) {
+        this.__showSnippetTooltip = true;
+        setTimeout(() => {
+            if (this.__showSnippetTooltip) {
+                $snippet.tooltip('show');
+                this._hideSnippetTooltips(1500);
+            }
+        }, delay);
+    },
+    /**
+     * @private
+     * @param {Number} [delay=0]
+     */
+    _hideSnippetTooltips(delay = 0) {
+        this.__showSnippetTooltip = false;
+        setTimeout(() => {
+            this.$snippets.tooltip('hide');
+        }, delay);
     },
     /**
      * @private