[REF] web, website: refine and simplify dropdown design
Prior to this commit, Bootstrap dropdowns, jQueryUI dropdowns and Odoo dropdowns where styled independently leading to visual inconsistencies and code repetition. This commit will customize and improve the Bootstrap design using as much as possible predefined variables. Then it will simply '@extend' owl/jQueryUI classes in order to visually match the bootstrap ones. Since dropdown classes are used in the top-menu (and its design is partially shared with frontend apps), this commit provides the necessary adaptations for this component as well.
This commit is contained in:
stefanorigano (SRI)
committed by
Aaron Bohy
Aaron Bohy
parent
b389d38a36
commit
1971bf3981
@@ -1,7 +1,7 @@
|
||||
<templates>
|
||||
<t t-name="GoogleDriveMenu" owl="1">
|
||||
<li>
|
||||
<ul class="o_embed_menu">
|
||||
<ul class="o_embed_menu p-0">
|
||||
<li t-foreach="props.items" t-as="gdriveItem" t-key="gdriveItem.id"
|
||||
role="menuitem"
|
||||
class="o_menu_item oe_share_gdoc_item dropdown-item"
|
||||
|
||||
@@ -123,7 +123,6 @@ This module provides the core of the Odoo Web Client.
|
||||
'web/static/src/legacy/scss/web_calendar.scss',
|
||||
'web/static/src/legacy/scss/search_view.scss',
|
||||
'web/static/src/legacy/scss/search_panel.scss',
|
||||
'web/static/src/legacy/scss/dropdown_menu.scss',
|
||||
'web/static/src/legacy/scss/data_export.scss',
|
||||
'base/static/src/scss/onboarding.scss',
|
||||
'web/static/src/legacy/scss/attachment_preview.scss',
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<Dropdown class="o_debug_manager"
|
||||
beforeOpen="beforeOpenDropdown"
|
||||
t-on-dropdown-item-selected.stop="onDropdownItemSelected"
|
||||
menuClass="'o_dropdown_menu_right'">
|
||||
togglerClass="'btn btn-link'">
|
||||
<span class="fa fa-bug"/>
|
||||
<t t-set-slot="menu">
|
||||
<t t-foreach="getElements()" t-as="element" t-key="element_index">
|
||||
|
||||
@@ -1,59 +1,114 @@
|
||||
.o_dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Menu
|
||||
ul.o_dropdown_menu {
|
||||
background-color: $white;
|
||||
border: 1px solid $gray-300;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 6px 12px -4px rgba($black, 0.25);
|
||||
color: $o-main-text-color;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
padding: 0.5rem 0;
|
||||
position: absolute;
|
||||
// = Default Boostrap Classes customizations
|
||||
// ----------------------------------------------------------------------------
|
||||
.dropdown-menu {
|
||||
min-width: 100%;
|
||||
z-index: 1000;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
background-clip: border-box;
|
||||
box-shadow: $o-dropdown-box-shadow;
|
||||
}
|
||||
|
||||
&.o_dropdown_menu_right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
.dropdown-item {
|
||||
&.active {
|
||||
position: relative;
|
||||
@extend .font-weight-bold;
|
||||
|
||||
&:before {
|
||||
@include o-position-absolute(0);
|
||||
transform: translate(-1.5em, 90%);
|
||||
font: .7em/1em FontAwesome;
|
||||
color: $primary;
|
||||
content: "\f00c";
|
||||
}
|
||||
}
|
||||
|
||||
&.selected { // Legacy
|
||||
@extend .dropdown-item.active;
|
||||
}
|
||||
|
||||
// Using <a> tags inside a '.dropdown-item' elements should not be necessary
|
||||
// since the class in usually applied to the <a> tag itself.
|
||||
// The following rules will handle custom layouts needs (eg '.o_user_menu').
|
||||
&:not(.disabled):not(:disabled) a:not(.disabled):not(:disabled) {
|
||||
@include o-hover-text-color($dropdown-link-color, $dropdown-link-hover-color);
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
&.disabled a, &:disabled a {
|
||||
@include o-hover-text-color(
|
||||
$dropdown-link-disabled-color,
|
||||
$dropdown-link-disabled-color);
|
||||
}
|
||||
}
|
||||
|
||||
// Toggler and items
|
||||
button.o_dropdown_toggler,
|
||||
li.o_dropdown_item {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
padding: 0 1.6rem;
|
||||
position: relative;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
.dropdown-header {
|
||||
@extend .font-weight-bold;
|
||||
padding-bottom: .1em;
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
&:not(:first-child) {
|
||||
margin-top: .3em;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.o_rtl {
|
||||
.dropdown-menu {
|
||||
@extend .dropdown-menu-right;
|
||||
}
|
||||
}
|
||||
|
||||
// = Extend Owl custom classes to visually match Boostrap ones
|
||||
// ----------------------------------------------------------------------------
|
||||
.o_dropdown {
|
||||
@extend .dropdown;
|
||||
|
||||
&_menu {
|
||||
@extend .dropdown-menu;
|
||||
|
||||
&.o_dropdown_menu_right {
|
||||
@extend .dropdown-menu-right;
|
||||
}
|
||||
}
|
||||
|
||||
&_item {
|
||||
@extend .dropdown-item;
|
||||
|
||||
&.o_dropdown_active {
|
||||
@extend .dropdown-item:hover;
|
||||
}
|
||||
}
|
||||
|
||||
&_menu_group {
|
||||
@extend .dropdown-header;
|
||||
}
|
||||
}
|
||||
|
||||
// = Owl components specific rules
|
||||
// -----------------------------------------------------------------------------
|
||||
.o_dropdown_item:not(.disabled):not(:disabled) {
|
||||
// Needed 'cause <DropdownItem> generate <li> html tags that for browsers are
|
||||
// normally not clickable.
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button.o_dropdown_toggler, button.o_dropdown_toggler_btn {
|
||||
> span {
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:focus:active,
|
||||
&.o_dropdown_active {
|
||||
&%--state-active {
|
||||
outline: none;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.o_dropdown_active {
|
||||
background-color: rgba($black, 0.08);
|
||||
@extend %--state-active;
|
||||
}
|
||||
|
||||
@include hover-focus-active() {
|
||||
@extend %--state-active;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<t t-slot="default" />
|
||||
</span>
|
||||
</button>
|
||||
<ul t-if="state.open" class="o_dropdown_menu" t-att-class="props.menuClass">
|
||||
<ul t-if="state.open" class="o_dropdown_menu d-block overflow-auto" t-att-class="props.menuClass">
|
||||
<t t-slot="menu" />
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -195,7 +195,7 @@ var GraphController = AbstractController.extend({
|
||||
// Update button classes accordingly to the current mode
|
||||
const buttons = actionsContainer.querySelectorAll('.o_dropdown_toggler_btn');
|
||||
for (const button of buttons) {
|
||||
button.classList.remove('o_dropdown_toggler_btn', 'btn-secondary');
|
||||
button.classList.remove('btn-secondary');
|
||||
if (this.isEmbedded) {
|
||||
button.classList.add('btn-outline-secondary');
|
||||
} else {
|
||||
|
||||
+13
-2
@@ -24,6 +24,12 @@ $black: #000 !default;
|
||||
$primary: $o-brand-primary !default;
|
||||
$secondary: $white !default;
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: false !default; // Disable pseudo element caret on .dropdown-toggle.
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
@@ -93,10 +99,15 @@ $dropdown-border-color: $gray-300 !default;
|
||||
|
||||
$dropdown-link-color: $o-main-text-color !default;
|
||||
$dropdown-link-hover-color: $gray-900 !default;
|
||||
$dropdown-link-hover-bg: $gray-200 !default;
|
||||
$dropdown-link-hover-bg: rgba($black, 0.08) !default;
|
||||
|
||||
$dropdown-link-active-color: $gray-900 !default;
|
||||
$dropdown-link-active-bg: $gray-300 !default;
|
||||
$dropdown-link-active-bg: transparent !default;
|
||||
|
||||
$dropdown-link-disabled-color: $o-main-color-muted !default;
|
||||
|
||||
$dropdown-item-padding-y: $o-dropdown-vpadding !default;
|
||||
$dropdown-item-padding-x: $o-dropdown-hpadding !default;
|
||||
|
||||
// Z-index master list
|
||||
|
||||
|
||||
@@ -1,32 +1,33 @@
|
||||
%dropdown-li-a-padding {
|
||||
padding: 3px $o-dropdown-hpadding;
|
||||
}
|
||||
// = jQueryUI dropdown adaptations
|
||||
// ----------------------------------------------------------------------------
|
||||
.ui-widget.ui-autocomplete {
|
||||
@extend .dropdown-menu;
|
||||
top: 0; // Compute initial position
|
||||
min-width: 0; // Compute initial width
|
||||
|
||||
.ui-autocomplete { // Copy style of bootstrap dropdown
|
||||
background-image: none;
|
||||
background-color: $dropdown-bg;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
font-size: $font-size-base;
|
||||
padding: 5px 0px;
|
||||
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
|
||||
// Needed because .ui-widget are rendered at a
|
||||
// lower stacking contex compared to modals.
|
||||
z-index: $zindex-modal + 1;
|
||||
|
||||
.ui-menu-item {
|
||||
padding: 0;
|
||||
> a {
|
||||
display: block;
|
||||
color: $dropdown-link-color;
|
||||
|
||||
@extend %dropdown-li-a-padding;
|
||||
> a {
|
||||
@extend .dropdown-item;
|
||||
|
||||
&.ui-state-active {
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
border: none;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-hover-color;
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_m2o_dropdown_option, &.o_m2o_start_typing {
|
||||
text-indent: 20px
|
||||
text-indent: $o-dropdown-hpadding * .5;
|
||||
}
|
||||
|
||||
&.o_m2o_start_typing {
|
||||
font-style: italic;
|
||||
cursor: default;
|
||||
@@ -36,56 +37,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: 0 6px 12px -4px rgba(black, 0.25);
|
||||
|
||||
.o_inline_dropdown {
|
||||
position: relative;
|
||||
|
||||
& > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
}
|
||||
&:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dropdown-menu-mixin {
|
||||
.show .dropdown-menu {
|
||||
> * {
|
||||
position: relative; // to allow absolute positionning inside the items
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
&:focus, &:active, &:focus:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@extend %dropdown-li-a-padding;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
@extend %dropdown-li-a-padding;
|
||||
color: $o-main-text-color;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include dropdown-menu-mixin;
|
||||
.navbar-nav {
|
||||
@include dropdown-menu-mixin;
|
||||
}
|
||||
|
||||
.o_rtl {
|
||||
.dropdown-menu {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,60 +1,12 @@
|
||||
.ui-autocomplete .ui-menu-item {
|
||||
> a.ui-state-active {
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
}
|
||||
&.o_m2o_dropdown_option > a {
|
||||
color: $o-brand-odoo;
|
||||
|
||||
&.ui-state-active {
|
||||
color: white;
|
||||
color: darken($o-brand-odoo, 10%);
|
||||
}
|
||||
}
|
||||
&.o_m2o_start_typing > a.ui-state-active {
|
||||
color: $dropdown-link-color;
|
||||
}
|
||||
}
|
||||
|
||||
.oe_dropdown, .oe_dropdown_toggle {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
.oe_dropdown_toggle {
|
||||
color: #2B2B2B;
|
||||
font-weight: normal;
|
||||
}
|
||||
.oe_dropdown_menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
margin: 0;
|
||||
border: 1px solid #afafb6;
|
||||
background: white;
|
||||
padding: 4px 0;
|
||||
min-width: 140px;
|
||||
text-align: left;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.3);
|
||||
&.oe_opened {
|
||||
display: block;
|
||||
}
|
||||
> li {
|
||||
list-style-type: none;
|
||||
float: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 2px 8px;
|
||||
&:hover {
|
||||
background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
|
||||
box-shadow: none;
|
||||
}
|
||||
> a {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
color: #4c4c4c;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
.o_dropdown_menu {
|
||||
> .dropdown-divider:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
min-width: 150px;
|
||||
max-height: calc(100vh - 140px); // FIXME
|
||||
overflow: auto;
|
||||
|
||||
.o_menu_item {
|
||||
position: relative;
|
||||
|
||||
> .dropdown-item {
|
||||
color: $o-main-text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($o-main-text-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
color: $o-main-text-color;
|
||||
|
||||
&:hover {
|
||||
color: darken($o-main-text-color, 10%);
|
||||
}
|
||||
|
||||
&.selected { // TODO why not using standard BS4 "active" class ?
|
||||
color: darken($o-main-text-color, 10%);
|
||||
font-weight: bold;
|
||||
|
||||
&:before {
|
||||
font-family: FontAwesome;
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
content: "\f00c";
|
||||
}
|
||||
}
|
||||
.o_trash_button {
|
||||
padding-left: 8px;
|
||||
@include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
|
||||
}
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
|
||||
.o_kanban_manage_toggle_button {
|
||||
@include o-kanban-dropdown($o-kanban-dashboard-hpadding);
|
||||
@include o-position-absolute(0, 0);
|
||||
height: $o-kanban-manage-toggle-height;
|
||||
}
|
||||
|
||||
@@ -199,15 +200,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_favorite, .o_kanban_manage_toggle_button {
|
||||
@include o-position-absolute(0, 0);
|
||||
padding: $o-kanban-record-margin;
|
||||
}
|
||||
|
||||
.o_favorite {
|
||||
top: 3px;
|
||||
left: 0;
|
||||
right: auto;
|
||||
@include o-position-absolute(3px, $left: 0);
|
||||
padding: $o-kanban-record-margin;
|
||||
}
|
||||
|
||||
// Emphasize records' colors when necessary
|
||||
|
||||
@@ -251,7 +251,6 @@
|
||||
}
|
||||
.dropdown-menu {
|
||||
@include o-kanban-dropdown-menu;
|
||||
right: (-$o-kanban-inside-hgutter - 1);
|
||||
min-width: 11rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,171 +1,193 @@
|
||||
body.o_is_superuser .o_menu_systray {
|
||||
background: repeating-linear-gradient(
|
||||
135deg,
|
||||
#d9b904, #d9b904 10px,
|
||||
#373435 10px, #373435 20px
|
||||
);
|
||||
border-bottom-left-radius: 20px;
|
||||
|
||||
// This file is included in both backend and frontend bundles.
|
||||
// Bundle-specific rules can be found in 'webclient/navbar.scss' (backend) and
|
||||
// 'website.ui.scss' (frontend).
|
||||
|
||||
// = Main Navbar
|
||||
// ============================================================================
|
||||
.o_main_navbar {
|
||||
background-color: $o-brand-odoo;
|
||||
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
display: grid;
|
||||
height: $o-navbar-height;
|
||||
gap: 0px 0px;
|
||||
grid-template-areas: "apps brand sections systray";
|
||||
grid-template-columns:
|
||||
minmax($o-navbar-height, max-content)
|
||||
max-content
|
||||
minmax($o-navbar-height, 1fr)
|
||||
fit-content(100%);
|
||||
grid-template-rows: $o-navbar-height;
|
||||
min-width: min-content;
|
||||
|
||||
// = Scoped Variables
|
||||
//
|
||||
// Variables scoped within the current context that mirror backend's
|
||||
// boostrap values.
|
||||
// --------------------------------------------------------------------------
|
||||
$-backend-font-weight-bold: 500;
|
||||
$-backend-entry-hover-bg: rgba(0, 0, 0, .08);
|
||||
$-backend-h3-font-size: 17px;
|
||||
$-backend-h2-font-size: 20px;
|
||||
$-backend-entry-hpadding: 20px;
|
||||
$-backend-entry-vpadding: 3px;
|
||||
|
||||
// = % PseudoClasses
|
||||
//
|
||||
// Regroup rules shared across different elements
|
||||
// --------------------------------------------------------------------------
|
||||
%-main-navbar-entry-base {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
height: $o-navbar-height;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
@include o-hover-text-color(rgba($white, .9), $white);
|
||||
}
|
||||
|
||||
%-main-navbar-entry-padding {
|
||||
padding: 0 $o-horizontal-padding;
|
||||
}
|
||||
|
||||
%-main-navbar-entry-bg-hover {
|
||||
@include hover() {
|
||||
background-color: $-backend-entry-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
%-main-navbar-entry-active {
|
||||
@include plain-hover-focus() {
|
||||
background: $-backend-entry-hover-bg;
|
||||
outline: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
outline-offset: -1px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// = Reset browsers defaults
|
||||
// --------------------------------------------------------------------------
|
||||
> ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
// = Owl <Dropdown> components
|
||||
// --------------------------------------------------------------------------
|
||||
.o_dropdown .o_dropdown_toggler {
|
||||
@extend %-main-navbar-entry-base;
|
||||
@extend %-main-navbar-entry-padding;
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
border: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
&, &:focus {
|
||||
background: none;
|
||||
}
|
||||
|
||||
&.o_dropdown_active {
|
||||
@extend %-main-navbar-entry-active;
|
||||
}
|
||||
}
|
||||
|
||||
ul.o_dropdown_menu {
|
||||
margin-top: 0;
|
||||
border-top: 0;
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
|
||||
.o_dropdown_menu_group_entry {
|
||||
padding-left: $o-dropdown-hpadding * 1.5;
|
||||
|
||||
+ .o_dropdown_item:not(.o_dropdown_menu_group_entry) {
|
||||
margin-top: .8em;
|
||||
}
|
||||
}
|
||||
|
||||
// = Legacy elements adaptations
|
||||
// --------------------------------------------------------------------------
|
||||
> ul {
|
||||
> li > a, > li > label:only-child, .o_dropdown_toggler {
|
||||
padding: 0 $dropdown-item-padding-x * .5;
|
||||
}
|
||||
|
||||
> li {
|
||||
> a, > label {
|
||||
&:hover {
|
||||
background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
|
||||
}
|
||||
}
|
||||
&, > a {
|
||||
@extend %-main-navbar-entry-base;
|
||||
}
|
||||
|
||||
&.show > a {
|
||||
@extend %-main-navbar-entry-active;
|
||||
}
|
||||
|
||||
> a {
|
||||
@extend %-main-navbar-entry-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// = Main Navbar Elements
|
||||
// --------------------------------------------------------------------------
|
||||
.o_menu_toggle, .o_navbar_apps_menu {
|
||||
@extend %-main-navbar-entry-base;
|
||||
font-size: $-backend-h3-font-size;
|
||||
grid-area: apps;
|
||||
}
|
||||
|
||||
.o_menu_toggle { // Enterprise-legacy only
|
||||
@extend %-main-navbar-entry-padding;
|
||||
}
|
||||
|
||||
.o_menu_brand {
|
||||
@extend %-main-navbar-entry-base;
|
||||
@extend %-main-navbar-entry-padding;
|
||||
padding-left: 0;
|
||||
grid-area: brand;
|
||||
font-size: $-backend-h2-font-size;
|
||||
font-weight: $-backend-font-weight-bold;
|
||||
|
||||
@include hover() {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.o_menu_sections {
|
||||
display: flex;
|
||||
grid-area: sections;
|
||||
|
||||
> .o_dropdown_item {
|
||||
@extend %-main-navbar-entry-padding;
|
||||
}
|
||||
|
||||
.show .dropdown-toggle {
|
||||
background-color: fade_out($o-navbar-inverse-link-hover-bg, 0.5);
|
||||
.o_more_dropdown_section_group {
|
||||
padding: $-backend-entry-vpadding $-backend-entry-hpadding;
|
||||
margin-top: .8em;
|
||||
|
||||
&:first-child {
|
||||
margin-top: $dropdown-padding-y * -1;
|
||||
padding-top: $dropdown-padding-y * 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_menu_systray {
|
||||
grid-area: systray;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.o_main_navbar {
|
||||
position: relative;
|
||||
height: $o-navbar-height;
|
||||
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
|
||||
// = SuperUser Design
|
||||
// ============================================================================
|
||||
body.o_is_superuser .o_menu_systray {
|
||||
position: relative;
|
||||
background: repeating-linear-gradient(135deg, #d9b904, #d9b904 10px, #373435 10px, #373435 20px);
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
@include o-position-absolute(2px, 2px, 2px, 2px);
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
|
||||
> a, > button {
|
||||
float: left;
|
||||
height: $o-navbar-height;
|
||||
border: none;
|
||||
padding: 0 $o-horizontal-padding - 4px 0 $o-horizontal-padding;
|
||||
line-height: $o-navbar-height;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
|
||||
font-size: 18px;
|
||||
user-select: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $o-navbar-inverse-link-hover-bg;
|
||||
color: inherit;
|
||||
}
|
||||
&:focus, &:active, &:focus:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.o_app {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .o_menu_brand {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 35px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
line-height: $o-navbar-height;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
> .o_menu_toggle {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
> ul {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
|
||||
&:focus, &:active, &:focus:active {
|
||||
outline: none;
|
||||
}
|
||||
&, &:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
> a, > label {
|
||||
height: $o-navbar-height;
|
||||
padding: 0 10px;
|
||||
color: white;
|
||||
line-height: $o-navbar-height;
|
||||
|
||||
&:hover {
|
||||
background-color: $o-navbar-inverse-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_extra_menu_items {
|
||||
> a {
|
||||
width: $o-navbar-height;
|
||||
text-align: center;
|
||||
}
|
||||
&.show > ul {
|
||||
padding: 0;
|
||||
|
||||
> li {
|
||||
> a {
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
border-bottom: 1px solid $o-brand-lightsecondary;
|
||||
|
||||
&.dropdown-toggle {
|
||||
background-color: lighten($o-brand-odoo, 15%);
|
||||
pointer-events: none; // hack to prevent clicking on it because dropdown always opened
|
||||
}
|
||||
}
|
||||
> .dropdown-menu { // remove dropdown-menu default style as it is nested in another one
|
||||
position: static;
|
||||
float: none;
|
||||
display: block;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.o_menu_systray {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
max-height: 90vh; // the dropdown should not overstep the viewport
|
||||
min-width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 0;
|
||||
|
||||
@for $index from 3 through 5 {
|
||||
.o_menu_header_lvl_#{$index}, .o_menu_entry_lvl_#{$index} {
|
||||
padding-left: $o-dropdown-hpadding + ($index - 2)*12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show .dropdown-toggle {
|
||||
background-color: $o-navbar-inverse-link-hover-bg;
|
||||
}
|
||||
.o_user_menu {
|
||||
margin-left: 6px;
|
||||
|
||||
> a {
|
||||
padding-right: $o-horizontal-padding;
|
||||
}
|
||||
|
||||
.oe_topbar_avatar {
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
object-fit: cover;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,90 +1,101 @@
|
||||
// Achieve a top-menu design visually similar to the backend's 'burger' one.
|
||||
|
||||
.o_main_navbar {
|
||||
.o_app {
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .o_menu_brand {
|
||||
@include media-breakpoint-down(sm) {
|
||||
float: none;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
transition: height 200ms linear 0s;
|
||||
|
||||
position: relative;
|
||||
height: $o-navbar-height;
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
float: none;
|
||||
.dropdown-backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_menu_sections {
|
||||
width: 100%;
|
||||
display: none;
|
||||
|
||||
.dropdown-menu.show {
|
||||
position: static;
|
||||
float: none;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
overflow: visible;
|
||||
|
||||
> .dropdown-item {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.o_menu_systray {
|
||||
@include o-position-absolute(0px, $o-navbar-height, auto, $o-navbar-height);
|
||||
height: $o-navbar-height;
|
||||
text-align: right;
|
||||
|
||||
> li {
|
||||
display: inline-block;
|
||||
|
||||
.dropdown-menu.show {
|
||||
@include o-position-absolute($o-navbar-height, 0, 0, 0);
|
||||
position: fixed;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.o_user_menu .oe_topbar_name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// = Mobile Main Navbar
|
||||
// ============================================================================
|
||||
@include media-breakpoint-down(sm) {
|
||||
body.o_mobile_menu_opened > .o_main_navbar {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
.o_menu_sections {
|
||||
#oe_main_menu_navbar.o_main_navbar {
|
||||
|
||||
// = Scoped Variables
|
||||
//
|
||||
// Variables scopend within the current context that mirror backend's
|
||||
// boostrap values.
|
||||
// --------------------------------------------------------------------
|
||||
$-bg: darken($o-brand-odoo, 10%);
|
||||
$-color: color-yiq($-bg);
|
||||
$-font-size-base: 16px;
|
||||
$-font-size-lg: 18px;
|
||||
$-entry-hover-bg: rgba(invert($-color), .08);
|
||||
|
||||
// = Invalidate top-menu native 'grid' layout
|
||||
// --------------------------------------------------------------------
|
||||
&, .o_menu_sections li, .dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.o_menu_sections li, .dropdown-menu.show {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// = Design
|
||||
// --------------------------------------------------------------------
|
||||
.o_mobile_menu_toggle,
|
||||
.dropdown-toggle,
|
||||
.dropdown-item,
|
||||
.o_menu_sections > .css_published {
|
||||
height: $o-navbar-height;
|
||||
@include o-hover-text-color(rgba($-color, .9), $-color);
|
||||
}
|
||||
|
||||
.o_menu_sections {
|
||||
@include o-position-absolute($o-navbar-height, 0, 0, 0);
|
||||
display: none;
|
||||
overflow: auto;
|
||||
background-color: $-bg;
|
||||
|
||||
> li > a {
|
||||
font-size: $-font-size-lg;
|
||||
}
|
||||
|
||||
li.css_published:hover {
|
||||
background-color: $-entry-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-top-color: rgba($-color, .06);
|
||||
margin-left: $dropdown-item-padding-x;
|
||||
margin-right: $dropdown-item-padding-x;
|
||||
}
|
||||
|
||||
.dropdown.show {
|
||||
&, .dropdown-toggle, .dropdown-item, .dropdown-menu {
|
||||
background-color: darken($-bg, 5%);
|
||||
}
|
||||
|
||||
> .dropdown-toggle {
|
||||
@include o-hover-text-color($-color, $-color);
|
||||
outline: 0;
|
||||
box-shadow: inset 0 1px 0 rgba(invert($-color), .1);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
padding-top: 0;
|
||||
box-shadow: inset 0 -1px 0 rgba($-color, .1);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $-font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
// = Toggle Menu (open)
|
||||
// --------------------------------------------------------------------
|
||||
body.o_mobile_menu_opened > & {
|
||||
height: 100%;
|
||||
|
||||
.o_menu_sections {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.o_mobile_menu_toggle:before {
|
||||
content: "\f00d"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -71,6 +71,8 @@ $o-form-spacing-unit: 5px !default;
|
||||
$o-horizontal-padding: 16px !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;
|
||||
|
||||
|
||||
@@ -80,89 +80,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.o_search_options .o_dropdown_toggler_btn:first-child {
|
||||
// apply the padding to the first element so that when the `favorites` menu goes under
|
||||
// the `filters` menu, they're still aligned
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
// Dropdowns
|
||||
.o_search_options .o_dropdown {
|
||||
color: $o-main-text-color;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
user-select: none; // Prevent text selection when toggling the dropdowns
|
||||
white-space: nowrap; // prevent the arrow from going under the dropdown when too little space
|
||||
|
||||
.o_dropdown_title {
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
|
||||
.o_dropdown_caret {
|
||||
font-size: 12px;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.show {
|
||||
|
||||
.o_dropdown_toggler_btn {
|
||||
color: darken($o-main-text-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.o_dropdown_menu {
|
||||
|
||||
ul.o_embed_menu {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.dropdown-item {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.o_item_description {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.o_icon_right {
|
||||
@include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
|
||||
}
|
||||
|
||||
.o_icon_right + .o_icon_right {
|
||||
@include o-position-absolute($right: $dropdown-item-padding-x * 1.25);
|
||||
}
|
||||
}
|
||||
|
||||
.o_menu_item_options {
|
||||
list-style: none;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Open and closed carets in dropdowns
|
||||
.o_closed_menu {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
margin-top: (-$caret-width);
|
||||
@include o-caret-right;
|
||||
@include o-position-absolute($top: 50%, $left: 10px);
|
||||
}
|
||||
}
|
||||
.o_open_menu {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
margin-top: (-$caret-width);
|
||||
@include o-caret-down;
|
||||
@include o-position-absolute($top: 50%, $left: 10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Filter menu
|
||||
.o_filter_menu {
|
||||
|
||||
|
||||
@@ -314,29 +314,29 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
@mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
|
||||
margin: -1px -1px 1px;
|
||||
padding: $padding-base/2 $padding-base;
|
||||
border: none;
|
||||
border-left: 1px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
vertical-align: top;
|
||||
color: $body-color;
|
||||
@include o-hover-text-color($body-color, $headings-color);
|
||||
|
||||
&:hover {
|
||||
color: $headings-color;
|
||||
}
|
||||
&:focus, &:active, &:focus:active {
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@mixin o-kanban-dropdown-open {
|
||||
position: relative;
|
||||
background: white;
|
||||
border-color: gray('400');
|
||||
border-color: $border-color;
|
||||
z-index: $zindex-dropdown + 1;
|
||||
}
|
||||
@mixin o-kanban-dropdown-menu {
|
||||
@include o-position-absolute($right: -1px);
|
||||
margin-top: -1px;
|
||||
border-color: gray('400');
|
||||
margin-top: -2px;
|
||||
border-color: $border-color;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@mixin o-kanban-colorpicker {
|
||||
max-width: 150px;
|
||||
@@ -383,16 +383,11 @@
|
||||
padding: 0;
|
||||
|
||||
> a {
|
||||
@extend .dropdown-item;
|
||||
margin: auto auto auto (-$link-padding-gap);
|
||||
padding: 3px $link-padding-gap;
|
||||
color: $body-color;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: gray('300');
|
||||
color: $headings-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@@ -154,15 +154,16 @@
|
||||
<div class="btn-group o_dropdown" t-att-class="{ show: state.open }">
|
||||
<button type="button"
|
||||
class="o_dropdown_toggler_btn btn btn-secondary"
|
||||
t-attf-class="{{ icon || displayCaret || displayChevron ? 'd-flex align-items-center ' : ''}} {{ displayCaret || displayChevron ? 'pr-1 ' : ''}}"
|
||||
t-att-aria-expanded="state.open ? 'true' : 'false'"
|
||||
tabindex="-1"
|
||||
t-on-click="state.open = !state.open"
|
||||
t-on-keydown="_onButtonKeydown"
|
||||
>
|
||||
<i t-if="icon" t-att-class="icon"/>
|
||||
<i t-if="icon" t-att-class="icon + ' small mr-1'"/>
|
||||
<span class="o_dropdown_title" t-esc="title"/>
|
||||
<i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
|
||||
<i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
|
||||
<i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-fw fa-caret-{{ state.open ? 'down' : 'right' }}"/>
|
||||
<i t-elif="displayChevron" t-attf-class="o_dropdown_chevron fa fa-fw ml-auto fa-chevron-{{ state.open ? 'down' : 'right' }}"/>
|
||||
</button>
|
||||
<ul t-if="state.open" t-attf-class="o_dropdown_menu dropdown-menu {{ dropdownMenuAlignClass }} show" role="menu"
|
||||
t-on-item-selected="_onItemSelected"
|
||||
@@ -221,7 +222,7 @@
|
||||
<t t-name="web.DropdownMenuItem" owl="1">
|
||||
<li class="o_menu_item" role="menuitem" t-on-keydown="_onKeydown">
|
||||
<t t-if="canBeOpened">
|
||||
<a class="o_menu_item_parent dropdown-item"
|
||||
<a class="o_menu_item_parent dropdown-item d-flex align-items-center justify-content-between"
|
||||
t-att-class="{ selected: props.isActive }"
|
||||
t-att-aria-checked="props.isActive ? 'true' : 'false'"
|
||||
role="menuitemcheckbox"
|
||||
@@ -230,9 +231,9 @@
|
||||
t-on-click.prevent="state.open = !state.open"
|
||||
>
|
||||
<t t-esc="props.description"/>
|
||||
<i t-attf-class="o_icon_right fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
|
||||
<i t-attf-class="o_icon_right fa fa-fw mr-n4 fa-caret-{{ state.open ? 'down' : 'right' }}"/>
|
||||
</a>
|
||||
<ul t-if="state.open" class="o_menu_item_options">
|
||||
<ul t-if="state.open" class="o_menu_item_options pb-2 list-unstyled">
|
||||
<t t-set="currentGroup" t-value="null"/>
|
||||
<t t-foreach="props.options" t-as="option" t-key="option_index">
|
||||
<li t-if="currentGroup !== null and currentGroup !== option.groupNumber"
|
||||
|
||||
@@ -1,98 +1,12 @@
|
||||
.o_main_navbar {
|
||||
background-color: $o-brand-odoo;
|
||||
border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
|
||||
color: $white;
|
||||
display: grid;
|
||||
height: $o-navbar-height;
|
||||
gap: 0px 0px;
|
||||
grid-template-areas: "apps brand sections systray";
|
||||
grid-template-columns:
|
||||
$o-navbar-height
|
||||
max-content
|
||||
minmax($o-navbar-height, 1fr)
|
||||
fit-content(100%);
|
||||
grid-template-rows: $o-navbar-height;
|
||||
min-width: min-content;
|
||||
// = Main Navbar
|
||||
//
|
||||
|
||||
.o_dropdown_toggler > * {
|
||||
line-height: $o-navbar-height;
|
||||
}
|
||||
// The MainNavbar design is shared with the frontent and, at the current state,
|
||||
// backend owl components coexist with legacy ones in the backend too.
|
||||
// In order to limit unnecessary code repetition and fragmantation, all main
|
||||
// design rules are located in legacy/scss/navbar.scss.
|
||||
// Moreover, if a new design rule is needed for the backend *only*, it can be
|
||||
// added here.
|
||||
// ============================================================================
|
||||
|
||||
.o_dropdown_toggler:hover,
|
||||
.o_menu_brand:hover,
|
||||
.o_dropdown_toggler.o_dropdown_active {
|
||||
background-color: darken($o-brand-odoo, 10%);
|
||||
}
|
||||
|
||||
.o_dropdown_item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
padding-top: 0.4rem;
|
||||
padding-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.o_dropdown_menu_group {
|
||||
color: $o-main-text-color;
|
||||
line-height: initial;
|
||||
padding: $o-horizontal-padding/2 0;
|
||||
padding-left: $o-dropdown-hpadding;
|
||||
}
|
||||
|
||||
.o_dropdown_menu_group_entry {
|
||||
padding-left: $o-dropdown-hpadding * 1.5;
|
||||
}
|
||||
|
||||
// ------------------------------------
|
||||
// ------- Main Navbar Elements -------
|
||||
// ------------------------------------
|
||||
// Apps Menu
|
||||
.o_navbar_apps_menu {
|
||||
grid-area: apps;
|
||||
|
||||
// Button / toggler to open apps menu
|
||||
button.o_dropdown_toggler {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Brand (Current App Name)
|
||||
.o_menu_brand {
|
||||
grid-area: brand;
|
||||
cursor: pointer;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
margin-right: 2rem;
|
||||
padding: 0 $o-horizontal-padding;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Sections (Current App Menu)
|
||||
.o_menu_sections {
|
||||
grid-area: sections;
|
||||
display: flex;
|
||||
|
||||
.o_menu_sections_more .o_dropdown_menu {
|
||||
padding-top: 0;
|
||||
|
||||
.o_more_dropdown_section {
|
||||
background-color: $o-brand-odoo;
|
||||
border-bottom: 1px solid $o-brand-lightsecondary;
|
||||
color: $white;
|
||||
line-height: initial;
|
||||
padding: 0.25rem 1.67rem;
|
||||
|
||||
&.o_more_dropdown_section_group {
|
||||
background-color: lighten($o-brand-odoo, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Systray
|
||||
.o_menu_systray {
|
||||
grid-area: systray;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
// .o_main_navbar {}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div
|
||||
class="o_more_dropdown_section o_more_dropdown_section_group"
|
||||
class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
|
||||
t-esc="section.name" />
|
||||
<t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
|
||||
<t t-set="items" t-value="section.childrenTree" />
|
||||
|
||||
@@ -2,20 +2,18 @@
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="web.SwitchCompanyMenu" owl="1">
|
||||
<li class="o_switch_company_menu">
|
||||
<Dropdown>
|
||||
<span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
|
||||
<t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
|
||||
</span>
|
||||
<t t-set-slot="menu">
|
||||
<t t-foreach="user.allowed_companies" t-as="company_id">
|
||||
<t t-call="web.SwitchCompanyItem">
|
||||
<t t-set="company" t-value="user.allowed_companies[company_id]" />
|
||||
</t>
|
||||
<Dropdown class="o_switch_company_menu">
|
||||
<span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
|
||||
<t t-if="!env.isSmall"><t t-esc="user.current_company.name"/></t>
|
||||
</span>
|
||||
<t t-set-slot="menu">
|
||||
<t t-foreach="user.allowed_companies" t-as="company_id">
|
||||
<t t-call="web.SwitchCompanyItem">
|
||||
<t t-set="company" t-value="user.allowed_companies[company_id]" />
|
||||
</t>
|
||||
</t>
|
||||
</Dropdown>
|
||||
</li>
|
||||
</t>
|
||||
</Dropdown>
|
||||
</t>
|
||||
|
||||
|
||||
|
||||
@@ -2696,7 +2696,12 @@ QUnit.module('Views', {
|
||||
View: PivotView,
|
||||
model: "partner",
|
||||
data: this.data,
|
||||
arch: `<pivot/>`,
|
||||
// have at least a measure to have a separator in the Measures dropdown:
|
||||
//
|
||||
// Foo
|
||||
// -----
|
||||
// Count
|
||||
arch: `<pivot><field name="foo" type="measure"/></pivot>`,
|
||||
});
|
||||
|
||||
// open the "Measures" menu
|
||||
|
||||
@@ -36,7 +36,7 @@ QUnit.module("SwitchCompanyMenu", (hooks) => {
|
||||
const scMenu = await mount(SwitchCompanyMenu, { env, target });
|
||||
registerCleanup(() => scMenu.destroy());
|
||||
|
||||
assert.strictEqual(scMenu.el.tagName.toUpperCase(), "LI");
|
||||
assert.strictEqual(scMenu.el.tagName.toUpperCase(), "DIV");
|
||||
assert.hasClass(scMenu.el, "o_switch_company_menu");
|
||||
assert.strictEqual(scMenu.el.textContent, "Hermit");
|
||||
|
||||
|
||||
@@ -86,10 +86,17 @@ body.o_connected_user {
|
||||
text-decoration: none;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border-top: 0;
|
||||
margin-top: 0;
|
||||
background-clip: border-box;
|
||||
font-size: inherit;
|
||||
border-radius: 0;
|
||||
color: $dropdown-link-active-color;
|
||||
}
|
||||
#oe_applications .dropdown-menu {
|
||||
// Compensate #oe_applications's padding
|
||||
margin-left: $dropdown-item-padding-x * -0.5;
|
||||
}
|
||||
|
||||
.o_menu_sections {
|
||||
.o_mobile_preview a {
|
||||
@@ -99,8 +106,6 @@ body.o_connected_user {
|
||||
}
|
||||
.o_menu_systray {
|
||||
> li > a {
|
||||
padding: 0 $grid-gutter-width/2;
|
||||
|
||||
&.css_edit_dynamic{
|
||||
padding: 0 $grid-gutter-width/4;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<template id="website_publisher" name="Website Publisher">
|
||||
<t groups="website.group_website_publisher" t-if="'website_published' in main_object.fields_get() and ('can_publish' not in main_object.fields_get() or main_object.can_publish)">
|
||||
<li t-attf-class="js_publish_management #{extra_classes} #{main_object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-description="env['ir.model']._get(main_object._name).display_name" t-att-data-id="main_object.id" t-att-data-object="main_object._name" t-att-data-controller="publish_controller">
|
||||
<label class="o_switch o_switch_danger js_publish_btn" t-att-accesskey="desktop_navbar and 'p'">
|
||||
<label class="o_switch o_switch_danger js_publish_btn m-0" t-att-accesskey="desktop_navbar and 'p'">
|
||||
<input type="checkbox" t-att-checked="main_object.website_published"/>
|
||||
<span/>
|
||||
<span class="css_publish">Unpublished</span>
|
||||
@@ -34,7 +34,7 @@
|
||||
<ul id="oe_applications">
|
||||
<li class="dropdown active">
|
||||
<a class="dropdown-toggle full" data-toggle="dropdown" href="#" accesskey="h">
|
||||
<i class="fa fa-th-large"/> WEBSITE
|
||||
<i class="fa fa-th-large mr-2"/> WEBSITE
|
||||
</a>
|
||||
<div class="dropdown-menu" role="menu">
|
||||
<!-- This will be populated on hover in JS -->
|
||||
@@ -42,7 +42,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<button type="button" class="fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
|
||||
<button type="button" class="btn fa fa-bars float-right d-block d-md-none o_mobile_menu_toggle" aria-label="Menu" title="Menu"/>
|
||||
|
||||
<ul class="o_menu_sections" groups="website.group_website_designer">
|
||||
<!-- Content -->
|
||||
@@ -71,11 +71,11 @@
|
||||
</div>
|
||||
</li>
|
||||
<t t-call="website.website_publisher">
|
||||
<t t-set="extra_classes" t-translation="off">d-block d-sm-block d-md-none</t>
|
||||
<t t-set="extra_classes" t-translation="off">d-flex d-sm-flex d-md-none</t>
|
||||
</t>
|
||||
</ul>
|
||||
|
||||
<ul class="o_menu_systray d-none d-md-block" groups="website.group_website_publisher">
|
||||
<ul class="o_menu_systray d-none d-md-flex" groups="website.group_website_publisher">
|
||||
<t t-call="website.website_publisher">
|
||||
<t t-set="extra_classes" t-value=""/>
|
||||
<t t-set="desktop_navbar" t-value="true"/>
|
||||
|
||||
Reference in New Issue
Block a user