From 3e683cc716cfa11f79c2b7ee51b5c74849b97c14 Mon Sep 17 00:00:00 2001 From: "Mathieu (mano)" Date: Fri, 28 Apr 2023 07:19:49 +0000 Subject: [PATCH] [IMP] web_editor, website: add minor design improvements to the editor This commit gives a small refresh to the web_editor UI. To do so we remove the borders from the buttons and inputs. We also increase the border radius to 4px instead of 2px. The nested menus such as in Themes tab now have the same background color than the rest of the UI. The box shadows on the `we-title`, `we-customize-block-options` and the checkbox switch have been removed. All the buttons and select components are now taking the full available width. The inputs fields remain unchanged except their font which is now set to sans-serif. Finally a `
` have been added to the replace media snippet to make it consistent with the other buttons having an icon. Maybe in the future we'll need a better way to define those. task-3265187 closes odoo/odoo#119697 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.options.js | 6 --- .../static/src/scss/web_editor.variables.scss | 9 ++-- .../static/src/scss/wysiwyg_snippets.scss | 51 +++++++++++++++---- addons/web_editor/views/snippets.xml | 10 ++-- .../static/src/scss/website.wysiwyg.scss | 14 ++--- 5 files changed, 55 insertions(+), 35 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 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...