OCA
/
web
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

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 `<body>`
* Fix jquery drawer in anticipation of:
   https://github.com/blivesta/drawer/pull/36
pull/530/head
Daniel Torres 8 years ago
committed by Pedro M. Baeza
parent
3ed19c7f3c
commit
b7a980abcd
7 changed files with 220 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      web_responsive/static/lib/css/drawer.3.2.0.css
  2. 10
      web_responsive/static/lib/js/drawer.3.2.0.js
  3. 5
      web_responsive/static/src/less/app_drawer.less
  4. 11
      web_responsive/static/src/less/main.less
  5. 199
      web_responsive/static/src/less/navbar.less
  6. 5
      web_responsive/static/src/less/variables.less
  7. 30
      web_responsive/views/web.xml

9
web_responsive/static/lib/css/drawer.3.2.0.css
View File

@ -66,6 +66,15 @@
.drawer-open .drawer-overlay { .drawer-open .drawer-overlay {
display: block; display: block;
} }
/* XXX: local patch waiting for:
https://github.com/blivesta/drawer/pull/36
*/
.drawer-open {
overflow: hidden;
}
/* end local patch */
/*!------------------------------------*\ /*!------------------------------------*\
Top Top
\*!------------------------------------*/ \*!------------------------------------*/

10
web_responsive/static/lib/js/drawer.3.2.0.js
View File

@ -121,7 +121,10 @@
return $this return $this
.removeClass(__.settings.class.close) .removeClass(__.settings.class.close)
.addClass(__.settings.class.open) .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() { .drawerCallback(function triggerOpenedListeners() {
__.settings.state = true; __.settings.state = true;
$this.trigger(__.settings.events.opened); $this.trigger(__.settings.events.opened);
@ -136,7 +139,10 @@
return $this return $this
.removeClass(__.settings.class.open) .removeClass(__.settings.class.open)
.addClass(__.settings.class.close) .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() { .drawerCallback(function triggerClosedListeners() {
__.settings.state = false; __.settings.state = false;
$this.trigger(__.settings.events.closed); $this.trigger(__.settings.events.closed);

5
web_responsive/static/src/less/app_drawer.less
View File

@ -11,7 +11,7 @@
border-radius: @border-radius-base; border-radius: @border-radius-base;
.box-shadow(0 6px 12px rgba(0, 0, 0, .175)); .box-shadow(0 6px 12px rgba(0, 0, 0, .175));
background-clip: padding-box; background-clip: padding-box;
z-index: 1000;
z-index: 10000;
.o_tooltip { .o_tooltip {
z-index: 1051; z-index: 1051;
@ -29,7 +29,7 @@
padding: 4px; padding: 4px;
margin: 14px 0; margin: 14px 0;
display: none; display: none;
color: #eee;
color: @odoo-list-footer-bg-color;
background: rgba(37,37,37,0.9); background: rgba(37,37,37,0.9);
} }
&:hover .oe_logo_edit_admin { &:hover .oe_logo_edit_admin {
@ -47,6 +47,7 @@
.app-drawer-title { .app-drawer-title {
float: none; float: none;
font-weight: bold; // Bold titles for apps in the app-drawer
} }
.app-drawer-panel-title { .app-drawer-panel-title {

11
web_responsive/static/src/less/main.less
View File

@ -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;
}

199
web_responsive/static/src/less/navbar.less
View File

@ -1,33 +1,178 @@
/* Copyright 2016 LasLabs Inc. /* Copyright 2016 LasLabs Inc.
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */ * 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 { a.navbar-collapse.collapse {
@media (min-width: @screen-sm) {
@media (min-width: @screen-sm-min) {
padding-bottom: @app-drawer-navbar-padding-vertical; padding-bottom: @app-drawer-navbar-padding-vertical;
padding-top: @app-drawer-navbar-padding-vertical; padding-top: @app-drawer-navbar-padding-vertical;
} }
@ -36,11 +181,3 @@ a.navbar-collapse.collapse {
.dropdown-scrollable { .dropdown-scrollable {
overflow-x: hidden; 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;
}
}

5
web_responsive/static/src/less/variables.less
View File

@ -8,6 +8,11 @@
@app-drawer-title-height: 54px; @app-drawer-title-height: 54px;
// Navbar // Navbar
@navbar-height: 46px;
@app-drawer-navbar-height: @navbar-height / 2; @app-drawer-navbar-height: @navbar-height / 2;
@app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2; @app-drawer-navbar-padding-vertical: @navbar-padding-vertical / 2;
@app-drawer-padding-horizontal: @navbar-padding-horizontal / 2; @app-drawer-padding-horizontal: @navbar-padding-horizontal / 2;
// Drawer Toggle
@drawer-toggle-height: @navbar-height;
@drawer-toggle-width: @navbar-height;

30
web_responsive/views/web.xml
View File

@ -72,7 +72,7 @@
</div> </div>
<div class="collapse navbar-collapse text-center"
<div class="collapse navbar-collapse"
id="odooMenuBarNav" id="odooMenuBarNav"
data-parent="#odooMenuBarToggle" data-parent="#odooMenuBarToggle"
aria-expanded="false" aria-expanded="false"
@ -82,16 +82,12 @@
> >
<t t-call="web.menu_secondary" /> <t t-call="web.menu_secondary" />
</div> </div>
<div class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav navbar-right oe_user_menu_placeholder"
style="display: none;"
/>
<ul class="nav navbar-nav navbar-right oe_systray"
style="display: none;"
/>
</div>
</div> </div>
</div> </div>
<div class="nav navbar-nav navbar-right navbar-systray o_menu_systray">
<ul class="nav navbar-nav navbar-right navbar-systray-item oe_user_menu_placeholder"/>
<ul class="nav navbar-nav navbar-right navbar-systray-item oe_systray"/>
</div>
</nav> </nav>
</header> </header>
@ -108,11 +104,17 @@
<xpath expr="//div[@class='o_sub_menu_content']/t" position="replace"> <xpath expr="//div[@class='o_sub_menu_content']/t" position="replace">
<t t-foreach="menu_data['children']" t-as="menu"> <t t-foreach="menu_data['children']" t-as="menu">
<ul class="oe_secondary_menu nav navbar-nav"
t-att-data-menu-parent="menu['id']"
style="display: none;"
>
<t t-call="web.menu_secondary_submenu" />
<ul style="display: none"
class="oe_secondary_menu nav navbar-nav"
t-att-data-menu-parent="menu['id']">
<li class="app-name">
<span class="oe_menu_text">
<t t-esc="menu['name']"/>
</span>
</li>
<li>
<t t-call="web.menu_secondary_submenu" />
</li>
</ul> </ul>
</t> </t>

Write Preview
Loading…
Cancel
Save