diff options
Diffstat (limited to 'addons/web_editor/static')
3 files changed, 43 insertions, 5 deletions
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index bdb60869ebc..e5c1108695c 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -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); }, //-------------------------------------------------------------------------- diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 17b5f1aba7d..73247077c8b 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -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; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index cca8b4600c0..a1c884afbdc 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -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 { |