From 5bcdcbceaa97a3ab83ed9734bee2a27c20473bea Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Fri, 31 Jul 2020 12:23:27 +0000 Subject: [PATCH] [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 --- .../static/src/img/snippet_disabled.svg | 7 ++ .../static/src/js/editor/snippets.editor.js | 16 +++- .../static/src/scss/wysiwyg_snippets.scss | 82 +++++++++++-------- 3 files changed, 67 insertions(+), 38 deletions(-) create mode 100644 addons/web_editor/static/src/img/snippet_disabled.svg 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 @@ + + + + + + + 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($('
')); + 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 { - display: none; - @include o-position-absolute($top: 16px); + @include o-position-absolute($top: 10px); } - &:hover .btn.o_install_btn { - display: block; + + &:not(:hover) .btn.o_install_btn { + display: none; + } + } + + &.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; } } }