From d8e05bd64d5be2fd2016d0c6f02c36d4a83c574e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 22 Jul 2020 08:55:03 +0000
Subject: [PATCH] [FIX] web_editor: restore custom snippet delete button

Clicking on the delete button of custom snippets was not working anymore
since [1]. Indeed, that button is placed inside the snippet thumbnail
which is the drag handle for the drag and drop feature. Since we now
start the drag as soon as the mouse is mousedown-ed, then the click on
the delete button cannot be intercepted.

This commit solves the problem by placing the delete button out of the
thumbnail element.

[1]: https://github.com/odoo/odoo/commit/ab72fe6c4681f62dc670f1cf1ac6fa47abd301f6

closes odoo/odoo#54770

X-original-commit: dac122935ac5c20526e529b09bf019f15a290d59
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/snippets.editor.js      | 16 +++++++++-------
 .../static/src/scss/wysiwyg_snippets.scss        |  8 +++-----
 2 files changed, 12 insertions(+), 12 deletions(-)

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 809f166f7a3..3dfe8a06ffd 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1610,13 +1610,6 @@ var SnippetsMenu = Widget.extend({
                     $snippet.find('[data-oe-thumbnail]').data('oeThumbnail'),
                     name
                 ));
-                if (isCustomSnippet) {
-                    const btn = document.createElement('we-button');
-                    btn.dataset.snippetId = $snippet.data('oeSnippetId');
-                    btn.classList.add('o_delete_btn', 'fa', 'fa-trash');
-                    $thumbnail.prepend(btn);
-                    $thumbnail.prepend($('<div class="o_image_ribbon"/>'));
-                }
                 $snippet.prepend($thumbnail);
 
                 // Create the install button (t-install feature) if necessary
@@ -1629,6 +1622,15 @@ var SnippetsMenu = Widget.extend({
                         text: _t("Install"),
                     }));
                 }
+
+                // Create the delete button for custom snippets
+                if (isCustomSnippet) {
+                    const btnEl = document.createElement('we-button');
+                    btnEl.dataset.snippetId = $snippet.data('oeSnippetId');
+                    btnEl.classList.add('o_delete_btn', 'fa', 'fa-trash');
+                    $snippet.append($('<div class="o_image_ribbon"/>'));
+                    $snippet.append(btnEl);
+                }
             })
             .not('[data-module-id]');
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index c82fb464f6d..0fbd1e7925b 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -62,7 +62,7 @@ body.editor_enable.editor_has_snippets {
         transition: transform 0.3s, box-shadow 0.3s;
     }
 
-    > :not(.oe_snippet_thumbnail) {
+    > .oe_snippet_body {
         display: none !important;
     }
 
@@ -213,10 +213,9 @@ body.editor_enable.editor_has_snippets {
                 }
             }
         }
-        #snippet_custom .oe_snippet .oe_snippet_thumbnail {
+        #snippet_custom .oe_snippet {
             .o_delete_btn {
                 @include o-position-absolute(0, 0);
-                z-index: 1;
                 display: none;
                 width: 25px;
                 height: 25px;
@@ -232,8 +231,7 @@ body.editor_enable.editor_has_snippets {
                 display: flex;
             }
             .o_image_ribbon {
-                position: absolute;
-                z-index: 1;
+                @include o-position-absolute($top: 0, $left: 0);
                 width: 0;
                 height: 0;
                 border-right: 20px solid transparent;