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

[IMP] web_editor: refine overlay handlers design and behavior

Browse Source 
Part of https://github.com/odoo/odoo/pull/55959
task-2157252
This commit is contained in:
stefanorigano (SRI)
2020-08-14 19:19:48 +00:00
committed by qsm-odoo
parent 0431c49790
commit 2143b8a6b7
3 changed files with 50 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd" class="o_overlay_move_drag">
<g fill="#FFF" class="group" transform="translate(3.5 6)">
<polygon points="0 0 0 3 3 3 3 0" class="o_graphic"/>
<polygon points="5 0 5 3 8 3 8 0" class="o_graphic"/>
<polygon points="10 0 10 3 13 3 13 0" class="o_graphic"/>
<polygon points="0 5 0 8 3 8 3 5" class="o_graphic"/>
<polygon points="5 5 5 8 8 8 8 5" class="o_graphic"/>
<polygon points="10 5 10 8 13 8 13 5" class="o_graphic"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 604 B

addons/web_editor/static/src/scss/web_editor.variables.scss
+2 -2
View File
@@ -27,14 +27,14 @@ $o-we-bg: $o-we-bg-light !default;
$o-we-color: $o-we-fg-light !default;
$o-we-font-size: 13px !default;
$o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$o-we-accent: #00ABC1 !default;
$o-we-accent: #01bad2 !default;
$o-we-border-width: 1px !default;
$o-we-border-color: $o-we-bg-light !default;
$o-we-ace-color: #2F3129 !default;
$o-we-handles-offset-to-hide: 10000px !default;
$o-we-handles-btn-size: 18px !default;
$o-we-handles-btn-size: 20px !default;
$o-we-handles-accent-color: $o-we-accent !default;
$o-we-handles-accent-color-preview: $o-enterprise-color !default;
$o-we-handle-edge-size: 8px !default;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+36 -28
View File
@@ -1336,14 +1336,19 @@ body.editor_enable.editor_has_snippets {
display: block;
width: $o-we-handles-btn-size;
height: $o-we-handles-btn-size;
border: solid 1px darken($o-we-handles-accent-color, 10%);
border: solid 1px darken($o-we-handles-accent-color, 20%);
line-height: $o-we-handles-btn-size - 2;
font-size: 14px;
font-family: FontAwesome;
background-color: darken($o-we-handles-accent-color, 20%);
background-color: darken($o-we-handles-accent-color, 10%);
color: white;
}
&.o_handle_start:after {
background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6);
border-color: rgba($o-we-sidebar-content-field-border-color, .2);
}
&:hover,
&.o_active {
background-color: rgba($o-we-handles-accent-color, 0.2);
@@ -1409,35 +1414,38 @@ body.editor_enable.editor_has_snippets {
> div {
display: flex;
align-items: center;
> * {
margin: 0 2px;
border: 1px solid #999999;
border-radius: 20%;
color: #999999;
opacity: 0.5;
transition: opacity 400ms ease 0s;
cursor: pointer;
&:hover {
opacity: 1;
}
@extend %we-generic-button;
margin: 0 1px 0;
min-width: 22px;
padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5;
color: $o-we-fg-lighter;
}
}
}
.o_overlay_move_options {
.o_move_handle {
padding: 3px 4px;
cursor: move;
&::before, &::after {
content: '\f141';
display: block;
font-family: FontAwesome;
font-size: 0.8em;
line-height: 0.4em;
.o_move_handle {
cursor: move;
width: 30px;
height: 22px;
background-image: url('/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg');
background-position: center;
background-repeat: no-repeat;
}
.o_delete_button {
margin-left: $o-we-sidebar-content-field-button-group-button-spacing;
background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);;
}
&:hover {
> * {
@include o-hover-opacity(.6);
}
we-button:hover, .o_move_handle:hover {
border-color: mix($o-we-handles-accent-color, $o-we-sidebar-content-field-pressed-bg, .4);
background-color: $o-we-sidebar-content-field-pressed-bg;
}
.o_delete_button:hover {
border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4);
background-color: $o-we-color-danger;
}
}
}
}