From b0baac6fc4f58a49e801c8535a272c9fd02bec42 Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Fri, 26 May 2023 09:06:22 +0000 Subject: [PATCH] [FIX] web, mail: `Dropdown` and `PopoverWowl`, increase contrast MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This commit adapt several components and utility-classes in order to increase visual contrast. In the case of `o-mail-ActivityGroup` and `o-mail-NotificationItem` templates, these has been reworked in order to use default BS components and consequently automatically inheriting the improved design. task-3338419 closes odoo/odoo#124903 Part-of: task-3326263 X-original-commit: 190ec1c947e17b2b4aa8614e9e0a04d00cb38d90 Related: odoo/enterprise#42507 Signed-off-by: Bruno Boi (boi) Signed-off-by: Alexandre Kühn (aku) --- .../static/src/core/web/activity_menu.scss | 8 ++---- .../static/src/core/web/activity_menu.xml | 20 ++++++------- .../static/src/core/web/messaging_menu.xml | 5 +--- .../static/src/core/web/notification_item.xml | 4 +-- .../static/tests/activity_menu_tests.js | 26 ++++++++--------- addons/web/static/src/core/popover/popover.js | 2 +- addons/web/static/src/legacy/scss/utils.scss | 13 --------- .../static/src/scss/bootstrap_overridden.scss | 8 +++--- .../src/scss/bootstrap_review_backend.scss | 4 +-- .../static/src/scss/primary_variables.scss | 5 ++-- .../static/src/webclient/navbar/navbar.scss | 16 ++++++----- .../webclient/navbar/navbar.variables.scss | 28 +++++++++++-------- .../src/webclient/user_menu/user_menu.scss | 4 +-- .../web/static/src/webclient/webclient.scss | 1 - .../tests/core/popover/popover_tests.js | 4 +-- 15 files changed, 65 insertions(+), 83 deletions(-) diff --git a/addons/mail/static/src/core/web/activity_menu.scss b/addons/mail/static/src/core/web/activity_menu.scss index 09d8bbe6c4d..adabf86de14 100644 --- a/addons/mail/static/src/core/web/activity_menu.scss +++ b/addons/mail/static/src/core/web/activity_menu.scss @@ -4,12 +4,8 @@ min-height: 50px; img { - width: 40px; - height: 40px; - } - - .o-mail-ActivityGroup:hover { - background-color: map-get($theme-colors, "light"); + height: 3em; + aspect-ratio: 1; } } diff --git a/addons/mail/static/src/core/web/activity_menu.xml b/addons/mail/static/src/core/web/activity_menu.xml index 91d8c85e1df..5217db392c5 100644 --- a/addons/mail/static/src/core/web/activity_menu.xml +++ b/addons/mail/static/src/core/web/activity_menu.xml @@ -12,28 +12,28 @@
Congratulations, you're done with your activities.
-
+
-
+
- - 0 Late - - 0 Today + + 0 Late + + 0 Today - - 0 Future + + 0 Future
-
+ diff --git a/addons/mail/static/src/core/web/messaging_menu.xml b/addons/mail/static/src/core/web/messaging_menu.xml index 833c0734aa2..22d59c16b82 100644 --- a/addons/mail/static/src/core/web/messaging_menu.xml +++ b/addons/mail/static/src/core/web/messaging_menu.xml @@ -24,7 +24,7 @@ -
+
No conversation yet...
@@ -39,7 +39,6 @@ -
@@ -53,7 +52,6 @@ onClick="(isMarkAsRead) => isMarkAsRead ? this.cancelNotifications(failure) : this.onClickFailure(failure)" onSwipeRight="hasTouch() ? { action: () => this.cancelNotifications(failure), icon: 'fa-times-circle', bgColor: 'bg-warning' } : undefined" /> -
@@ -81,7 +79,6 @@ -
diff --git a/addons/mail/static/src/core/web/notification_item.xml b/addons/mail/static/src/core/web/notification_item.xml index c38f2798a31..02ba679a425 100644 --- a/addons/mail/static/src/core/web/notification_item.xml +++ b/addons/mail/static/src/core/web/notification_item.xml @@ -3,7 +3,7 @@ -
+
- + diff --git a/addons/project_todo/static/tests/activity_menu_tests.js b/addons/project_todo/static/tests/activity_menu_tests.js index cf0ef07b5bf..de481e6cf52 100644 --- a/addons/project_todo/static/tests/activity_menu_tests.js +++ b/addons/project_todo/static/tests/activity_menu_tests.js @@ -20,31 +20,31 @@ QUnit.test("create todo from activity menu without date", async function (assert target, ".o-mail-ActivityMenu:contains(Congratulations, you're done with your activities.)" ); - assert.containsOnce(target, "button:contains(Add a To-do)"); - await click("button:contains(Add a To-do)"); - assert.containsNone(target, "button:contains(Add a To-do)"); + assert.containsOnce(target, ".btn:contains(Add a To-do)"); + await click(".btn:contains(Add a To-do)"); + assert.containsNone(target, ".btn:contains(Add a To-do)"); assert.containsOnce(target, ".o-mail-ActivityMenu-show"); await editInput(target, "input.o-mail-ActivityMenu-input", "New To-do"); - await click("button:contains(SAVE)"); + await click(".btn:contains(SAVE)"); // Need to reopen systray as it automatically closes when a todo is created assert.containsOnce(target, ".o_menu_systray i[aria-label='Activities']"); await click(".o_menu_systray i[aria-label='Activities']"); assert.containsOnce(target, ".o-mail-ActivityMenu-counter:contains(1)"); assert.containsOnce(target, ".o-mail-ActivityGroup"); assert.containsOnce(target, ".o-mail-ActivityGroup:contains(project.task)"); - assert.containsOnce(target, "button:contains(1 Today)"); - assert.containsOnce(target, "button:contains(Add a To-do)"); + assert.containsOnce(target, ".btn:contains(1 Today)"); + assert.containsOnce(target, ".btn:contains(Add a To-do)"); assert.containsNone(target, ".o-mail-ActivityMenu-show"); assert.containsNone(target, ".o-mail-ActivityMenu-input"); - await click("button:contains(Add a To-do)"); - assert.containsNone(target, "button:contains(Add a To-do)"); + await click(".btn:contains(Add a To-do)"); + assert.containsNone(target, ".btn:contains(Add a To-do)"); await editInput(target, "input.o-mail-ActivityMenu-input", "New To-do"); - await click("button:contains(SAVE)"); + await click(".btn:contains(SAVE)"); // Need to reopen systray as it automatically closes when a todo is created assert.containsOnce(target, ".o_menu_systray i[aria-label='Activities']"); await click(".o_menu_systray i[aria-label='Activities']"); assert.containsOnce(target, ".o-mail-ActivityMenu-counter:contains(2)"); - assert.containsOnce(target, "button:contains(2 Today)"); + assert.containsOnce(target, ".btn:contains(2 Today)"); }); QUnit.test("create to-do from activity menu with date", async function (assert) { @@ -57,19 +57,19 @@ QUnit.test("create to-do from activity menu with date", async function (assert) assert.containsNone(target, ".o-mail-ActivityMenu-counter"); await click(".o_menu_systray i[aria-label='Activities']"); - await click("button:contains(Add a To-do)"); + await click(".btn:contains(Add a To-do)"); await editInput(target, "input.o-mail-ActivityMenu-input", "New To-do"); await editInput( target, "input.o_datetime_input", futureDay.toString(luxon.DateTime.DATE_SHORT) ); - await click("button:contains(SAVE)"); + await click(".btn:contains(SAVE)"); // Need to reopen systray as it automatically closes when a todo is created assert.containsOnce(target, ".o_menu_systray i[aria-label='Activities']"); await click(".o_menu_systray i[aria-label='Activities']"); assert.containsOnce(target, ".o-mail-ActivityMenu-counter:contains(1)"); assert.containsOnce(target, ".o-mail-ActivityGroup"); assert.containsOnce(target, ".o-mail-ActivityGroup:contains(project.task)"); - assert.containsOnce(target, "button:contains(1 Future)"); + assert.containsOnce(target, ".btn:contains(1 Future)"); }); diff --git a/addons/web/static/src/core/popover/popover.js b/addons/web/static/src/core/popover/popover.js index 7f472b50d07..9ed194afcd7 100644 --- a/addons/web/static/src/core/popover/popover.js +++ b/addons/web/static/src/core/popover/popover.js @@ -24,7 +24,7 @@ export class Popover extends Component { right: "end", }; el.classList = [ - "o_popover popover mw-100 shadow-sm", + "o_popover popover mw-100", `bs-popover-${directionMap[direction]}`, `o-popover-${direction}`, `o-popover--${position}`, diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss index 5f93a5d0e90..936d88c879e 100644 --- a/addons/web/static/src/legacy/scss/utils.scss +++ b/addons/web/static/src/legacy/scss/utils.scss @@ -286,23 +286,10 @@ padding: if(type-of($padding-base) == 'string', calc(#{$padding-base}/2) $padding-base, $padding-base/2 $padding-base); vertical-align: top; @include o-hover-text-color($body-color, $headings-color); - - &:focus, &:active, &:focus:active { - outline: none; - box-shadow: none; - } } @mixin o-kanban-dropdown-open { position: relative; - background: $dropdown-bg; z-index: $zindex-dropdown + 1; - - &:before { - @include o-position-absolute(100%, 0, auto, 0); - height: $dropdown-border-radius; - background-color: $dropdown-bg; - content: ""; - } } @mixin o-kanban-colorpicker { max-width: 150px; diff --git a/addons/web/static/src/scss/bootstrap_overridden.scss b/addons/web/static/src/scss/bootstrap_overridden.scss index 91d72c76ff8..79b537cd190 100644 --- a/addons/web/static/src/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/scss/bootstrap_overridden.scss @@ -91,12 +91,11 @@ $grid-gutter-width: $o-horizontal-padding * 2 !default; // // Define common padding and border radius sizes and more. -$border-color: $o-border-color!default; +$border-color: $o-border-color !default; $border-radius: $o-border-radius !default; $border-radius-sm: $o-border-radius-sm !default; $border-radius-lg: $o-border-radius-lg !default; -$border-color: $o-gray-300 !default; $component-active-color: $o-component-active-color !default; $component-active-bg: $o-component-active-bg !default; @@ -174,7 +173,7 @@ $btn-border-radius-lg: $border-radius !default; // // Dropdown menu container and contents. -$dropdown-border-color: $gray-300 !default; +$dropdown-border-color: $border-color !default; $dropdown-link-color: $o-main-text-color !default; $dropdown-link-hover-color: $gray-900 !default; @@ -233,9 +232,10 @@ $tooltip-opacity: 1 !default; // Popovers $popover-bg: $white !default; -$popover-border-width: 0 !default; +$popover-border-color: $border-color !default; $popover-border-radius: $border-radius !default; $popover-arrow-color: var(--popover-arrow-color, #{$popover-bg}) !default; +$popover-arrow-outer-color: $popover-border-color !default; // Toasts diff --git a/addons/web/static/src/scss/bootstrap_review_backend.scss b/addons/web/static/src/scss/bootstrap_review_backend.scss index 4f514149f4c..15f123a7a5e 100644 --- a/addons/web/static/src/scss/bootstrap_review_backend.scss +++ b/addons/web/static/src/scss/bootstrap_review_backend.scss @@ -111,7 +111,7 @@ $-o-theme-text-colors: map-merge($theme-colors, $o-theme-text-colors); @each $-name, $-color in $-o-theme-text-colors{ &.btn-#{$-name}, &.text-#{$-name} { - @include o-btn-link-variant($o-main-color-muted!important, o-text-color($-name) or $-color!important); + @include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important); } } } @@ -246,7 +246,7 @@ $-o-bg-colors-custom: null; .btn-link { @each $-name, $-color in $o-text-colors-custom{ &.btn-#{$-name}, &.text-#{$-name} { - @include o-btn-link-variant($o-main-color-muted!important, o-text-color($-name) or $-color!important); + @include o-btn-link-variant($o-gray-600!important, o-text-color($-name) or $-color!important); } } } diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index e3b91a71c83..970a851561a 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -168,7 +168,6 @@ $o-horizontal-padding: $o-spacer !default; $o-innergroup-rpadding: 45px !default; $o-dropdown-hpadding: 20px !default; $o-dropdown-vpadding: 3px !default; -$o-dropdown-box-shadow: 0 1rem 1.1rem rgba(#000, .1) !default; $o-sheet-vpadding: 24px !default; @@ -259,8 +258,8 @@ $o-btns-bs-override: map-merge(( border: $o-white, color: $o-gray-700, - hover-background: $o-gray-100, - hover-border: $o-gray-100, + hover-background: $o-gray-200, + hover-border: $o-gray-200, hover-color: $o-gray-900, active-background: $o-component-active-bg, diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss index e106cb900ac..acaac508faf 100644 --- a/addons/web/static/src/webclient/navbar/navbar.scss +++ b/addons/web/static/src/webclient/navbar/navbar.scss @@ -28,34 +28,33 @@ .o_nav_entry, .dropdown-toggle { @extend %-main-navbar-entry-base; @extend %-main-navbar-entry-spacing; - border: 0; + border-color: transparent; } .o_menu_sections { .o_nav_entry, .dropdown-toggle { - @extend %-main-navbar-entry-bg-hover; + @extend %-main-navbar-entry-bg-hover !optional; } .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active; + @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; + @extend %-main-navbar-entry-bg-hover !optional; } .dropdown.show > .dropdown-toggle { - @extend %-main-navbar-entry-active; + @extend %-main-navbar-entry-active !optional; } } } .dropdown-menu { - border-top: 0; - margin-top: $o-navbar-dropdown-menu-margin-top; + border-top: $o-navbar-dropdown-menu-border-top; border-radius: $o-navbar-dropdown-menu-border-radius; } @@ -108,6 +107,9 @@ } .o_menu_systray { + --NavBar-entry-padding-left: #{$o-navbar-entry-padding-h * 0.5}; + --NavBar-entry-padding-right: #{$o-navbar-entry-padding-h * 0.5}; + .badge { margin-right: -.5em; border: 0; diff --git a/addons/web/static/src/webclient/navbar/navbar.variables.scss b/addons/web/static/src/webclient/navbar/navbar.variables.scss index 752ae879a86..9865b93b26d 100644 --- a/addons/web/static/src/webclient/navbar/navbar.variables.scss +++ b/addons/web/static/src/webclient/navbar/navbar.variables.scss @@ -19,7 +19,7 @@ $o-navbar-entry-bg--hover: rgba($o-black, .08) !default; $o-navbar-entry-color--active: $o-navbar-entry-color--hover !default; $o-navbar-entry-bg--active: $o-navbar-entry-bg--hover !default; -$o-navbar-dropdown-menu-margin-top: 0px !default; +$o-navbar-dropdown-menu-border-top: 0 !default; $o-navbar-dropdown-menu-border-radius: 0 0 $o-border-radius $o-border-radius !default; $o-navbar-brand-font-size: 1.2em !default; @@ -46,10 +46,12 @@ $o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default; background: transparent; font-size: $o-navbar-entry-font-size; - @include o-hover-text-color( - var(--NavBar-entry-color, #{$o-navbar-entry-color}), - var(--NavBar-entry-color--hover, #{$o-navbar-entry-color--hover}) - ); + @if ($o-navbar-use-pills == false) { + @include o-hover-text-color( + var(--NavBar-entry-color, #{$o-navbar-entry-color}), + var(--NavBar-entry-color--hover, #{$o-navbar-entry-color--hover}) + ); + } } %-main-navbar-entry-spacing { @@ -62,15 +64,17 @@ $o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default; line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2}); } -%-main-navbar-entry-bg-hover { - &:hover { - background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover}); +@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 { + %-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}); + 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/user_menu/user_menu.scss b/addons/web/static/src/webclient/user_menu/user_menu.scss index 132afe3d1a7..919169fd441 100644 --- a/addons/web/static/src/webclient/user_menu/user_menu.scss +++ b/addons/web/static/src/webclient/user_menu/user_menu.scss @@ -1,7 +1,5 @@ .o_user_menu .dropdown-toggle { - --NavBar-entry-padding-right: 0; - - margin-right: $o-horizontal-padding; + --NavBar-entry-padding-right: #{$o-horizontal-padding}; .o_user_avatar { height: calc(var(--o-navbar-height) - 20px); diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss index 35a2eb20f26..c0a38381341 100644 --- a/addons/web/static/src/webclient/webclient.scss +++ b/addons/web/static/src/webclient/webclient.scss @@ -77,7 +77,6 @@ kbd { max-height: 70vh; overflow: auto; background-clip: border-box; - box-shadow: $o-dropdown-box-shadow; } :not(.dropstart) > .dropdown-item { diff --git a/addons/web/static/tests/core/popover/popover_tests.js b/addons/web/static/tests/core/popover/popover_tests.js index b158dd1b52f..97f18c9bdc5 100644 --- a/addons/web/static/tests/core/popover/popover_tests.js +++ b/addons/web/static/tests/core/popover/popover_tests.js @@ -194,7 +194,7 @@ QUnit.test("reposition popover should properly change classNames", async (assert // Should have classes for a "bottom-middle" placement assert.strictEqual( popover.className, - "o_popover popover mw-100 shadow-sm bs-popover-bottom o-popover-bottom o-popover--bm" + "o_popover popover mw-100 bs-popover-bottom o-popover-bottom o-popover--bm" ); assert.strictEqual(arrow.className, "popover-arrow start-0 end-0 mx-auto"); @@ -207,7 +207,7 @@ QUnit.test("reposition popover should properly change classNames", async (assert // Should have classes for a "right-end" placement assert.strictEqual( popover.className, - "o_popover popover mw-100 shadow-sm bs-popover-end o-popover-right o-popover--re" + "o_popover popover mw-100 bs-popover-end o-popover-right o-popover--re" ); assert.strictEqual(arrow.className, "popover-arrow top-auto"); });