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 4bc9c0cf01d..1deb721d119 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -149,6 +149,7 @@ $o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active- $o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default; $o-we-sidebar-content-field-colorpicker-size: 20px !default; +$o-we-sidebar-content-field-colorpicker-size-large: 26px !default; $o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default; $o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default; $o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 2d0e889836e..b6689f2bcd4 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -485,11 +485,13 @@ body.editor_enable.editor_has_snippets { } .o_we_fold_icon { - @include o-position-absolute(0, 100%, 0, auto); + @include o-position-absolute(0, 100%, 0, -$o-we-sidebar-content-indent); display: flex; justify-content: center; align-items: center; - width: 1em; + width: $o-we-sidebar-content-indent; + + @extend %we-generic-link; } //---------------------------------------------------------------------- diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index b4c6191d2b5..14a2bcfdc57 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1045,7 +1045,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({ uiFragment.querySelectorAll('.o_cc_subheadings_toggler').forEach(headingsEl => { const togglerEl = document.createElement('span'); - togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-down'); + togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-right'); togglerEl.setAttribute('role', 'button'); const titleEl = headingsEl.querySelector('we-title'); titleEl.insertBefore(togglerEl, titleEl.firstChild); @@ -1116,9 +1116,11 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({ _onCCHeadingsTogglerClick(ev) { const togglerEl = ev.currentTarget; const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse'); - const show = togglerEl.classList.contains('fa-caret-down'); - togglerEl.classList.toggle('fa-caret-down', !show); - togglerEl.classList.toggle('fa-caret-up', show); + const show = togglerEl.classList.contains('fa-caret-right'); + const parentEl = togglerEl.closest('we-select'); + togglerEl.classList.toggle('fa-caret-right', !show); + togglerEl.classList.toggle('fa-caret-down', show); + parentEl.classList.toggle('active', show); this._showCCSubHeadings[collapseEl.dataset.uid] = show; // FIXME big hack to rerender the interface (all the foldable code is // a hack currently anyway, it needs to be generic) diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index 8a6c6fceeda..148ae3cea74 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -103,20 +103,146 @@ $i: 1; border-top: 1px solid currentColor !important; } -#oe_snippets > .o_we_customize_panel .o_we_user_value_widget.o_palette_color_preview_button { - > div { - display: flex; - flex: 1 1 auto; - align-items: stretch; +#oe_snippets > .o_we_customize_panel { + .o_we_user_value_widget.o_palette_color_preview_button { + > div { + display: flex; + flex: 1 1 auto; + align-items: stretch; + } + .o_palette_color_preview { + flex: 1 0 0; + margin: 1px 0; + transition: flex 150ms ease 0s; + } + &:not(:hover) .o_palette_color_preview { + &:nth-child(4), &:nth-child(5) { + flex: 0 0 0; + } + } } - .o_palette_color_preview { - flex: 1 0 0; - margin: 1px 0; - transition: flex 150ms ease 0s; + + //---------------------------------------------------------------------- + // 'Options' Tab Specific Components + //---------------------------------------------------------------------- + + // Theme Colors Editor + .o_we_theme_colors_selector { + + > we-title { + display: none + } + .o_we_so_color_palette.o_we_user_value_widget { + + + .o_we_so_color_palette { + margin-left: 10px; + } + .o_we_color_preview { + width: $o-we-sidebar-content-field-colorpicker-size-large; + height: $o-we-sidebar-content-field-colorpicker-size-large; + } + } + > div, we-select.o_we_theme_colors_select, we-toggler { + display: flex; + } + > div { + align-items: stretch; + width: 100%; + } + we-select.o_we_theme_colors_select { + justify-content: flex-end; + margin-left: auto; + + > div, we-toggler { + height: 100%; + } + } + we-toggler { + align-items: center; + padding: 0 0.4rem; + font-size: 1.5em; + + &:after { + content: none; + } + } } - &:not(:hover) .o_palette_color_preview { - &:nth-child(4), &:nth-child(5) { - flex: 0 0 0; + + // Palettes Dropdown + .o_palette_color_preview_button > div { + min-height: 24px; + } + + // CC Editor + .o_color_combinations_edition { + $-cc-base-spacer: 16px; + $-cc-r-gap: $o-we-sidebar-content-block-spacing * -1; + $-cc-l-gap: ($o-we-sidebar-content-indent * -1) - 1px; + + we-toggler { + margin: ($-cc-base-spacer * .5) 0; + border: 0; + padding-right: 0; + background: none; + overflow: visible; + + &:after { + top: $-cc-base-spacer * .3; + left: $-cc-base-spacer * -1; + font-size: 1.3em; + transform: rotate(-90deg); + } + .o_we_cc_preview_wrapper { + border: 1px solid $o-we-sidebar-content-field-dropdown-border-color; + } + &.active { + &::after { + transform: rotate(180deg); + } + &::before, + we-collapse::before { + content: ''; + background-color: $o-we-sidebar-content-field-dropdown-bg; + } + &::before { + @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, 0, $-cc-l-gap); + } + + we-collapse { + margin-bottom: $-cc-base-spacer * 2; + padding-left: $-cc-base-spacer; + border: none; + background: none; + + &:before { + @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -1, $-cc-l-gap); + } + } + } + } + &:last-of-type we-toggler { + margin-bottom: 0; + } + we-collapse { + we-select.o_cc_subheadings_toggler, .o_cc_subheadings_collapse { + we-title { + position: relative; + overflow: visible; + } + } + .o_cc_subheadings_collapse { + margin-bottom: $-cc-base-spacer; + } + we-select.o_cc_subheadings_toggler.active::before, .o_cc_subheadings_collapse::before { + content: ''; + background-color: $o-we-sidebar-bg; + opacity: .8; + } + we-select.o_cc_subheadings_toggler.active:before { + @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2); + box-shadow: 0 -1px 0 black; + } + .o_cc_subheadings_collapse::before { + @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2); + } } } } diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 5fcec4eea1a..632df4b44ae 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -846,7 +846,7 @@ we recommend you to try to use the new color system, which is still customizable. - + @@ -859,7 +859,7 @@ data-use-css-color="true"/> - +