From 3520c3964835b702f4e2531b60185cb9fcc416a0 Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Tue, 12 Apr 2022 08:02:42 +0000 Subject: [PATCH 1/3] [IMP] web: `BurgerMenu`, increase indentation space According to the SCSS coding guidelines[1], the indentation must always be 4 spaces. Prior this commit the indentation space was set to 2. After this commit this space is set to 4. [1] https://github.com/odoo/odoo/wiki/SCSS-coding-guidelines task-2812594 Part-of: odoo/odoo#88073 --- .../webclient/burger_menu/burger_menu.scss | 290 +++++++++--------- 1 file changed, 145 insertions(+), 145 deletions(-) diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss index ce720f267cc..9ff6972c192 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss @@ -3,159 +3,159 @@ //------------------------------------------------------------------------------ .o_burger_menu { - top: 0; - bottom: 0; - left: 100%; - width: 90%; - z-index: $zindex-tooltip + 10; - transition: transform .2s ease; + top: 0; + bottom: 0; + left: 100%; + width: 90%; + z-index: $zindex-tooltip + 10; + transition: transform .2s ease; - // Menu Toggle-Animations - transform: translateX(-100%); + // Menu Toggle-Animations + transform: translateX(-100%); - &.burgerslide-enter, &.burgerslide-leave { - transform: translateX(0); - } - - // Scoped pseudo classes - %-main-entries-size { - padding-top: 0; - padding-bottom: 0; - min-height: $o-navbar-height-xs; - font-size: $font-size-lg; - line-height: $o-navbar-height-xs; - } - - // Scoped variables - $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode') - $-base-color: color-contrast($-base-bg); - - // ====== Top-Bar - .o_burger_menu_topbar { - flex: 0 0 $o-navbar-height-xs; - background: $-base-bg; - color: $-base-color; - @extend %-main-entries-size; - - .dropdown-toggle, .o_burger_menu_close { - padding: 0 $o-horizontal-padding; + &.burgerslide-enter, &.burgerslide-leave { + transform: translateX(0); } - .o_burger_menu_close { - font-size: $h2-font-size; - } - - .dropdown-toggle.active { - background: $o-view-background-color; - color: $o-main-headings-color; - } - } - - // ====== Menu content container (both App's and User's entries) - .o_burger_menu_content { - background: $o-view-background-color; - - &.o_burger_menu_dark { - background-color: darken($-base-bg, 5%); - } - - // Menu entries size and layout - .dropdown-item, .dropdown-toggle { - &, > span { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - } - - > span { + // Scoped pseudo classes + %-main-entries-size { + padding-top: 0; + padding-bottom: 0; min-height: $o-navbar-height-xs; - padding-left: $o-horizontal-padding; + font-size: $font-size-lg; + line-height: $o-navbar-height-xs; + } - .fa { - padding: $o-horizontal-padding; - font-size: $font-size-sm; + // Scoped variables + $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode') + $-base-color: color-contrast($-base-bg); + + // ====== Top-Bar + .o_burger_menu_topbar { + flex: 0 0 $o-navbar-height-xs; + background: $-base-bg; + color: $-base-color; + @extend %-main-entries-size; + + .dropdown-toggle, .o_burger_menu_close { + padding: 0 $o-horizontal-padding; } - } - } - // Handle menu text-indentation - .dropdown-menu { - margin-top: 0; - text-indent: 1em; - width: 100%; - max-height: none; - - .dropdown-toggle { - text-indent: 1em; - } - - .dropdown-menu { - text-indent: 2em; - } - - .dropdown-item:last-child { - padding-bottom: 1em; - } - } - - // First menu level entries are always bigger - .o_user_menu_mobile > .dropdown-item, - .o_menu_sections > .dropdown-item > span, - .o_menu_sections > .o_burger_menu_section > .dropdown-toggle > span { - @extend %-main-entries-size; - } - - // ====== 'App menu' spefic design rules - .o_burger_menu_app { - - // Reset inner components - .dropdown-menu, .dropdown-item, .dropdown-toggle { - padding: 0; - border: 0; - position: relative; - background-color: initial; - - &:after { - display: none; // Remove inner dropdown caret + .o_burger_menu_close { + font-size: $h2-font-size; } - } - .dropdown-item span, .dropdown-toggle { - @include o-hover-text-color(rgba($-base-color, .8), $-base-color); - } - - .o_dropdown_active > span { - box-shadow: inset 0 1px 0 rgba(invert($-base-color), .1); - } - - .o_dropdown_active, .dropdown-menu { - background-color: rgba(invert($-base-color), .1); - } - - .dropdown-menu { - box-shadow: inset 0 -1px 0 rgba($-base-color, .1); - } + .dropdown-toggle.active { + background: $o-view-background-color; + color: $o-main-headings-color; + } } - // ====== 'User Menu' spefic design rules - .o_user_menu_mobile .dropdown-divider { - margin-left: $dropdown-item-padding-x; - margin-right: $dropdown-item-padding-x; + // ====== Menu content container (both App's and User's entries) + .o_burger_menu_content { + background: $o-view-background-color; + + &.o_burger_menu_dark { + background-color: darken($-base-bg, 5%); + } + + // Menu entries size and layout + .dropdown-item, .dropdown-toggle { + &, > span { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + } + + > span { + min-height: $o-navbar-height-xs; + padding-left: $o-horizontal-padding; + + .fa { + padding: $o-horizontal-padding; + font-size: $font-size-sm; + } + } + } + + // Handle menu text-indentation + .dropdown-menu { + margin-top: 0; + text-indent: 1em; + width: 100%; + max-height: none; + + .dropdown-toggle { + text-indent: 1em; + } + + .dropdown-menu { + text-indent: 2em; + } + + .dropdown-item:last-child { + padding-bottom: 1em; + } + } + + // First menu level entries are always bigger + .o_user_menu_mobile > .dropdown-item, + .o_menu_sections > .dropdown-item > span, + .o_menu_sections > .o_burger_menu_section > .dropdown-toggle > span { + @extend %-main-entries-size; + } + + // ====== 'App menu' spefic design rules + .o_burger_menu_app { + + // Reset inner components + .dropdown-menu, .dropdown-item, .dropdown-toggle { + padding: 0; + border: 0; + position: relative; + background-color: initial; + + &:after { + display: none; // Remove inner dropdown caret + } + } + + .dropdown-item span, .dropdown-toggle { + @include o-hover-text-color(rgba($-base-color, .8), $-base-color); + } + + .o_dropdown_active > span { + box-shadow: inset 0 1px 0 rgba(invert($-base-color), .1); + } + + .o_dropdown_active, .dropdown-menu { + background-color: rgba(invert($-base-color), .1); + } + + .dropdown-menu { + box-shadow: inset 0 -1px 0 rgba($-base-color, .1); + } + } + + // ====== 'User Menu' spefic design rules + .o_user_menu_mobile .dropdown-divider { + margin-left: $dropdown-item-padding-x; + margin-right: $dropdown-item-padding-x; + } } - } } // Burger background .o_burger_menu_backdrop { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-backdrop; - width: 100vw; - height: 100vh; - background-color: $modal-backdrop-bg; - opacity: $modal-backdrop-opacity; + position: fixed; + top: 0; + left: 0; + z-index: $zindex-modal-backdrop; + width: 100vw; + height: 100vh; + background-color: $modal-backdrop-bg; + opacity: $modal-backdrop-opacity; } @@ -164,20 +164,20 @@ //------------------------------------------------------------------------------ .o_web_client .o_main_navbar { - .o_mobile_menu_toggle { - @extend %-main-navbar-entry-base; - @extend %-main-navbar-entry-spacing; - } + .o_mobile_menu_toggle { + @extend %-main-navbar-entry-base; + @extend %-main-navbar-entry-spacing; + } } // Apps Switcher adjustments body.o_home_menu_background .o_burger_menu_topbar .dropdown-toggle { - background: $o-view-background-color; - color: $o-main-headings-color; + background: $o-view-background-color; + color: $o-main-headings-color; } @include media-breakpoint-down(md) { - .o_debug_dropdown { - z-index: $zindex-tooltip + 10; - } + .o_debug_dropdown { + z-index: $zindex-tooltip + 10; + } } From 8b96a8a993949648760dbf734e54d38b981ab17f Mon Sep 17 00:00:00 2001 From: Brieuc-brd Date: Tue, 5 Apr 2022 09:18:12 +0000 Subject: [PATCH 2/3] [REF] web: `BurgerMenu`, review and simplify scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Part of the overall v16 SCSS optimization/restyle, task-2704984 - Converts dropdown into "nav ul li" structure. - Removing of '.o_burger_menu_user' - Removing of '.o_burger_menu_app' - Removing of '.o_menu_sections' - Removing of '.o_burger_menu_section' - Some 't-key' not necessary anymore (thx to OWL2) task-2812594 Part-of: odoo/odoo#88073 Co-authored-by: Adrien Dieudonné --- .../src/webclient/burger_menu/burger_menu.js | 2 - .../webclient/burger_menu/burger_menu.scss | 142 +++--------------- .../src/webclient/burger_menu/burger_menu.xml | 69 +++++---- .../burger_menu/user_menu/user_menu.xml | 2 +- .../static/tests/mobile/burger_menu_tests.js | 4 +- .../static/tests/tours/main_flow.js | 2 +- 6 files changed, 57 insertions(+), 164 deletions(-) diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.js b/addons/web/static/src/webclient/burger_menu/burger_menu.js index bd944b4edd8..9041cbe511f 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.js +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.js @@ -1,6 +1,5 @@ /** @odoo-module **/ -import { DropdownItem } from "@web/core/dropdown/dropdown_item"; import { registry } from "@web/core/registry"; import { Transition } from "@web/core/transition"; import { useService } from "@web/core/utils/hooks"; @@ -82,7 +81,6 @@ export class BurgerMenu extends Component { } BurgerMenu.template = "web.BurgerMenu"; BurgerMenu.components = { - DropdownItem, BurgerUserMenu, MobileSwitchCompanyMenu, Transition, diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss index 9ff6972c192..4cc226d4e23 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss @@ -3,9 +3,6 @@ //------------------------------------------------------------------------------ .o_burger_menu { - top: 0; - bottom: 0; - left: 100%; width: 90%; z-index: $zindex-tooltip + 10; transition: transform .2s ease; @@ -17,125 +14,52 @@ transform: translateX(0); } - // Scoped pseudo classes - %-main-entries-size { - padding-top: 0; - padding-bottom: 0; - min-height: $o-navbar-height-xs; - font-size: $font-size-lg; - line-height: $o-navbar-height-xs; - } - // Scoped variables $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode') $-base-color: color-contrast($-base-bg); // ====== Top-Bar .o_burger_menu_topbar { - flex: 0 0 $o-navbar-height-xs; - background: $-base-bg; - color: $-base-color; - @extend %-main-entries-size; + min-height: $o-navbar-height-xs; + line-height: $o-navbar-height-xs; .dropdown-toggle, .o_burger_menu_close { padding: 0 $o-horizontal-padding; } - - .o_burger_menu_close { - font-size: $h2-font-size; - } - - .dropdown-toggle.active { - background: $o-view-background-color; - color: $o-main-headings-color; - } } // ====== Menu content container (both App's and User's entries) .o_burger_menu_content { - background: $o-view-background-color; - &.o_burger_menu_dark { background-color: darken($-base-bg, 5%); } // Menu entries size and layout - .dropdown-item, .dropdown-toggle { - &, > span { - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - } + ul { + background-color: rgba(invert($-base-color), .1); + box-shadow: inset 0 -1px 0 rgba($-base-color, .1); - > span { - min-height: $o-navbar-height-xs; + li > div, li { padding-left: $o-horizontal-padding; + } - .fa { - padding: $o-horizontal-padding; - font-size: $font-size-sm; + // Handle menu text-indentation + li { + ul > li { + &, > div { + text-indent: 2em; + } + ul > li { + &, > div { + text-indent: 3em; + } + } } } } - // Handle menu text-indentation - .dropdown-menu { - margin-top: 0; - text-indent: 1em; - width: 100%; - max-height: none; - - .dropdown-toggle { - text-indent: 1em; - } - - .dropdown-menu { - text-indent: 2em; - } - - .dropdown-item:last-child { - padding-bottom: 1em; - } - } - - // First menu level entries are always bigger - .o_user_menu_mobile > .dropdown-item, - .o_menu_sections > .dropdown-item > span, - .o_menu_sections > .o_burger_menu_section > .dropdown-toggle > span { - @extend %-main-entries-size; - } - - // ====== 'App menu' spefic design rules - .o_burger_menu_app { - - // Reset inner components - .dropdown-menu, .dropdown-item, .dropdown-toggle { - padding: 0; - border: 0; - position: relative; - background-color: initial; - - &:after { - display: none; // Remove inner dropdown caret - } - } - - .dropdown-item span, .dropdown-toggle { - @include o-hover-text-color(rgba($-base-color, .8), $-base-color); - } - - .o_dropdown_active > span { - box-shadow: inset 0 1px 0 rgba(invert($-base-color), .1); - } - - .o_dropdown_active, .dropdown-menu { - background-color: rgba(invert($-base-color), .1); - } - - .dropdown-menu { - box-shadow: inset 0 -1px 0 rgba($-base-color, .1); - } + li, button { + @include o-hover-text-color(rgba($-base-color, .8), $-base-color); } // ====== 'User Menu' spefic design rules @@ -146,36 +70,10 @@ } } -// Burger background -.o_burger_menu_backdrop { - position: fixed; - top: 0; - left: 0; - z-index: $zindex-modal-backdrop; - width: 100vw; - height: 100vh; - background-color: $modal-backdrop-bg; - opacity: $modal-backdrop-opacity; -} - - //------------------------------------------------------------------------------ // Design rules not scoped within the main component //------------------------------------------------------------------------------ -.o_web_client .o_main_navbar { - .o_mobile_menu_toggle { - @extend %-main-navbar-entry-base; - @extend %-main-navbar-entry-spacing; - } -} - -// Apps Switcher adjustments -body.o_home_menu_background .o_burger_menu_topbar .dropdown-toggle { - background: $o-view-background-color; - color: $o-main-headings-color; -} - @include media-breakpoint-down(md) { .o_debug_dropdown { z-index: $zindex-tooltip + 10; diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.xml b/addons/web/static/src/webclient/burger_menu/burger_menu.xml index d97be0c0e73..3432fc4eb30 100644 --- a/addons/web/static/src/webclient/burger_menu/burger_menu.xml +++ b/addons/web/static/src/webclient/burger_menu/burger_menu.xml @@ -4,66 +4,65 @@
- - + -
-
+
- + Menu - - + +
-
-
+
- + -
-
- - - - - -
-
-
+
    + + + + + +
+
-
+
-
- -
+
  • +
    +
      - + + -
    -
    • - - - + + +
  • + +
    • diff --git a/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml b/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml index c3fd757a254..3d2bf58a45c 100644 --- a/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml +++ b/addons/web/static/src/webclient/burger_menu/user_menu/user_menu.xml @@ -6,7 +6,7 @@ - +