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 fbc066bc72c..4617e927199 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -6562,12 +6562,6 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({ name: 'add_size_indicator', data: this.$weight, }); - // Hack to align on the right - this.$weight.css({ - 'width': '200px', // Make parent row grow by faking a width - 'flex': '0 0 0', // But force no forced width - 'margin-left': 'auto', - }); }, /** * @override 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 a355dcf15c1..ad835195356 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -52,8 +52,8 @@ $o-we-toolbar-height: 40px !default; $o-we-item-spacing: 8px !default; $o-we-item-border-width: 1px !default; -$o-we-item-border-color: $o-we-bg-darkest !default; -$o-we-item-border-radius: 2px !default; +$o-we-item-border-color: transparent !default; +$o-we-item-border-radius: 4px !default; $o-we-item-clickable-bg: $o-we-bg-lightest!default; $o-we-item-clickable-color: $o-we-fg-light!default; $o-we-item-clickable-hover-bg: $o-we-bg-dark!default; @@ -144,7 +144,7 @@ $o-we-sidebar-content-main-title-font-size: 13px !default; $o-we-sidebar-content-block-spacing: 10px !default; -$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default; +$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default; $o-we-sidebar-content-field-spacing: $o-we-item-spacing !default; $o-we-sidebar-content-field-color: $o-we-fg-darker !default; @@ -194,7 +194,7 @@ $o-we-sidebar-content-field-colorpicker-cc-height: 26px !default; $o-we-sidebar-content-field-input-max-width: 60px !default; $o-we-sidebar-content-field-input-bg: $o-we-bg-light !default; -$o-we-sidebar-content-field-input-font-family: $o-font-family-monospace !default; +$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default; $o-we-sidebar-content-field-input-unit-font-size: 11px !default; $o-we-sidebar-content-field-input-border-color: $o-we-accent !default; @@ -212,7 +212,6 @@ $o-we-sidebar-content-field-toggle-active-bg: $o-we-accent !default; $o-we-sidebar-content-field-toggle-control-width: 11px !default; $o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default; $o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default; -$o-we-sidebar-content-field-toggle-control-shadow: 0 2px 3px 0 $o-we-bg-darkest !default; $o-we-technical-modal-zindex: 2001; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index e048394c1c3..57ed46d4f5e 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -142,12 +142,13 @@ border-radius: $o-we-sidebar-content-field-border-radius; background-color: $o-we-sidebar-content-field-clickable-bg; color: $o-we-sidebar-content-field-clickable-color; + text-align: center; &:not([disabled]):hover, &.active:not(.o_we_no_toggle) { @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75); } - &.active:not(.o_we_no_toggle) { + &.active:not(.o_we_no_toggle, .o_we_collapse_toggler) { background-color: $o-we-sidebar-content-field-pressed-bg; } } @@ -731,6 +732,7 @@ we-title { display: block; text-transform: capitalize; + text-align: left; } we-customizeblock-options { @@ -738,14 +740,12 @@ display: block; padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0; background-color: $o-we-bg-lighter; - box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8); > we-title { display: flex; align-items: center; padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent; background-color: $o-we-bg-light; - box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5); font-size: $o-we-sidebar-content-main-title-font-size; > span { @@ -919,7 +919,6 @@ height: $o-we-sidebar-content-field-toggle-control-height; border-radius: 10rem; background-color: $o-we-sidebar-content-field-toggle-control-bg; - box-shadow: $o-we-sidebar-content-field-toggle-control-shadow; } } &.active we-checkbox { @@ -935,6 +934,7 @@ we-selection-items { .o_we_user_value_widget { margin-top: 0; + flex-grow: 1; } } @@ -1008,6 +1008,7 @@ background-color: $o-we-sidebar-content-field-dropdown-item-bg; color: $o-we-sidebar-content-field-dropdown-item-color; border-radius: 0; + text-align: left; > we-title { flex-grow: 1; @@ -1098,6 +1099,10 @@ width: percentage(1 / 4); padding: 0; justify-content: center; + flex-grow: 0; + border-radius: 2px; + border: $o-we-item-border-width solid $o-we-bg-darkest; + img { padding: $o-we-sidebar-content-field-spacing; } @@ -1124,6 +1129,7 @@ we-button-group.o_we_user_value_widget { we-selection-items { display: flex; + flex-grow: 1; max-width: 100%; we-button { @@ -1149,9 +1155,8 @@ we-button { display: flex; justify-content: center; - flex: 0 1 percentage(1/4); + flex: 1 1 percentage(1/4); padding: ($o-we-sidebar-content-field-button-group-button-spacing / 4) ($o-we-sidebar-content-field-button-group-button-spacing / 3); - text-align: center; } } @@ -1183,6 +1188,22 @@ // Color Pickers .o_we_so_color_palette.o_we_user_value_widget { + &:first-of-type { + margin-right: $o-we-sidebar-content-field-multi-spacing * 4; + } + + + .o_we_so_color_palette { + // Countering the margin of the first colorpicker and targeting + // the div to avoid misalignment of we-title (theme tab) + &:nth-of-type(2) { + > div { + margin-left: -$o-we-sidebar-content-field-multi-spacing * 4; + } + we-title + div { + margin-left: 0; + } + } + } .o_we_color_preview { @extend %o-preview-alpha-background; @@ -1190,7 +1211,7 @@ display: block; width: $o-we-sidebar-content-field-colorpicker-size; height: $o-we-sidebar-content-field-colorpicker-size; - border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; + border: $o-we-sidebar-content-field-border-width solid $o-we-bg-darkest; border-radius: 10rem; cursor: pointer; @@ -1582,15 +1603,23 @@ width: 100%; } > div { - flex: 0 1 auto; + flex: 1 1 auto; min-width: 0; margin-top: $o-we-sidebar-content-field-spacing; + + svg { + margin: 0 auto; + } } &:not(.o_we_fw) { flex-flow: row nowrap; align-items: center; + &:not(we-input):not(.o_we_so_color_palette) { + flex-grow: 1; + } + > we-title { flex: 0 0 auto; @include o-text-overflow(); @@ -1649,7 +1678,6 @@ } } &.active { - box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2); we-collapse.active { &, we-toggler.o_we_collapse_toggler { background-color: $o-we-bg-lighter; @@ -1686,6 +1714,10 @@ margin-left: $o-we-sidebar-content-field-label-spacing * 2; } + we-button + .o_we_image_weight { + margin-left: $o-we-sidebar-content-field-label-spacing; + } + .o_we_tag { background-color: $o-we-bg-darkest; white-space: nowrap; @@ -2146,7 +2178,6 @@ &.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, diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml index 8a486fb3997..fa2ebec0885 100644 --- a/addons/web_editor/views/snippets.xml +++ b/addons/web_editor/views/snippets.xml @@ -396,10 +396,12 @@ data-exclude="[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa"> Replace - +
+ +
div, we-toggler { + justify-content: flex-end; height: 100%; } @@ -202,11 +197,10 @@ html[data-edit_translations="1"] { // CC Edition .o_we_cc_preview_wrapper { - // Use box-shadow rather than border-bottom in order to + // Use box-shadow rather than borders in order to // avoid misalignments in the 'Options' tab. - border: 1px solid; - border-color: rgba($o-we-item-standup-color-light, .2) $o-we-sidebar-content-field-dropdown-border-color transparent; - box-shadow: 0 1px 0 $o-we-item-standup-color-dark; + border: $o-we-item-border-width solid $o-we-item-border-color; + box-shadow: 0 0 0 1px $o-we-sidebar-content-field-dropdown-border-color; + .o_we_collapse_toggler { height: 35px; // FIXME hardcoded...