From aa69ba54e8b18f77ee8383862d75974fb1af7fc3 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Thu, 6 Aug 2020 12:09:34 +0000 Subject: [PATCH] [IMP] web_editor, *: make general adaptations of the editor UI *: website Part of https://github.com/odoo/odoo/pull/55959 task-2157252 --- .../static/src/scss/web_editor.variables.scss | 26 ++++----- .../static/src/scss/wysiwyg_snippets.scss | 54 ++++++++++++------- .../static/src/scss/website.wysiwyg.scss | 16 +++--- 3 files changed, 58 insertions(+), 38 deletions(-) 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 18db07185d3..55faa0a39f0 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -10,7 +10,8 @@ $o-we-bg-darkest: #000000 !default; $o-we-bg-darker: #141217 !default; $o-we-bg-dark: #191922 !default; $o-we-bg-light: #2b2b33 !default; -$o-we-bg-lighter: #4b4b59 !default; +$o-we-bg-lighter: #3e3e46 !default; +$o-we-bg-lightest: #595964 !default; $o-we-fg-darker: #9d9d9d !default; $o-we-fg-dark: #C6C6C6 !default; @@ -52,10 +53,17 @@ $o-we-toolbar-height: 32px !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; -$o-we-item-clickable-bg: linear-gradient($o-we-bg-light, $o-we-bg-darker) !default; -$o-we-item-pressed-bg: linear-gradient($o-we-bg-darkest, $o-we-bg-darker) !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; +$o-we-item-pressed-bg: $o-we-bg-darker !default; $o-we-item-pressed-color: $o-we-fg-lighter !default; +$o-we-item-standup-color-light: $o-we-fg-lighter; +$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-bg: $o-we-bg-darker !default; $o-we-dropdown-border-width: 1px !default; @@ -63,7 +71,7 @@ $o-we-dropdown-border-color: $o-we-bg-darkest !default; $o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default; $o-we-dropdown-item-height: 34px !default; $o-we-dropdown-item-spacing: 1px !default; -$o-we-dropdown-item-bg: $o-we-bg-lighter !default; +$o-we-dropdown-item-bg: $o-we-bg-lightest !default; $o-we-dropdown-item-bg-hover: $o-we-bg-light !default; $o-we-dropdown-item-color: $o-we-fg-dark !default; $o-we-dropdown-item-hover-color: $o-we-fg-light !default; @@ -79,8 +87,6 @@ $o-we-sidebar-width: $o-we-sidebar-border-width + 290px !default; $o-we-sidebar-top-height: 46px !default; -$o-we-sidebar-tabs-border-width: $o-we-sidebar-border-width !default; -$o-we-sidebar-tabs-border-color: $o-we-sidebar-border-color !default; $o-we-sidebar-tabs-size-ratio: 1 !default; $o-we-sidebar-tabs-bg: $o-we-bg-darker !default; $o-we-sidebar-tabs-color: $o-we-sidebar-color !default; @@ -102,14 +108,9 @@ $o-we-sidebar-content-padding-base: 10px !default; $o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default; $o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default; -$o-we-sidebar-content-main-title-border-extension: -1px !default; -$o-we-sidebar-content-main-title-border-color: $o-we-bg-lighter !default; $o-we-sidebar-content-main-title-height: 32px !default; -$o-we-sidebar-content-main-title-shadow-start: rgba(black, 0.4); -$o-we-sidebar-content-main-title-shadow: linear-gradient($o-we-sidebar-content-main-title-shadow-start, rgba(black, 0)) !default; $o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default; $o-we-sidebar-content-main-title-font-size: 13px !default; -$o-we-sidebar-content-main-title-margin-bottom: 2px !default; $o-we-sidebar-content-block-spacing: 10px !default; @@ -131,6 +132,7 @@ $o-we-sidebar-content-field-border-color:$o-we-item-border-color !default; $o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default; $o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default; $o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default; +$o-we-sidebar-content-field-clickable-color: $o-we-item-clickable-color !default; $o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default; $o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default; $o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default; @@ -152,7 +154,7 @@ $o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-acti $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-bg: $o-we-bg-lightest !default; $o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default; $o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default; $o-we-sidebar-content-field-colorpicker-cc-width: 208px !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 675e44a9622..27d0d967721 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -107,13 +107,21 @@ body.editor_enable.editor_has_snippets { } } -%we-generic-link { - cursor: pointer; - color: $o-we-sidebar-content-field-color; - line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; - text-decoration: none; +%we-generic-clickable { outline: none; + text-decoration: none; + line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width; + cursor: pointer; + + &[disabled] { + opacity: .5; + } +} + +%we-generic-link { + color: $o-we-sidebar-content-field-color; @include we-svg-icon(); + @extend %we-generic-clickable; &:not([disabled]) { &.active, &:hover { @@ -133,21 +141,27 @@ body.editor_enable.editor_has_snippets { } } } - &[disabled] { - opacity: .5; - } } %we-generic-button { - @extend %we-generic-link; + @extend %we-generic-clickable; @include o-text-overflow(block); + @include we-svg-icon($o-we-sidebar-content-field-clickable-color, $o-we-sidebar-content-field-clickable-color); + padding: 0 $o-we-sidebar-content-field-button-group-button-spacing; border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color; border-radius: $o-we-sidebar-content-field-border-radius; background: $o-we-sidebar-content-field-clickable-bg; + color: $o-we-sidebar-content-field-clickable-color; + + &:not([disabled]):hover { + @include we-svg-icon($o-we-sidebar-content-field-pressed-color, $subdle-opacity: .75); + color: $o-we-sidebar-content-field-pressed-color; + } &.active { background: $o-we-sidebar-content-field-pressed-bg; + color: $o-we-sidebar-content-field-pressed-color; } } @@ -200,9 +214,8 @@ body.editor_enable.editor_has_snippets { #snippets_menu { flex: 0 0 auto; display: flex; - border: solid $o-we-sidebar-tabs-border-color; - border-width: $o-we-sidebar-tabs-border-width 0; background: $o-we-sidebar-tabs-bg; + box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); color: $o-we-sidebar-tabs-color; > button { @@ -251,6 +264,7 @@ body.editor_enable.editor_has_snippets { > #o_scroll { background-color: $o-we-sidebar-blocks-content-bg; padding: 0 $o-we-sidebar-blocks-content-spacing; + box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); .o_panel, .o_panel_header { padding: $o-we-sidebar-blocks-content-spacing 0; @@ -419,16 +433,17 @@ body.editor_enable.editor_has_snippets { we-customizeblock-options { position: relative; display: block; - box-shadow: 0 $o-we-sidebar-content-main-title-border-extension 0 $o-we-sidebar-content-main-title-border-color; - padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent; - background-image: $o-we-sidebar-content-main-title-shadow; - background-size: 100% ($o-we-sidebar-content-main-title-height / 2); - background-repeat: no-repeat; + padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent; + background: $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; - margin-bottom: $o-we-sidebar-content-main-title-margin-bottom - $o-we-sidebar-content-field-spacing; + margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent); + padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent; + background: $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 { @@ -523,6 +538,9 @@ body.editor_enable.editor_has_snippets { > img { margin-bottom: 1px; // Not sure why but not really centered otherwise } + > svg { + margin-bottom: 2px; // Not sure why but not really centered otherwise + } } &.fa > div { display: none; @@ -1036,7 +1054,7 @@ body.editor_enable.editor_has_snippets { overflow-y: auto; padding: $o-we-sidebar-blocks-content-spacing; background-color: $o-we-sidebar-blocks-content-bg; - border-top: $o-we-sidebar-tabs-border-width solid $o-we-sidebar-tabs-border-color; + box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2); .o_panel_header { padding: $o-we-sidebar-content-field-spacing 0; diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index 148ae3cea74..3c90e63bee3 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -188,8 +188,7 @@ $i: 1; &:after { top: $-cc-base-spacer * .3; - left: $-cc-base-spacer * -1; - font-size: 1.3em; + left: $-cc-base-spacer * -.8; transform: rotate(-90deg); } .o_we_cc_preview_wrapper { @@ -201,19 +200,20 @@ $i: 1; } &::before, + we-collapse::before { content: ''; - background-color: $o-we-sidebar-content-field-dropdown-bg; + background-color: $o-we-bg-light; } &::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; + margin-bottom: $-cc-base-spacer * 1.3; 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); + @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap); + box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, 0.2); } } } @@ -233,15 +233,15 @@ $i: 1; } we-select.o_cc_subheadings_toggler.active::before, .o_cc_subheadings_collapse::before { content: ''; - background-color: $o-we-sidebar-bg; - opacity: .8; + background-color: $o-we-bg-dark; } 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; + box-shadow: $o-we-item-standup-top $o-we-item-standup-color-dark; } .o_cc_subheadings_collapse::before { @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2); + box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2); } } }