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

3 files changed, 66 insertions, 37 deletions

diff --git a/addons/web_editor/static/src/img/snippet_disabled.svg b/addons/web_editor/static/src/img/snippet_disabled.svg
new file mode 100644
index 00000000000..1d5066890f6
--- /dev/null
+++ b/addons/web_editor/static/src/img/snippet_disabled.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15">
+  <g fill="none" class="snippet_disabled">
+    <path fill="#E16F2B" d="M7.5 0c1.36 0 2.616.335 3.765 1.006a7.466 7.466 0 0 1 2.73 2.73A7.337 7.337 0 0 1 15 7.5c0 1.36-.335 2.616-1.006 3.765a7.466 7.466 0 0 1-2.73 2.73A7.337 7.337 0 0 1 7.5 15a7.337 7.337 0 0 1-3.765-1.006 7.466 7.466 0 0 1-2.73-2.73A7.337 7.337 0 0 1 0 7.5c0-1.36.335-2.616 1.006-3.765a7.466 7.466 0 0 1 2.73-2.73A7.337 7.337 0 0 1 7.5 0z" class="path"/>
+    <path fill="#E17D41" d="M7.5 1c1.18 0 2.267.29 3.263.872a6.47 6.47 0 0 1 2.365 2.365C13.71 5.233 14 6.321 14 7.5a6.35 6.35 0 0 1-.872 3.263 6.47 6.47 0 0 1-2.365 2.365A6.358 6.358 0 0 1 7.5 14a6.35 6.35 0 0 1-3.263-.872 6.47 6.47 0 0 1-2.365-2.365A6.358 6.358 0 0 1 1 7.5c0-1.18.29-2.267.872-3.263a6.47 6.47 0 0 1 2.365-2.365A6.358 6.358 0 0 1 7.5 1z" class="path"/>
+    <path fill="#FFF" d="M8.51 10c.09 0 .167.03.23.093a.31.31 0 0 1 .093.23v1.855a.31.31 0 0 1-.093.23.313.313 0 0 1-.23.092h-2a.34.34 0 0 1-.24-.098.3.3 0 0 1-.103-.224v-1.856a.3.3 0 0 1 .104-.224.34.34 0 0 1 .24-.098zm.136-7.5c.097 0 .18.026.25.078A.19.19 0 0 1 9 2.754l-.188 6.064c-.006.065-.043.122-.109.171a.4.4 0 0 1-.245.073H6.531a.423.423 0 0 1-.25-.073c-.07-.049-.104-.106-.104-.17L6 2.753a.19.19 0 0 1 .104-.176.405.405 0 0 1 .25-.078z" class="shape"/>
+  </g>
+</svg>
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;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 40d8b63d480..b92b5367371 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -53,11 +53,11 @@ body.editor_enable.editor_has_snippets {
     // No root because can be drag and drop (and the helper is in the body)
     position: relative;
     z-index: $o-we-zindex;
-    width: 100px;
+    width: 77px;
     background-color: $o-we-sidebar-blocks-content-snippet-bg;
 
     &.ui-draggable-dragging {
-        transform: rotate(3deg);
+        transform: rotate(-3deg) scale(1.2);
         box-shadow: 0 5px 25px -10px black;
         transition: transform 0.3s, box-shadow 0.3s;
     }
@@ -82,6 +82,15 @@ body.editor_enable.editor_has_snippets {
     .oe_snippet_thumbnail_title {
         display: none;
     }
+
+    &:not(:hover):not(.o_disabled):not(.o_snippet_install) {
+        background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .9);
+
+        .oe_snippet_thumbnail {
+            filter: saturate(.7);
+            opacity: .9;
+        }
+    }
 }
 
 @mixin we-svg-icon(
@@ -267,52 +276,55 @@ body.editor_enable.editor_has_snippets {
                     text-align: center;
                 }
 
-                &.o_disabled {
-                    .oe_snippet_thumbnail {
-                        background-color: rgba(255, 0, 0, 0.75);
-                    }
-                    .oe_snippet_thumbnail_img {
-                        opacity: 0.8;
-                    }
+                &.o_disabled .o_snippet_undroppable {
+                    @include o-position-absolute(8px, 6px, auto, auto);
                 }
 
                 &.o_snippet_install {
-                    .oe_snippet_thumbnail_img {
-                        opacity: 0.5;
-                    }
                     .btn.o_install_btn {
+                        @include o-position-absolute($top: 10px);
+                    }
+
+                    &:not(:hover) .btn.o_install_btn {
                         display: none;
-                        @include o-position-absolute($top: 16px);
                     }
-                    &:hover .btn.o_install_btn {
-                        display: block;
+                }
+
+                &.o_disabled, &.o_snippet_install {
+                    background-color: rgba($o-we-sidebar-blocks-content-snippet-bg, .2);
+
+                    .oe_snippet_thumbnail_img {
+                        opacity: .4;
+                        filter: saturate(0) blur(1px);
                     }
                 }
             }
         }
         #snippet_custom .oe_snippet {
-            .o_delete_btn {
-                @include o-position-absolute(0, 0);
-                display: none;
-                width: 25px;
-                height: 25px;
-                background-color: rgba(255, 0, 0, 0.75);
-                justify-content: center;
-                align-items: center;
+            width: 100%;
 
-                &:hover {
-                    cursor: pointer;
-                }
-            }
-            &:hover .o_delete_btn {
+            &, .oe_snippet_thumbnail, .o_delete_btn {
                 display: flex;
             }
-            .o_image_ribbon {
-                @include o-position-absolute($top: 0, $left: 0);
-                width: 0;
-                height: 0;
-                border-right: 20px solid transparent;
-                border-top: 20px solid $o-enterprise-color;
+            .oe_snippet_thumbnail, .o_delete_btn {
+                align-items: center;
+            }
+            .oe_snippet_thumbnail {
+                min-width: 0; // Ensure text-overflow on flex children
+            }
+            .oe_snippet_thumbnail_title {
+                @include o-text-overflow(block);
+            }
+            .oe_snippet_thumbnail_img {
+                flex-shrink: 0;
+                width: 40px;
+                height: 32px;
+                padding: 0;
+            }
+            .o_delete_btn {
+                @extend %we-generic-link;
+                padding-top: 0;
+                padding-bottom: 0;
             }
         }
     }