From b7a980abcd9bd35bbd4b2c5fb5ab8f879047421a Mon Sep 17 00:00:00 2001 From: Daniel Torres Date: Mon, 9 Jan 2017 14:12:04 -0200 Subject: [PATCH] Web responsive menu improvements (#513) * Bold titles for apps in the app-drawer * Remove z-index from Control Panel buttons, so it doesn't overlap the menu. * Better responsive menus * Move systray icons/menus out of the menu and up to the top bar. * Increase avatar size and visibility. * Other minor menu behavior fixes. * Changes to fit odoo variables * And a little margin adjust on navbar-right * Top menu always thick * Removed overflow:hidden!important from main.less * Local patch: prevent body overflow auto * Stop using `style=` on `` * Fix jquery drawer in anticipation of: https://github.com/blivesta/drawer/pull/36 --- .../static/lib/css/drawer.3.2.0.css | 9 + web_responsive/static/lib/js/drawer.3.2.0.js | 10 +- .../static/src/less/app_drawer.less | 5 +- web_responsive/static/src/less/main.less | 11 + web_responsive/static/src/less/navbar.less | 199 +++++++++++++++--- web_responsive/static/src/less/variables.less | 5 + web_responsive/views/web.xml | 30 +-- 7 files changed, 220 insertions(+), 49 deletions(-) diff --git a/web_responsive/static/lib/css/drawer.3.2.0.css b/web_responsive/static/lib/css/drawer.3.2.0.css index 11c372f3..99705b3a 100755 --- a/web_responsive/static/lib/css/drawer.3.2.0.css +++ b/web_responsive/static/lib/css/drawer.3.2.0.css @@ -66,6 +66,15 @@ .drawer-open .drawer-overlay { display: block; } + +/* XXX: local patch waiting for: + https://github.com/blivesta/drawer/pull/36 +*/ +.drawer-open { + overflow: hidden; +} +/* end local patch */ + /*!------------------------------------*\ Top \*!------------------------------------*/ diff --git a/web_responsive/static/lib/js/drawer.3.2.0.js b/web_responsive/static/lib/js/drawer.3.2.0.js index d879a519..3d5e1f2f 100755 --- a/web_responsive/static/lib/js/drawer.3.2.0.js +++ b/web_responsive/static/lib/js/drawer.3.2.0.js @@ -121,7 +121,10 @@ return $this .removeClass(__.settings.class.close) .addClass(__.settings.class.open) - .css({ 'overflow': 'hidden' }) + // XXX: local patch waiting for: + // https://github.com/blivesta/drawer/pull/36 + //.css({ 'overflow': 'hidden' }) + // end local patch .drawerCallback(function triggerOpenedListeners() { __.settings.state = true; $this.trigger(__.settings.events.opened); @@ -136,7 +139,10 @@ return $this .removeClass(__.settings.class.open) .addClass(__.settings.class.close) - .css({ 'overflow': 'auto' }) + // XXX: local patch waiting for: + // https://github.com/blivesta/drawer/pull/36 + //.css("overflow", "auto") + // end local patch .drawerCallback(function triggerClosedListeners() { __.settings.state = false; $this.trigger(__.settings.events.closed); diff --git a/web_responsive/static/src/less/app_drawer.less b/web_responsive/static/src/less/app_drawer.less index 76842bd2..f9b36179 100755 --- a/web_responsive/static/src/less/app_drawer.less +++ b/web_responsive/static/src/less/app_drawer.less @@ -11,7 +11,7 @@ border-radius: @border-radius-base; .box-shadow(0 6px 12px rgba(0, 0, 0, .175)); background-clip: padding-box; - z-index: 1000; + z-index: 10000; .o_tooltip { z-index: 1051; @@ -29,7 +29,7 @@ padding: 4px; margin: 14px 0; display: none; - color: #eee; + color: @odoo-list-footer-bg-color; background: rgba(37,37,37,0.9); } &:hover .oe_logo_edit_admin { @@ -47,6 +47,7 @@ .app-drawer-title { float: none; + font-weight: bold; // Bold titles for apps in the app-drawer } .app-drawer-panel-title { diff --git a/web_responsive/static/src/less/main.less b/web_responsive/static/src/less/main.less index c25b0bf1..7a7763f7 100755 --- a/web_responsive/static/src/less/main.less +++ b/web_responsive/static/src/less/main.less @@ -56,3 +56,14 @@ main { } } } + +// Remove z-index from CP buttons so it doesn't overlap the menu +.o_control_panel { + .btn-group > .btn.active { + z-index: initial; + } +} + +.o_chat_window { + z-index: 1000; +} diff --git a/web_responsive/static/src/less/navbar.less b/web_responsive/static/src/less/navbar.less index 5313bde6..732e0213 100755 --- a/web_responsive/static/src/less/navbar.less +++ b/web_responsive/static/src/less/navbar.less @@ -1,33 +1,178 @@ /* Copyright 2016 LasLabs Inc. * License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ -.main-nav { - - margin-bottom: 0; - min-height: @app-drawer-navbar-height; - z-index: 1; - border: none; - - .badge { - position: absolute; - top: 3px; - right: @navbar-padding-horizontal / 2; - } - - ul.nav > li > a { - padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal; - } - -} +header { + margin: 0; + padding: 0; + + > .main-nav { + display: block; + white-space: nowrap; + + .navbar-systray { + white-space: nowrap; + @media (max-width: @screen-xs-max) { + position: absolute; + top: 0; + right: 56px; + } + > .oe_user_menu_placeholder > li > a { + > .oe_topbar_avatar { + border-radius: 50%; + margin-top: -8px; + max-height: 36px; + height: 36px; + width: 36px; + } + .oe_topbar_name { + position: relative; + top: -3px; + @media (max-width: @screen-xs-max) { + display: none; + } + } + .caret { + position: relative; + top: -3.5px; + } + } + > .oe_systray > li > a { + .fa { + position: relative; + top: 3px; + font-size: 16px; + } + .caret { + position: relative; + top: 0.5px; + } + } + } + + .navbar-right { + float: right; + > li { + float: left; + } + @media (max-width: @screen-xs-max) { + .navbar-nav .open .dropdown-menu { + position: fixed; + top: 46px; + bottom: 0; + left: 0; + right: 0; + overflow: auto; + float: left; + background-color: @odoo-view-background-color; + border: 1px solid rgba(0, 0, 0, 0.15); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); + } + } + } + + .container-fluid:before, .container-fluid:after, .navbar-collapse:before, .navbar-collapse:after { + display: inline; + } + + > .container-fluid { + margin: 0; + padding: 0; + + @media (max-width: @screen-xs-max) { + > .navbar-collapse { + margin: 0; + padding: 0; + overflow: auto; + &.collapsing { + overflow: hidden; + } + } + } + > .navbar-header { + margin: 0; + padding: 0; + > .drawer-toggle, .navbar-toggle { + margin: 0; + padding: 0; + border: 1px solid @nav-tabs-active-link-hover-border-color; + > i.fa, div.fa { + padding: 16px 14px 15px; + } + } + } -.oe_topbar_avatar { - margin-top: -@app-drawer-padding-horizontal; - height: @app-drawer-navbar-height; - border-radius: 50%; + .o_sub_menu > .o_sub_menu_content > .oe_secondary_menu { + ul.dropdown-menu > li.dropdown-header { + color: @odoo-view-background-color; + text-decoration: none; + background-color: @odoo-main-color-muted; + font-weight: bold; + } + @media (min-width: @screen-sm-min) { + height: @navbar-height; + } + margin: 0; + padding: 0; + > li { + @media (min-width: @screen-sm-min) { + height: @navbar-height; + } + margin: 0; + padding: 0; + &.app-name { + display: block; + padding: 7px 8px; + > .oe_menu_text { + font-size: 20px; + } + @media (min-width: @screen-sm-min) { + padding: 8.5px 12px; + } + } + > a { + margin: 0; + @media (min-width: @screen-sm-min) { + height: @navbar-height; + padding: 14px 8px; + } + } + } + } + } + + > .navbar-right.o_menu_systray { + display: inline; + margin: 0; + padding: 0; + > ul { + margin: 0; + padding: 0; + > li > a { + margin: 0; + padding: 13px 8px; + height: @navbar-height; + } + } + } + + .badge { + position: absolute; + top: 3px; + right: @navbar-padding-horizontal / 2; + } + + ul.nav > li > a { + padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal; + } + + .o_planner_systray > .progress { + margin-top: 15px; + } + } } a.navbar-collapse.collapse { - @media (min-width: @screen-sm) { + @media (min-width: @screen-sm-min) { padding-bottom: @app-drawer-navbar-padding-vertical; padding-top: @app-drawer-navbar-padding-vertical; } @@ -36,11 +181,3 @@ a.navbar-collapse.collapse { .dropdown-scrollable { overflow-x: hidden; } - -@media (max-width: @screen-xs-max) { - #odooMenuBarNav[aria-expanded="false"] { - /* Hack to hide the visibly expanded mobile menu on load. */ - position: absolute; - z-index: -9999; - } -} diff --git a/web_responsive/static/src/less/variables.less b/web_responsive/static/src/less/variables.less index 8e16182a..34eda0d4 100755 --- a/web_responsive/static/src/less/variables.less +++ b/web_responsive/static/src/less/variables.less @@ -8,6 +8,11 @@ @app-drawer-title-height: 54px; // Navbar +@navbar-height: 46px; @app-drawer-navbar-height: @navbar-height / 2; @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2; @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2; + +// Drawer Toggle +@drawer-toggle-height: @navbar-height; +@drawer-toggle-width: @navbar-height; diff --git a/web_responsive/views/web.xml b/web_responsive/views/web.xml index ed912576..b3f7761c 100644 --- a/web_responsive/views/web.xml +++ b/web_responsive/views/web.xml @@ -72,7 +72,7 @@ - -
-
+
+
@@ -108,11 +104,17 @@ -