[REF] web, mail, hr, website, auth_totp, test_apikeys: top-menu design

task-2818586

Part-of: odoo/odoo#116641
This commit is contained in:
stefanorigano (SRI)
2023-05-12 22:59:13 +02:00
committed by Pierre Paridans
parent ef31306130
commit 79f57643ce
23 changed files with 150 additions and 106 deletions
+4 -4
View File
@@ -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&amp;field=avatar_128&amp;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 &amp;&amp; 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 &amp;&amp; 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]',
}, {