[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>

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;