Techsystech
/
web_techsystech
forked from Techsystech/web
3
0
Fork 0
Code Pull Requests 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
15.0-ocabot-merge-pr-2789-by-pedrobaeza-bump-patch
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 {
display: block;
}
/* XXX: local patch waiting for:
https://github.com/blivesta/drawer/pull/36
*/
.drawer-open {
overflow: hidden;
}
/* end local patch */
/*!------------------------------------*\
Top
\*!------------------------------------*/

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

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

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

@ -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 {

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

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

@ -1,33 +1,178 @@
/* Copyright 2016 LasLabs Inc.
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
.main-nav {
header {
margin: 0;
padding: 0;
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;
}
}
> .main-nav {
display: block;
white-space: nowrap;
.oe_topbar_avatar {
margin-top: -@app-drawer-padding-horizontal;
height: @app-drawer-navbar-height;
border-radius: 50%;
.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 {
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;
}
}

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

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

30
web_responsive/views/web.xml
View File

@ -72,7 +72,7 @@
</div>
<div class="collapse navbar-collapse text-center"
<div class="collapse navbar-collapse"
id="odooMenuBarNav"
data-parent="#odooMenuBarToggle"
aria-expanded="false"
@ -82,16 +82,12 @@
>
<t t-call="web.menu_secondary" />
</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 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>
</header>
@ -108,11 +104,17 @@
<xpath expr="//div[@class='o_sub_menu_content']/t" position="replace">
<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>
</t>