From 164cb86d2d24b5eae147b456791b4dbad084bcf0 Mon Sep 17 00:00:00 2001 From: Bruno Boi Date: Tue, 7 Sep 2021 06:23:04 +0000 Subject: [PATCH] [FIX] web,mail: various dropdown design fixes apply new control panel styling from sri remove o_dropdown_menu_right (looks unused) remove o_dropdown_inline (this is a regression for small screens, apparently we would like to have this possibility on smaller screens. This does not break mobile usage but Mobile styling is still a bit weird though) fix systray activitymenu in mobile (issue was introduced with 29731b40) fix subdropdown flickering (before this commit, parent dropdown was in absolute positioning, making the position hook generate flicker, now it it fixed from the beginning) Part-of: odoo/odoo#73311 --- addons/mail/static/src/scss/systray.scss | 11 ++- .../static/src/core/dropdown/dropdown.scss | 94 +------------------ .../web/static/src/core/dropdown/dropdown.xml | 2 +- .../comparison_menu/comparison_menu.xml | 4 +- .../search/favorite_menu/favorite_menu.xml | 4 +- .../src/search/filter_menu/filter_menu.xml | 4 +- .../search/group_by_menu/group_by_menu.xml | 4 +- .../static/src/webclient/navbar/navbar.xml | 2 +- .../web/static/tests/core/dropdown_tests.js | 4 +- .../static/tests/webclient/navbar_tests.js | 4 +- 10 files changed, 26 insertions(+), 107 deletions(-) diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss index 66ef3d273aa..9a46d099928 100644 --- a/addons/mail/static/src/scss/systray.scss +++ b/addons/mail/static/src/scss/systray.scss @@ -111,7 +111,16 @@ top: 10%; } .o_mail_systray_dropdown { - position: relative; + + position: fixed; + top: $o-mail-chat-window-header-height-mobile; + bottom: 0; + left: 0; + right: 0; + width: map-get($sizes, 100); + margin: 0; + max-height: none; + .o_mail_systray_dropdown_top { padding: 5px; } diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss index ebd3bffa123..4093ec49ebd 100644 --- a/addons/web/static/src/core/dropdown/dropdown.scss +++ b/addons/web/static/src/core/dropdown/dropdown.scss @@ -68,21 +68,14 @@ &_menu { @extend .dropdown-menu; - &.o_dropdown_menu_right { - // FIXME: does commenting this break anything? - // @extend .dropdown-menu-right; - } - & > li.o_dropdown { &.focus > .o_dropdown_toggler { background-color: $dropdown-link-hover-bg; } & > .o_dropdown_toggler { - // FIXME: without this there is no selection feedback - // @extend .dropdown-item; &:after { - @include o-position-absolute($right: 0); - transform: translate(-.6em, .3em); + @include o-position-absolute($right: 0, $top: 0); + transform: translate(-.6em, .6em); font: .9em/1em FontAwesome; content: "\f0da"; } @@ -122,90 +115,11 @@ } } - &_item > *:first-child:last-child { - @extend .dropdown-item; - } - - &_item.o_dropdown_active > *:first-child:last-child { - @extend .dropdown-item:hover; - } - &_menu_group { @extend .dropdown-header; } } -// = Owl Nested Dropdowns -// ---------------------------------------------------------------------------- - -.o_dropdown .o_dropdown { - - // Define submenus 'inline' design (nested into the parent menu) - @mixin -o-inline-dropdown-menu { - .o_dropdown_toggler.o_dropdown_active:after { - content: "\f0d7"; - } - - .o_dropdown_menu { - left: 0; - position: relative; - max-height: none; - box-shadow: none; - margin-top: 0; - margin-bottom: $dropdown-padding-y; - padding-top: 0; - background: rgba(#000, .01); - border-width: 0 0 1px 0; - - &:last-child { - border-bottom-width: 0; - margin-bottom: 0; - } - } - } - - // The toggler looks like a regular menu entry - .o_dropdown_toggler { - @extend .dropdown-item; - - &:after { - @include o-position-absolute($right: 0); - transform: translate(-.6em, .3em); - font: .9em/1em FontAwesome; - content: "\f0da"; - } - } - - // Small screen: all submenus are inline - @include media-breakpoint-down('lg') { - @include -o-inline-dropdown-menu ; - } - - // Large screen: submenus floats... - @include media-breakpoint-up('lg') { - .o_dropdown_menu { - top: 0; - left: 100%; - } - - //... except when specified otherwise - &.o_dropdown_inline { - @include -o-inline-dropdown-menu ; - } - } -} - -// Unfortunately is not possible to set the parent menu's overflow to be 'visible' -// horizontally (to show floating submenus) and 'auto/scroll' vertically (to hide -// menu entries when the menu is very long). -// We will set it 'visible' letting 'o_view_controller' handling scrollbars. -@include media-breakpoint-up('lg') { - .o_dropdown_menu { - overflow: visible; - max-height: none; - } -} - // = Owl components specific rules // ----------------------------------------------------------------------------- .o_dropdown_item:not(.disabled):not(:disabled) { @@ -224,10 +138,6 @@ button.o_dropdown_toggler { box-shadow: none !important; } - &.o_dropdown_active { - @extend %--state-active; - } - @include hover-focus-active() { @extend %--state-active; } diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml index 525c5b66317..48c33d17f38 100644 --- a/addons/web/static/src/core/dropdown/dropdown.xml +++ b/addons/web/static/src/core/dropdown/dropdown.xml @@ -17,7 +17,7 @@ t-att-data-hotkey="props.hotkey" t-ref="togglerRef" > - + diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml index 0c676e49ee8..afe62a61554 100644 --- a/addons/web/static/src/search/comparison_menu/comparison_menu.xml +++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml @@ -2,12 +2,12 @@ - - + Comparison diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml index 690925e8cc4..4631765e594 100644 --- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml +++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml @@ -2,12 +2,12 @@ - - + Favorites diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml index f562887e5cf..a3fe871b295 100644 --- a/addons/web/static/src/search/filter_menu/filter_menu.xml +++ b/addons/web/static/src/search/filter_menu/filter_menu.xml @@ -2,12 +2,12 @@ - - + Filters diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml index 384a15337a4..d990950a320 100644 --- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml +++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml @@ -2,13 +2,13 @@ - - + Group By diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml index 11b3fe0d3f9..6f3bfa8d797 100644 --- a/addons/web/static/src/webclient/navbar/navbar.xml +++ b/addons/web/static/src/webclient/navbar/navbar.xml @@ -52,7 +52,7 @@ t-as="app" t-key="app.id" class="o_app" - t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }" + t-att-class="{ focus: menuService.getCurrentApp() === app }" payload="app" > diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js index c6d1f5b8a3d..8491e09c0ea 100644 --- a/addons/web/static/tests/core/dropdown_tests.js +++ b/addons/web/static/tests/core/dropdown_tests.js @@ -42,7 +42,7 @@ QUnit.module("Components", ({ beforeEach }) => { parent = await mount(Parent, { env, target }); assert.strictEqual( parent.el.outerHTML, - '
' + '
' ); assert.containsOnce(parent.el, "button.o_dropdown_toggler"); assert.containsNone(parent.el, "ul.o_dropdown_menu"); @@ -55,7 +55,7 @@ QUnit.module("Components", ({ beforeEach }) => { parent = await mount(Parent, { env, target }); assert.strictEqual( parent.el.outerHTML, - '' + '' ); assert.containsOnce(parent.el, "button.o_dropdown_toggler"); assert.containsNone(parent.el, "ul.o_dropdown_menu"); diff --git a/addons/web/static/tests/webclient/navbar_tests.js b/addons/web/static/tests/webclient/navbar_tests.js index 911a3a459ff..07d39d6a452 100644 --- a/addons/web/static/tests/webclient/navbar_tests.js +++ b/addons/web/static/tests/webclient/navbar_tests.js @@ -120,7 +120,7 @@ QUnit.test("navbar can display current active app", async (assert) => { await click(dropdown, "button.o_dropdown_toggler"); assert.containsOnce( dropdown, - "ul.o_dropdown_menu li.o_dropdown_item:not(.o_dropdown_active)", + "ul.o_dropdown_menu li.o_dropdown_item:not(.focus)", "should not show the current active app as the menus service has not loaded an app yet" ); @@ -129,7 +129,7 @@ QUnit.test("navbar can display current active app", async (assert) => { await nextTick(); assert.containsOnce( dropdown, - "ul.o_dropdown_menu li.o_dropdown_item.o_dropdown_active", + "ul.o_dropdown_menu li.o_dropdown_item.focus", "should show the current active app" ); navbar.destroy();