[REF] web, mail, hr, website, auth_totp, test_apikeys: top-menu design
task-2818586 Part-of: odoo/odoo#116641
This commit is contained in:
committed by
Pierre Paridans
parent
ef31306130
commit
79f57643ce
@@ -21,7 +21,7 @@ function openRoot() {
|
||||
function openUserProfileAtSecurityTab() {
|
||||
return [{
|
||||
content: 'Open user account menu',
|
||||
trigger: '.o_user_menu .oe_topbar_name',
|
||||
trigger: '.o_user_menu .dropdown-toggle',
|
||||
run: 'click',
|
||||
}, {
|
||||
content: "Open preferences / profile screen",
|
||||
@@ -154,7 +154,7 @@ registry.category("web_tour.tours").add('totp_login_enabled', {
|
||||
}
|
||||
}, {
|
||||
content: "check we're logged in",
|
||||
trigger: ".o_user_menu .oe_topbar_name",
|
||||
trigger: ".o_user_menu .dropdown-toggle",
|
||||
run() {}
|
||||
}]});
|
||||
|
||||
@@ -191,7 +191,7 @@ registry.category("web_tour.tours").add('totp_login_device', {
|
||||
}
|
||||
}, {
|
||||
content: "check we're logged in",
|
||||
trigger: ".o_user_menu .oe_topbar_name",
|
||||
trigger: ".o_user_menu .dropdown-toggle",
|
||||
run: 'click',
|
||||
}, {
|
||||
content: "click the Log out button",
|
||||
@@ -212,7 +212,7 @@ registry.category("web_tour.tours").add('totp_login_device', {
|
||||
trigger: 'button:contains("Log in")',
|
||||
}, {
|
||||
content: "check we're logged in without 2FA",
|
||||
trigger: ".o_user_menu .oe_topbar_name",
|
||||
trigger: ".o_user_menu .dropdown-toggle",
|
||||
run() {}
|
||||
},
|
||||
// now go and disable two-factor authentication would be annoying to do in a separate tour
|
||||
|
||||
@@ -20,7 +20,7 @@ registry.category("web_tour.tours").add('hr_employee_tour', {
|
||||
},
|
||||
{
|
||||
content: "Open user account menu",
|
||||
trigger: ".o_user_menu .oe_topbar_name",
|
||||
trigger: ".o_user_menu .dropdown-toggle",
|
||||
run: 'click',
|
||||
}, {
|
||||
content: "Open My Profile",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Dropdown position="'bottom-end'" autoOpen="false" beforeOpen.bind="onBeforeOpen" menuClass="`p-0 ${ store.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
|
||||
<t t-set-slot="toggler">
|
||||
<i class="fa fa-lg fa-clock-o" role="img" aria-label="Activities"></i>
|
||||
<span t-if="store.activityCounter" class="o-mail-ActivityMenu-counter badge"><t t-esc="store.activityCounter"/></span>
|
||||
<span t-if="store.activityCounter" class="o-mail-ActivityMenu-counter badge rounded-pill"><t t-esc="store.activityCounter"/></span>
|
||||
</t>
|
||||
<t t-set-slot="default">
|
||||
<div class="o-mail-ActivityMenu bg-view flex-grow-1 d-flex flex-column" t-att-class="{ 'overflow-auto w-100 mh-100': store.isSmall }">
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Dropdown t-if="!env.inDiscussApp" autoOpen="false" beforeOpen.bind="beforeOpen" onStateChanged="state => this.state.isOpen = state.open" position="'bottom-end'" menuClass="`p-0 ${ store.isSmall ? 'start-0 w-100 mh-100 bottom-0 d-flex flex-column' : ''}`">
|
||||
<t t-set-slot="toggler">
|
||||
<i class="fa fa-lg fa-comments" role="img" aria-label="Messages" t-on-click="() => store.discuss.activeTab = store.isSmall and store.discuss.activeTab === 'mailbox' ? 'all' : store.discuss.activeTab"></i>
|
||||
<span t-if="counter" class="o-mail-MessagingMenu-counter badge"><t t-esc="counter"/></span>
|
||||
<span t-if="counter" class="o-mail-MessagingMenu-counter badge rounded-pill"><t t-esc="counter"/></span>
|
||||
</t>
|
||||
<t t-set-slot="default">
|
||||
<t t-call="mail.MessagingMenu.content"/>
|
||||
|
||||
@@ -1,3 +1,10 @@
|
||||
// ------- Kanban View -------
|
||||
.o_kanban_view {
|
||||
@include media-breakpoint-down(md) {
|
||||
--ControlPanel-border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ------- Kanban renderer -------
|
||||
.o_kanban_renderer {
|
||||
// ----------------------------------------------------------------------------
|
||||
@@ -587,7 +594,7 @@
|
||||
margin: calc(var(--KanbanRecord-margin-v) * 0.5) var(--KanbanRecord-margin-h);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin: 0 0 -1px 0;
|
||||
margin: 0 0 -1px 0 0 #{-$border-width};
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,10 +16,11 @@
|
||||
|
||||
// ====== Top-Bar
|
||||
.o_burger_menu_topbar {
|
||||
min-height: $o-navbar-height-xs;
|
||||
min-height: $o-navbar-height;
|
||||
background-color: $o-burger-topbar-bg;
|
||||
color: $o-burger-topbar-color;
|
||||
line-height: $o-navbar-height-xs;
|
||||
line-height: $o-navbar-height;
|
||||
box-shadow: inset 0 -1px 0 $border-color;
|
||||
|
||||
.dropdown-toggle, .o_burger_menu_close {
|
||||
padding: 0 $o-horizontal-padding;
|
||||
@@ -28,15 +29,12 @@
|
||||
|
||||
// ====== Menu content container (both App's and User's entries)
|
||||
.o_burger_menu_content {
|
||||
&.o_burger_menu_dark {
|
||||
background-color: darken($o-burger-base-bg, 5%);
|
||||
&.o_burger_menu_app {
|
||||
background-color: $o-burger-base-bg;
|
||||
}
|
||||
|
||||
// Menu entries size and layout
|
||||
ul {
|
||||
background-color: rgba(invert($o-burger-base-color), .1);
|
||||
box-shadow: inset 0 -1px 0 rgba($o-burger-base-color, .1);
|
||||
|
||||
li > div, li {
|
||||
padding-left: $o-horizontal-padding;
|
||||
}
|
||||
@@ -45,14 +43,18 @@
|
||||
li {
|
||||
ul > li {
|
||||
&, > div {
|
||||
text-indent: 2em;
|
||||
text-indent: .5em;
|
||||
}
|
||||
ul > li {
|
||||
&, > div {
|
||||
text-indent: 3em;
|
||||
text-indent: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: map-get($map: $spacers, $key: 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// = Burger Menu Variables
|
||||
// ============================================================================
|
||||
$o-burger-topbar-bg: $o-brand-odoo !default;
|
||||
$o-burger-topbar-color: $o-white !default;
|
||||
$o-burger-base-bg: $o-white !default;
|
||||
$o-burger-base-color: $o-gray-800 !default;
|
||||
|
||||
$o-burger-base-bg: $o-burger-topbar-bg !default;
|
||||
$o-burger-base-color: $o-burger-topbar-color !default;
|
||||
$o-burger-topbar-bg: $o-gray-100 !default;
|
||||
$o-burger-topbar-color: $o-gray-900 !default;
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
<div t-name="web.BurgerMenu" owl="1">
|
||||
<button
|
||||
class="o_mobile_menu_toggle o-no-caret d-md-none border-0"
|
||||
class="o_mobile_menu_toggle o_nav_entry o-no-caret d-md-none border-0 pe-3"
|
||||
title="Toggle menu" aria-label="Toggle menu"
|
||||
t-on-click="_openBurger">
|
||||
<i class="oi oi-panel-right"/>
|
||||
@@ -15,7 +15,7 @@
|
||||
<div class="o_burger_menu position-fixed top-0 bottom-0 start-100 d-flex flex-column flex-nowrap" t-att-class="transition.className" t-on-touchstart.stop="_onSwipeStart" t-on-touchend.stop="_onSwipeEnd">
|
||||
<div class="o_burger_menu_topbar d-flex align-items-center justify-content-between flex-shrink-0 py-0 fs-4"
|
||||
t-on-click.stop='_toggleUserMenu'>
|
||||
<small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view text-body': isUserMenuUnfolded }">
|
||||
<small class="o-no-caret dropdown-toggle d-flex align-items-center justify-content-between" t-att-class="{'active bg-view text-body border-end': isUserMenuUnfolded }">
|
||||
<img class="o_burger_menu_avatar o_image_24_cover rounded-circle" t-att-src="'/web/image?model=res.users&field=avatar_128&id=' + user.userId" alt="Menu"/>
|
||||
<span class="o_burger_menu_username px-2"><t t-esc="user.name"/></span>
|
||||
<i t-if="isUserMenuTogglable" class="fa" t-att-class="state.isUserMenuOpened ? 'fa-caret-down' : 'fa-caret-left'"/>
|
||||
@@ -23,7 +23,7 @@
|
||||
<button class="o_burger_menu_close oi oi-close btn d-flex align-items-center h-100 bg-transparent border-0 fs-2 text-reset" aria-label="Close menu" title="Close menu" t-on-click.stop="_closeBurger"/>
|
||||
</div>
|
||||
<nav class="o_burger_menu_content flex-grow-1 flex-shrink-1 overflow-auto"
|
||||
t-att-class="{o_burger_menu_dark: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
|
||||
t-att-class="{o_burger_menu_app: !isUserMenuUnfolded, 'bg-view': isUserMenuUnfolded}">
|
||||
<!-- -->
|
||||
<t t-if="isUserMenuUnfolded">
|
||||
<MobileSwitchCompanyMenu t-if="Object.values(company.availableCompanies).length > 1" />
|
||||
@@ -48,7 +48,12 @@
|
||||
|
||||
<t t-name="web.BurgerSection" owl="1">
|
||||
<li t-if="section.childrenTree.length" class="ps-0">
|
||||
<div class="py-3 bg-transparent" t-att-class="{ 'fs-4': !isNested }"
|
||||
<div class="bg-transparent"
|
||||
t-att-class="{
|
||||
'fw-bold text-900 pt-3 pb-2': !isNested,
|
||||
'border-top': !isNested && subMenu_index != 0,
|
||||
'py-2': isNested,
|
||||
}"
|
||||
t-att-data-menu-xmlid="section.xmlid" t-esc="section.name"/>
|
||||
<ul class="ps-0">
|
||||
<t t-foreach="section.childrenTree" t-as="subSection" t-key="subSection_index">
|
||||
@@ -60,7 +65,11 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li t-else="" t-on-click="() => this._onMenuClicked(section)" t-att-data-menu-xmlid="section.xmlid"
|
||||
class="py-3" t-att-class="{ 'fs-4': !isNested }">
|
||||
t-att-class="{
|
||||
'fw-bold text-900 py-3': !isNested,
|
||||
'border-top': !isNested && subMenu_index != 0,
|
||||
'py-2': isNested,
|
||||
}">
|
||||
<t t-esc="section.name"/>
|
||||
</li>
|
||||
</t>
|
||||
|
||||
@@ -2,17 +2,16 @@
|
||||
// = Main Navbar
|
||||
// ============================================================================
|
||||
.o_main_navbar {
|
||||
@include print-variable(o-navbar-height, $o-navbar-height-xs);
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include print-variable(o-navbar-height, $o-navbar-height-lg);
|
||||
}
|
||||
@include print-variable(o-navbar-height, $o-navbar-height);
|
||||
|
||||
display: flex;
|
||||
height: var(--o-navbar-height);
|
||||
min-width: min-content;
|
||||
padding-top: $o-navbar-padding-v;
|
||||
padding-bottom: $o-navbar-padding-v;
|
||||
border-bottom: $o-navbar-border-bottom;
|
||||
background: $o-navbar-background;
|
||||
font-size: $o-navbar-font-size;
|
||||
|
||||
// = Reset browsers defaults
|
||||
// --------------------------------------------------------------------------
|
||||
@@ -24,27 +23,39 @@
|
||||
|
||||
// = General components & behaviours
|
||||
// --------------------------------------------------------------------------
|
||||
.dropdown.show > .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-active;
|
||||
}
|
||||
|
||||
.o_nav_entry {
|
||||
.o_nav_entry, .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-base;
|
||||
@extend %-main-navbar-entry-spacing;
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@extend %-main-navbar-entry-base;
|
||||
@extend %-main-navbar-entry-spacing;
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.o_menu_sections {
|
||||
.o_nav_entry, .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
}
|
||||
|
||||
.dropdown.show > .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-active;
|
||||
}
|
||||
}
|
||||
|
||||
@if (not $o-navbar-use-pills) {
|
||||
.o_menu_systray {
|
||||
.o_nav_entry, .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
}
|
||||
|
||||
.dropdown.show > .dropdown-toggle {
|
||||
@extend %-main-navbar-entry-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
@include border-top-radius(0);
|
||||
margin-top: $o-navbar-dropdown-menu-margin-top;
|
||||
border-radius: $o-navbar-dropdown-menu-border-radius;
|
||||
}
|
||||
|
||||
.o_dropdown_menu_group_entry.dropdown-item {
|
||||
@@ -58,8 +69,9 @@
|
||||
// = Navbar Sections & Children
|
||||
// --------------------------------------------------------------------------
|
||||
.o_navbar_apps_menu .dropdown-toggle {
|
||||
--NavBar-entry-padding-left: #{$o-horizontal-padding};
|
||||
|
||||
@extend %-main-navbar-entry-base;
|
||||
padding-left: $o-horizontal-padding;
|
||||
font-size: $o-navbar-brand-font-size;
|
||||
}
|
||||
|
||||
@@ -68,6 +80,7 @@
|
||||
@extend %-main-navbar-entry-spacing;
|
||||
padding-left: 0;
|
||||
font-size: $o-navbar-brand-font-size;
|
||||
color: var(--NavBar-brand-color, #{$o-navbar-brand-color});
|
||||
|
||||
&:hover {
|
||||
background: none;
|
||||
@@ -75,8 +88,6 @@
|
||||
}
|
||||
|
||||
.o_menu_sections {
|
||||
width: 0;
|
||||
|
||||
.o_more_dropdown_section_group {
|
||||
margin-top: .8em;
|
||||
|
||||
@@ -87,27 +98,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_menu_systray > * {
|
||||
> a, > .dropdown > a, > button, > label { // <label> is required by website
|
||||
@extend %-main-navbar-entry-base;
|
||||
@extend %-main-navbar-entry-spacing;
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: 0 $o-horizontal-padding * .6;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-right: -.5em;
|
||||
border: 0;
|
||||
height: $o-navbar-badge-size + $o-navbar-badge-padding + $o-navbar-badge-size-adjust;
|
||||
padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
|
||||
background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
|
||||
font-size: $o-navbar-badge-size;
|
||||
color: var(--o-navbar-badge-color, inherit);
|
||||
text-shadow: var(--o-navbar-badge-text-shadow, #{1px 1px 0 rgba($black, .3)});
|
||||
transform: translate(-10%, -30%);
|
||||
}
|
||||
.o_menu_systray {
|
||||
.badge {
|
||||
margin-right: -.5em;
|
||||
border: 0;
|
||||
padding: ($o-navbar-badge-padding * .5) $o-navbar-badge-padding;
|
||||
background-color: var(--o-navbar-badge-bg, #{$o-navbar-badge-bg});
|
||||
font-size: $o-navbar-badge-size;
|
||||
color: var(--o-navbar-badge-color, $o-navbar-badge-color);
|
||||
text-shadow: var(--o-navbar-badge-text-shadow, #{$o-navbar-badge-text-shadow});
|
||||
transform: translate(-0.6em, -30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,35 @@
|
||||
// = Main Navbar Variables
|
||||
// ============================================================================
|
||||
$o-navbar-height-xs: 46px !default;
|
||||
$o-navbar-height-lg: 40px !default;
|
||||
$o-navbar-height: $o-navbar-height-lg !default;
|
||||
$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;
|
||||
|
||||
$o-navbar-background: $o-brand-odoo !default;
|
||||
|
||||
$o-navbar-border-bottom: 1px solid darken($o-brand-odoo, 10%) !default;
|
||||
|
||||
$o-navbar-entry-color: $o-white !default;
|
||||
$o-navbar-entry-font-size: $o-font-size-base !default;
|
||||
$o-navbar-entry-margin-h: 0 !default;
|
||||
$o-navbar-entry-padding-h: .63em !default;
|
||||
$o-navbar-entry-border-radius: 0 !default;
|
||||
$o-navbar-entry-color: rgba($o-white, .9) !default;
|
||||
$o-navbar-entry-color--hover: $o-white !default;
|
||||
$o-navbar-entry-font-size: 1em !default;
|
||||
$o-navbar-entry-bg--hover: rgba($o-black, .08) !default;
|
||||
|
||||
$o-navbar-brand-font-size: $o-navbar-entry-font-size * 1.3 !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-radius: 0 0 $o-border-radius $o-border-radius !default;
|
||||
|
||||
$o-navbar-brand-font-size: 1.2em !default;
|
||||
$o-navbar-brand-color: $o-navbar-entry-color !default;
|
||||
|
||||
$o-navbar-badge-size: 11px !default;
|
||||
$o-navbar-badge-size-adjust: 1px !default;
|
||||
$o-navbar-badge-padding: 4px !default;
|
||||
$o-navbar-badge-bg: $o-success !default;
|
||||
$o-navbar-badge-color: inherit !default;
|
||||
$o-navbar-badge-text-shadow: 1px 1px 0 rgba($o-black, .3) !default;
|
||||
|
||||
// = % PseudoClasses
|
||||
//
|
||||
@@ -28,28 +40,37 @@ $o-navbar-badge-bg: $o-success !default;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: var(--o-navbar-height, #{$o-navbar-height});
|
||||
height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2});
|
||||
border-radius: $o-navbar-entry-border-radius;
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
font-size: $o-navbar-entry-font-size;
|
||||
|
||||
@include o-hover-text-color(rgba($o-navbar-entry-color, .9), $o-navbar-entry-color);
|
||||
@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 {
|
||||
padding: 0 $o-horizontal-padding * .75;
|
||||
line-height: var(--o-navbar-height);
|
||||
margin: 0;
|
||||
margin-left: var(--NavBar-entry-margin-left, #{$o-navbar-entry-margin-h});
|
||||
margin-right: var(--NavBar-entry-margin-right, #{$o-navbar-entry-margin-h});
|
||||
padding: 0;
|
||||
padding-left: var(--NavBar-entry-padding-left, #{$o-navbar-entry-padding-h});
|
||||
padding-right: var(--NavBar-entry-padding-right, #{$o-navbar-entry-padding-h});
|
||||
line-height: calc(var(--o-navbar-height) - #{$o-navbar-padding-v * 2});
|
||||
}
|
||||
|
||||
%-main-navbar-entry-bg-hover {
|
||||
&:hover {
|
||||
background-color: $o-navbar-entry-bg--hover;
|
||||
background-color: var(--NavBar-entry-backgroundColor--hover, #{$o-navbar-entry-bg--hover});
|
||||
}
|
||||
}
|
||||
|
||||
%-main-navbar-entry-active {
|
||||
&, &:hover, &:focus {
|
||||
background: $o-navbar-entry-bg--hover;
|
||||
color: $o-navbar-entry-color;
|
||||
background: var(--NavBar-entry-backgroundColor--active, #{$o-navbar-entry-bg--active});
|
||||
color: var(--NavBar-entry-color--active, #{$o-navbar-entry-color--active});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
t-if="currentApp"
|
||||
href="getMenuItemHref(currentApp)"
|
||||
t-esc="currentApp.name"
|
||||
class="'o_menu_brand d-none d-md-block'"
|
||||
class="'o_menu_brand d-none d-md-flex'"
|
||||
dataset="{ menuXmlid: currentApp.xmlid, section: currentApp.id }"
|
||||
onSelected="() => this.onNavBarDropdownItemSelection(currentApp)"
|
||||
/>
|
||||
@@ -60,7 +60,7 @@
|
||||
</t>
|
||||
|
||||
<t t-name="web.NavBar.SectionsMenu" owl="1">
|
||||
<div class="o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1" t-ref="appSubMenus" role="menu">
|
||||
<div class="o_menu_sections d-none d-md-flex flex-grow-1 flex-shrink-1 w-0" t-ref="appSubMenus" role="menu">
|
||||
|
||||
<t t-foreach="sections" t-as="section" t-key="section.id">
|
||||
<t
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
.o_user_menu .dropdown-toggle {
|
||||
--Avatar-size: calc(var(--o-navbar-height) - 20px);
|
||||
--NavBar-entry-padding-right: 0;
|
||||
|
||||
padding-right: $o-horizontal-padding;
|
||||
margin-right: $o-horizontal-padding;
|
||||
|
||||
.o_user_avatar {
|
||||
height: calc(var(--o-navbar-height) - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,8 +4,13 @@
|
||||
<t t-name="web.UserMenu" owl="1">
|
||||
<Dropdown class="'o_user_menu d-none d-md-block pe-0'" togglerClass="'py-1 py-lg-0'">
|
||||
<t t-set-slot="toggler">
|
||||
<img class="o_user_avatar o_avatar h-75 py-1 rounded" t-att-src="source" alt="User"/>
|
||||
<span class="oe_topbar_name d-none d-lg-block ms-1"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
|
||||
<img class="o_avatar o_user_avatar rounded" t-att-src="source" alt="User"/>
|
||||
<small class="oe_topbar_name d-none ms-2 text-start smaller lh-1 text-truncate" t-att-class="{'d-lg-inline-block' : env.debug}" style="max-width: 200px">
|
||||
<t t-esc="user.name"/>
|
||||
<mark class="d-block font-monospace text-truncate">
|
||||
<i class="fa fa-database oi-small me-1"/><t t-esc="user.db.name"/>
|
||||
</mark>
|
||||
</small>
|
||||
</t>
|
||||
<t t-foreach="getElements()" t-as="element" t-key="element_index">
|
||||
<t t-if="!element.hide">
|
||||
|
||||
@@ -100,8 +100,6 @@ QUnit.test("can be rendered", async (assert) => {
|
||||
target.querySelector("img.o_user_avatar").dataset.src,
|
||||
"http://lordofthering/web/image?model=res.users&field=avatar_128&id=7"
|
||||
);
|
||||
assert.containsOnce(target, "span.oe_topbar_name");
|
||||
assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron");
|
||||
assert.containsNone(target, ".dropdown-menu .dropdown-item");
|
||||
await click(target.querySelector("button.dropdown-toggle"));
|
||||
assert.containsN(target, ".dropdown-menu .dropdown-item", 4);
|
||||
@@ -132,8 +130,8 @@ QUnit.test("display the correct name in debug mode", async (assert) => {
|
||||
env = await makeTestEnv();
|
||||
await mount(UserMenu, target, { env });
|
||||
assert.containsOnce(target, "img.o_user_avatar");
|
||||
assert.containsOnce(target, "span.oe_topbar_name");
|
||||
assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron (test)");
|
||||
assert.containsOnce(target, "small.oe_topbar_name");
|
||||
assert.strictEqual(target.querySelector(".oe_topbar_name").textContent, "Sauron" + "test");
|
||||
});
|
||||
|
||||
QUnit.test("can execute the callback of settings", async (assert) => {
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
.o_edit_website_container {
|
||||
&:not(.o_translatable) {
|
||||
@include button-variant($o-brand-primary, $o-brand-primary);
|
||||
}
|
||||
margin: -$o-navbar-padding-v 0;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<templates xml:space="preserve">
|
||||
<t t-name="website.EditWebsiteSystray" owl="1">
|
||||
<div class="o_edit_website_container d-none d-md-block" t-att-class="{ o_translatable: translatable }">
|
||||
<a href="#" accesskey="a" t-on-click="startEdit" t-att-class="{ 'text-reset': !translatable }">
|
||||
<a href="#" class="btn btn-primary d-flex align-items-center h-100 rounded-0 border-0" accesskey="a" t-on-click="startEdit">
|
||||
<span t-if="translatable" class="fa fa-pencil me-2"/>
|
||||
<span t-else="" class="fa me-2" t-att-class="{ 'fa-refresh fa-spin': this.state.isLoading, 'fa-pencil': !this.state.isLoading }"/>
|
||||
<t t-esc="label"/>
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<div class="o_mobile_preview o_menu_systray_item d-none d-md-block"
|
||||
t-on-click="() => this.websiteService.context.isMobile = !this.websiteService.context.isMobile"
|
||||
t-att-class="{ 'o_mobile_preview_active': this.state.isMobile }">
|
||||
<a href="#" accesskey="v">
|
||||
<a href="#" accesskey="v" class="o_nav_entry">
|
||||
<span title="Mobile preview" role="img" aria-label="Mobile preview" class="fa fa-lg fa-mobile"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
|
||||
<t t-name="website.NewContentSystray" owl="1">
|
||||
<div class="o_menu_systray_item o_new_content_container d-none d-md-block" t-on-click="onClick">
|
||||
<a href="#" accesskey="c"><span class="fa fa-plus me-2"/>New</a>
|
||||
<a href="#" accesskey="c" class="o_nav_entry"><span class="fa fa-plus me-2"/>New</a>
|
||||
<NewContentModal t-if="websiteContext.showNewContentModal"/>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -55,7 +55,7 @@ class PublishSystray extends Component {
|
||||
}
|
||||
PublishSystray.template = xml`
|
||||
<div t-on-click="publishContent" class="o_menu_systray_item d-md-flex ms-auto" data-hotkey="p" t-att-data-processing="state.processing and 1">
|
||||
<a href="#">
|
||||
<a href="#" class="o_nav_entry">
|
||||
<Switch value="state.published" disabled="true" extraClasses="'mb-0 o_switch_danger_success'"/>
|
||||
<span class="d-none d-md-block ms-2" t-esc="this.label"/>
|
||||
</a>
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
.o_translate_website_container {
|
||||
@include button-variant($o-brand-primary, $o-brand-primary);
|
||||
margin: -$o-navbar-padding-v 0;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
<t t-name="website.TranslateWebsiteSystray" owl="1">
|
||||
<div class="o_translate_website_container d-none d-md-block">
|
||||
<a href="#" accesskey="t" t-on-click="startTranslate" class="text-reset">
|
||||
<a href="#" accesskey="t" t-on-click="startTranslate" class="btn btn-secondary d-flex align-items-center h-100 rounded-0 border-0">
|
||||
<span t-if="websiteContext.translation" class="fa fa-refresh fa-spin me-2"/>
|
||||
TRANSLATE
|
||||
</a>
|
||||
|
||||
@@ -21,7 +21,7 @@ registry.category("web_tour.tours").add('website_reset_password', {
|
||||
},
|
||||
{
|
||||
content: "check that we're logged in",
|
||||
trigger: '.oe_topbar_name:contains("The King")',
|
||||
trigger: '.o_user_menu .dropdown-toggle',
|
||||
run: function () {}
|
||||
},
|
||||
]});
|
||||
|
||||
@@ -8,7 +8,7 @@ registry.category("web_tour.tours").add('apikeys_tour_setup', {
|
||||
url: '/web?debug=1', // Needed as API key part is now only displayed in debug mode
|
||||
steps: [{
|
||||
content: 'Open user account menu',
|
||||
trigger: '.o_user_menu .oe_topbar_name',
|
||||
trigger: '.o_user_menu .dropdown-toggle',
|
||||
run: 'click',
|
||||
}, {
|
||||
content: "Open preferences / profile screen",
|
||||
@@ -67,7 +67,7 @@ registry.category("web_tour.tours").add('apikeys_tour_teardown', {
|
||||
url: '/web?debug=1', // Needed as API key part is now only displayed in debug mode
|
||||
steps: [{
|
||||
content: 'Open preferences',
|
||||
trigger: '.o_user_menu .oe_topbar_name',
|
||||
trigger: '.o_user_menu .dropdown-toggle',
|
||||
}, {
|
||||
trigger: '[data-menu=settings]',
|
||||
}, {
|
||||
@@ -87,7 +87,7 @@ registry.category("web_tour.tours").add('apikeys_tour_teardown', {
|
||||
trigger: 'button:contains(Confirm Password)',
|
||||
}, {
|
||||
content: 'Re-open preferences again',
|
||||
trigger: '.o_user_menu .oe_topbar_name',
|
||||
trigger: '.o_user_menu .dropdown-toggle',
|
||||
}, {
|
||||
trigger: '[data-menu=settings]',
|
||||
}, {
|
||||
|
||||
Reference in New Issue
Block a user