Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

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/2058/head
Daniel Torres 2017-01-09 14:12:04 -02:00 committed by Sergey Shebanin
parent 0eaa516268
commit b2b97c87e6
7 changed files with 219 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -1,12 +1,159 @@
/* 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 { header {
margin: 0;
padding: 0;
margin-bottom: 0; > .main-nav {
min-height: @app-drawer-navbar-height; display: block;
z-index: 1; white-space: nowrap;
border: none;
.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;
}
}
}
.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 { .badge {
position: absolute; position: absolute;
@ -18,16 +165,14 @@
padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal; padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
} }
} .o_planner_systray > .progress {
margin-top: 15px;
.oe_topbar_avatar { }
margin-top: -@app-drawer-padding-horizontal; }
height: @app-drawer-navbar-height;
border-radius: 50%;
} }
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;

26
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,15 +82,11 @@
> >
<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 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> </div>
</nav> </nav>
@ -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" <ul style="display: none"
t-att-data-menu-parent="menu['id']" class="oe_secondary_menu nav navbar-nav"
style="display: none;" 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" /> <t t-call="web.menu_secondary_submenu" />
</li>
</ul> </ul>
</t> </t>