[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
This commit is contained in:
Bruno Boi
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
t-att-data-hotkey="props.hotkey"
|
||||
t-ref="togglerRef"
|
||||
>
|
||||
<span>
|
||||
<span class="d-flex align-items-center">
|
||||
<t t-slot="toggler" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.ComparisonMenu" owl="1">
|
||||
<Dropdown class="o_comparison_menu"
|
||||
<Dropdown class="o_comparison_menu btn-group"
|
||||
togglerClass="'btn btn-secondary'"
|
||||
t-on-dropdown-item-selected="onComparisonSelected"
|
||||
>
|
||||
<t t-set-slot="toggler">
|
||||
<i class="mr-1" t-att-class="icon"/>
|
||||
<i class="small mr-1" t-att-class="icon"/>
|
||||
<span class="o_dropdown_title">Comparison</span>
|
||||
</t>
|
||||
<t t-foreach="items" t-as="item" t-key="item.id">
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.FavoriteMenu" owl="1">
|
||||
<Dropdown class="o_favorite_menu"
|
||||
<Dropdown class="o_favorite_menu btn-group"
|
||||
togglerClass="'btn btn-secondary'"
|
||||
t-on-dropdown-item-selected="onFavoriteSelected"
|
||||
>
|
||||
<t t-set-slot="toggler">
|
||||
<i class="mr-1" t-att-class="icon"/>
|
||||
<i class="small mr-1" t-att-class="icon"/>
|
||||
<span class="o_dropdown_title">Favorites</span>
|
||||
</t>
|
||||
<t t-set="currentGroup" t-value="null"/>
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.FilterMenu" owl="1">
|
||||
<Dropdown class="o_filter_menu"
|
||||
<Dropdown class="o_filter_menu btn-group"
|
||||
togglerClass="'btn btn-secondary'"
|
||||
t-on-dropdown-item-selected="onFilterSelected"
|
||||
>
|
||||
<t t-set-slot="toggler">
|
||||
<i class="mr-1" t-att-class="icon"/>
|
||||
<i class="small mr-1" t-att-class="icon"/>
|
||||
<span class="o_dropdown_title">Filters</span>
|
||||
</t>
|
||||
<t t-set="currentGroup" t-value="null"/>
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.GroupByMenu" owl="1">
|
||||
<Dropdown class="o_group_by_menu"
|
||||
<Dropdown class="o_group_by_menu btn-group"
|
||||
togglerClass="'btn btn-secondary'"
|
||||
t-props="dropdownProps"
|
||||
t-on-dropdown-item-selected="onGroupBySelected"
|
||||
>
|
||||
<t t-set-slot="toggler">
|
||||
<i class="mr-1" t-att-class="icon"/>
|
||||
<i class="small mr-1" t-att-class="icon"/>
|
||||
<span class="o_dropdown_title">Group By</span>
|
||||
</t>
|
||||
<t t-set="currentGroup" t-value="null"/>
|
||||
|
||||
@@ -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"
|
||||
>
|
||||
<a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
|
||||
|
||||
@@ -42,7 +42,7 @@ QUnit.module("Components", ({ beforeEach }) => {
|
||||
parent = await mount(Parent, { env, target });
|
||||
assert.strictEqual(
|
||||
parent.el.outerHTML,
|
||||
'<div class="o_dropdown"><button class="o_dropdown_toggler "><span></span></button></div>'
|
||||
'<div class="o_dropdown"><button class="o_dropdown_toggler "><span class="d-flex align-items-center"></span></button></div>'
|
||||
);
|
||||
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,
|
||||
'<ged class="o_dropdown"><button class="o_dropdown_toggler "><span></span></button></ged>'
|
||||
'<ged class="o_dropdown"><button class="o_dropdown_toggler "><span class="d-flex align-items-center"></span></button></ged>'
|
||||
);
|
||||
assert.containsOnce(parent.el, "button.o_dropdown_toggler");
|
||||
assert.containsNone(parent.el, "ul.o_dropdown_menu");
|
||||
|
||||
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user