[IMP] web_editor, website: review snippets library design

Especially review disabled, hover, install and custom snippet states.

Part of https://github.com/odoo/odoo/pull/55959
task-2157252

Co-authored-by: qsm-odoo <qsm@odoo.com>

1 files changed, 13 insertions, 3 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 5c88807ddb1..6e24b5e706a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -1630,8 +1630,8 @@ var SnippetsMenu = Widget.extend({
                 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"/>'));
+                    btnEl.classList.add('o_delete_btn', 'fa', 'fa-trash', 'btn', 'o_we_hover_danger');
+                    btnEl.title = _.str.sprintf(_t("Delete %s"), name);
                     $snippet.append(btnEl);
                 }
             })
@@ -1729,6 +1729,16 @@ var SnippetsMenu = Widget.extend({
             });
 
             $snippet.toggleClass('o_disabled', !check);
+            $snippet.attr('title', check ? '' : _t("No location to drop in"));
+            const $icon = $snippet.find('.o_snippet_undroppable').remove();
+            if (check) {
+                $icon.remove();
+            } else if (!$icon.length) {
+                const imgEl = document.createElement('img');
+                imgEl.classList.add('o_snippet_undroppable');
+                imgEl.src = '/web_editor/static/src/img/snippet_disabled.svg';
+                $snippet.append(imgEl);
+            }
         });
     },
     /**
@@ -1817,7 +1827,7 @@ var SnippetsMenu = Widget.extend({
                 handle: '.oe_snippet_thumbnail',
                 helper: function () {
                     const dragSnip = this.cloneNode(true);
-                    dragSnip.querySelectorAll('.o_delete_btn, .o_image_ribbon').forEach(
+                    dragSnip.querySelectorAll('.o_delete_btn').forEach(
                         el => el.remove()
                     );
                     return dragSnip;