pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor, website: review snippets library design

Browse Source 
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>
This commit is contained in:
stefanorigano (SRI)
2020-08-14 19:19:47 +00:00
committed by qsm-odoo
co-authored by qsm-odoo
parent f3e3e25938
commit 5bcdcbceaa
3 changed files with 67 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/img/snippet_disabled.svg
+7
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

addons/web_editor/static/src/js/editor/snippets.editor.js
+13 -3
View File
@@ -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;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+47 -35
View File
@@ -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;
}
}
}