From c91c221c4c2ea66cd49411d91e4fd92ead46ed3c Mon Sep 17 00:00:00 2001 From: "Chrysanthe (chgo)" Date: Thu, 31 Aug 2023 09:39:43 +0200 Subject: [PATCH] [FIX] web: reintroduce CSS variables for navbar entries MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit aims to reintroduce CSS variables to handle the different states of our navbar entries. Recently, the way we handle the navbar entries changed. Previously, we used to set CSS variables in Community, which would allow us to control the color of ours nav entries at every state. On the Enteprise side, this would allow us to use the different colors we use for these buttons and style them differently This approach was also very helpful because we could override these CSS variables once again to handle the colors of the Studio navbar elements. Recently, the approach used to control these elements changed : - On Community, we make use of CSS variables ; - On Enterprise, we use the Bootstrap `btn-light` class. Using `btn-light` was a very good approach to ensure that no issues would appears on our buttons and also to reduce the amount of code needed, but unfortunately, using `btn-light` directly affects Studio, causing contrast issues. It was also a bit weird to have CSS variables + Bootstrap classes being set at the same time. To fix these issues, we reintroduce CSS variables in Enterprise and Studio, to fully control the color of our elements and ensure everything is readable. Most of these variables are defined in Community, inside the `navbar.scss` file, and we simply override them in Enterprise and Studio. task-3418936 part of task-3326263 closes odoo/odoo#137140 X-original-commit: af6d914c379953d2deec9833579399f126076194 Related: odoo/enterprise#48174 Signed-off-by: Stefano Rigano (sri) Signed-off-by: Chrysanthe Gomrée (chgo) --- .../static/src/webclient/navbar/navbar.scss | 32 +++++++++++-------- .../webclient/navbar/navbar.variables.scss | 16 ---------- .../static/src/components/navbar/navbar.scss | 9 ++---- 3 files changed, 20 insertions(+), 37 deletions(-) diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss index acaac508faf..49f12b9487e 100644 --- a/addons/web/static/src/webclient/navbar/navbar.scss +++ b/addons/web/static/src/webclient/navbar/navbar.scss @@ -3,6 +3,7 @@ // ============================================================================ .o_main_navbar { @include print-variable(o-navbar-height, $o-navbar-height); + --Dropdown_menu-margin-y: 0; display: flex; @@ -33,23 +34,26 @@ .o_menu_sections { .o_nav_entry, .dropdown-toggle { - @extend %-main-navbar-entry-bg-hover !optional; + background: var(--NavBar-entry-backgroundColor, #{$o-navbar-background}); + border: $border-width solid transparent; + + &:hover { + background: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover}); + } + + &:focus { + background: var(--NavBar-entry-backgroundColor--focus, #{$o-navbar-entry-bg--hover}); + } + + &:active { + background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); + } } .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active !optional; - } - } - - @if (not $o-navbar-use-pills) { - .o_menu_systray { - .o_nav_entry, .dropdown-toggle { - @extend %-main-navbar-entry-bg-hover !optional; - } - - .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active !optional; - } + border-color: var(--NavBar-entry-borderColor-active, transparent); + background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); + color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active}); } } diff --git a/addons/web/static/src/webclient/navbar/navbar.variables.scss b/addons/web/static/src/webclient/navbar/navbar.variables.scss index 9decad36a31..c44bc764e4a 100644 --- a/addons/web/static/src/webclient/navbar/navbar.variables.scss +++ b/addons/web/static/src/webclient/navbar/navbar.variables.scss @@ -1,6 +1,5 @@ // = Main Navbar Variables // ============================================================================ -$o-navbar-use-pills: false !default; $o-navbar-height: 46px !default; $o-navbar-padding-v: 0px !default; $o-navbar-font-size: $o-font-size-base !default; @@ -61,18 +60,3 @@ $o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default; padding-right: var(--NavBar-entry-padding-right, #{$o-navbar-entry-padding-h}); line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2}); } - -@if ($o-navbar-use-pills == false) { - %-main-navbar-entry-bg-hover { - &:hover { - background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover}); - } - } - - %-main-navbar-entry-active { - &, &:hover, &:focus { - background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active}); - color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active}); - } - } -} diff --git a/addons/website/static/src/components/navbar/navbar.scss b/addons/website/static/src/components/navbar/navbar.scss index e5a99466791..c1d592dca38 100644 --- a/addons/website/static/src/components/navbar/navbar.scss +++ b/addons/website/static/src/components/navbar/navbar.scss @@ -1,9 +1,4 @@ .o_menu_systray.o_website_systray { - @if $o-navbar-use-pills { - --NavBar-entry-margin-left: #{$o-navbar-entry-padding-h * 0.5}; - --NavBar-entry-margin-right: #{$o-navbar-entry-padding-h * 0.5}; - } @else { - --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h}; - --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h}; - } + --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h}; + --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h}; }