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($('
')); - } $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($('
')); + $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;