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

[IMP] web_editor, *: add caret icon to dropdowns & colorpicker modal

Browse Source 
*: website

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

Co-authored-by: stefanorigano (SRI) <sri@odoo.com>
This commit is contained in:
qsm-odoo
2020-08-14 19:19:48 +00:00
co-authored by stefanorigano
parent 2143b8a6b7
commit c8afa7f6bb
4 changed files with 44 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+4
View File
@@ -778,6 +778,10 @@ const SelectUserValueWidget = BaseSelectionUserValueWidget.extend({
this.menuTogglerEl.appendChild(iconEl);
}
this.containerEl.insertBefore(this.menuTogglerEl, this.menuEl);
const dropdownCaretEl = document.createElement('span');
dropdownCaretEl.classList.add('o_we_dropdown_caret');
this.containerEl.appendChild(dropdownCaretEl);
},
//--------------------------------------------------------------------------
addons/web_editor/static/src/scss/web_editor.variables.scss
+4 -2
View File
@@ -50,6 +50,7 @@ $o-we-translated-content-color: rgb(120, 215, 110) !default;
$o-we-toolbar-height: 32px !default;
$o-we-item-spacing: 7px !default;
$o-we-item-border-width: 1px !default;
$o-we-item-border-color: $o-we-bg-darkest !default;
$o-we-item-border-radius: 1px !default;
@@ -64,7 +65,7 @@ $o-we-item-standup-color-dark: $o-we-bg-darkest;
$o-we-item-standup-top: inset 0 1px 0;
$o-we-item-standup-bottom: inset 0 -1px 0;
$o-we-dropdown-spacing: 5px !default;
$o-we-dropdown-spacing: $o-we-item-spacing !default;
$o-we-dropdown-bg: $o-we-bg-darker !default;
$o-we-dropdown-border-width: 1px !default;
$o-we-dropdown-border-color: $o-we-bg-darkest !default;
@@ -77,6 +78,7 @@ $o-we-dropdown-item-color: $o-we-fg-dark !default;
$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
$o-we-dropdown-caret-spacing: 2px !default;
$o-we-sidebar-bg: $o-we-bg !default;
$o-we-sidebar-color: $o-we-color !default;
@@ -117,7 +119,7 @@ $o-we-sidebar-content-block-spacing: 10px !default;
$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default;
$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default;
$o-we-sidebar-content-field-spacing: 7px !default;
$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
$o-we-sidebar-content-field-control-item-size: 1em !default;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+34 -2
View File
@@ -599,7 +599,28 @@ body.editor_enable.editor_has_snippets {
&:not(.o_we_icon_select) we-toggler {
@include large-component();
}
&.o_we_widget_opened .o_we_dropdown_caret {
position: relative;
display: block;
align-self: flex-end;
&::before, &::after {
content: '';
$-toggler-caret-size: 2 * $o-we-sidebar-content-field-control-item-spacing + $o-we-sidebar-content-field-control-item-size;
@include o-position-absolute(100%, $-toggler-caret-size);
z-index: $zindex-dropdown + 1;
transform: translateX(50%);
margin-top: $o-we-dropdown-caret-spacing;
border-bottom: ($o-we-item-spacing + $o-we-sidebar-content-field-dropdown-border-width - $o-we-dropdown-caret-spacing) solid $o-we-dropdown-border-color;
border-left: $o-we-item-spacing solid transparent;
border-right: $o-we-item-spacing solid transparent;
}
&::after {
border-bottom-color: $o-we-sidebar-content-field-dropdown-item-bg;
border-left-width: ($o-we-item-spacing - 1px);
border-right-width: ($o-we-item-spacing - 1px);
}
}
we-selection-items {
@include o-position-absolute(100%, 0, auto, 0);
z-index: $zindex-dropdown;
@@ -774,8 +795,19 @@ body.editor_enable.editor_has_snippets {
}
}
&.o_we_widget_opened .o_we_color_preview {
border: 2px solid $o-we-accent;
&.o_we_widget_opened {
.o_we_color_preview {
border: 2px solid $o-we-accent;
}
.o_we_dropdown_caret {
&::before, &::after {
right: $o-we-sidebar-content-field-colorpicker-size / 2;
}
&::after {
border-bottom-width: ($o-we-item-spacing + $o-we-sidebar-content-field-dropdown-border-width - $o-we-dropdown-caret-spacing) + 1px; // 1px = colorpicker inset box-shadow...
}
}
}
we-toggler {
addons/website/static/src/scss/website.wysiwyg.scss
+2
View File
@@ -204,6 +204,8 @@ $i: 1;
}
&::before {
@include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, 0, $-cc-l-gap);
z-index: auto;
transform: none;
}
+ we-collapse {
margin-bottom: $-cc-base-spacer * 1.3;