[FIX] Add 'More...' feature to main menu

bzr revid: fme@openerp.com-20120327193212-kflgwnvxp89lkqmb
This commit is contained in:
Fabien Meghazi 2012-03-27 21:32:12 +02:00
parent 1ec3bd5d33
commit c86b24b4c3
4 changed files with 388 additions and 276 deletions

View File

@ -5,279 +5,342 @@
color: #4c4c4c;
font-size: 13px;
background: white;
position: relative; }
.openerp2 a {
text-decoration: none; }
.openerp2 .oe_webclient {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0; }
.openerp2 .oe_webclient .oe_application {
position: absolute;
top: 32px;
bottom: 0;
left: 206px;
right: 0; }
.openerp2 .oe_content_full_screen .oe_application {
top: 0;
left: 0; }
.openerp2 .oe_content_full_screen .topbar, .openerp2 .oe_content_full_screen .leftbar {
display: none; }
.openerp2 .oe_topbar {
width: 100%;
height: 31px;
border-top: solid 1px #d3d3d3;
border-bottom: solid 1px black;
background-color: #646060;
background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
background-image: -webkit-linear-gradient(top, #646060, #262626);
background-image: -moz-linear-gradient(top, #646060, #262626);
background-image: -ms-linear-gradient(top, #646060, #262626);
background-image: -o-linear-gradient(top, #646060, #262626);
background-image: linear-gradient(to bottom, #646060, #262626); }
.openerp2 .oe_topbar .oe_systray {
float: right; }
.openerp2 .oe_topbar .oe_systray > div {
float: left;
padding: 0 4px 0 4px; }
.openerp2 .oe_topbar .oe_topbar_item li {
float: left; }
.openerp2 .oe_topbar .oe_topbar_item li a {
display: block;
padding: 5px 10px 7px;
line-height: 20px;
height: 20px;
color: #eeeeee;
vertical-align: top;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.openerp2 .oe_topbar .oe_topbar_item li a:hover {
background: #303030;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
.openerp2 .oe_topbar .oe_topbar_item .oe_active {
background: #303030;
font-weight: bold;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
.openerp2 .oe_topbar .oe_topbar_avatar {
width: 24px;
height: 24px;
margin: -2px 2px 0 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px; }
.openerp2 .oe_topbar .oe_topbar_avatar {
vertical-align: top; }
.openerp2 .oe_leftbar {
width: 205px;
height: 100%;
background: #f0eeee;
border-right: 1px solid #afafb6;
overflow: auto;
text-shadow: 0 1px 1px white; }
.openerp2 .oe_leftbar .oe_footer {
position: absolute;
width: 205px;
text-align: center;
bottom: 8px; }
.openerp2 a.oe_logo {
display: block;
text-align: center;
height: 70px;
line-height: 70px; }
.openerp2 a.oe_logo img {
height: 40px;
width: 157px;
margin: 14px 0; }
.openerp2 .oe_footer {
position: absolute;
width: 205px;
text-align: center;
bottom: 8px; }
.openerp2 .oe_footer a {
font-weight: 800;
font-family: serif;
font-size: 16px;
color: black; }
.openerp2 .oe_footer a span {
color: #c81010;
font-style: italic; }
.openerp2 .oe_menu {
float: left;
padding: 0;
margin: 0; }
.openerp2 .oe_menu li {
list-style-type: none;
float: left; }
.openerp2 .oe_menu a {
display: block;
padding: 5px 10px 7px;
line-height: 20px;
height: 20px;
color: #eeeeee;
vertical-align: top;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.openerp2 .oe_menu a:hover {
background: #303030;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
.openerp2 .oe_menu .oe_active {
background: #303030;
font-weight: bold;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset; }
.openerp2 .oe_secondary_menu_section {
font-weight: bold;
margin-left: 8px;
color: #8a89ba; }
.openerp2 .oe_secondary_submenu {
padding: 2px 0 8px 0;
margin: 0;
width: 100%;
display: inline-block; }
.openerp2 .oe_secondary_submenu li {
position: relative;
padding: 1px 0 1px 16px;
list-style-type: none; }
.openerp2 .oe_secondary_submenu li a {
display: block;
color: #4c4c4c;
padding: 2px 4px 2px 0; }
.openerp2 .oe_secondary_submenu li .oe_menu_label {
position: absolute;
top: 1px;
right: 1px;
font-size: 10px;
background: #8a89ba;
color: white;
padding: 2px 4px;
margin: 1px 6px 0 0;
border: 1px solid lightGray;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
.openerp2 .oe_secondary_submenu .oe_active {
background: #8a89ba;
border-top: 1px solid lightGray;
border-bottom: 1px solid lightGray;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
.openerp2 .oe_secondary_submenu .oe_active a {
color: white; }
.openerp2 .oe_secondary_submenu .oe_active .oe_menu_label {
background: #eeeeee;
color: #8a89ba;
text-shadow: 0 1px 1px white;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.openerp2 .oe_secondary_submenu .oe_menu_toggler:before {
width: 0;
height: 0;
display: inline-block;
content: "&darr";
text-indent: -99999px;
vertical-align: top;
margin-left: -8px;
margin-top: 4px;
margin-right: 4px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #4c4c4c;
filter: alpha(opacity=50);
opacity: 0.5; }
.openerp2 .oe_secondary_submenu .oe_menu_opened:before {
margin-top: 6px;
margin-left: -12px;
margin-right: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #4c4c4c; }
.openerp2 .oe_user_menu {
float: right;
padding: 0;
margin: 0; }
.openerp2 .oe_user_menu li {
list-style-type: none;
float: left; }
.openerp2 .oe_user_menu .oe_dropdown {
position: relative; }
.openerp2 .oe_user_menu .oe_dropdown_toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "&darr";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid white;
filter: alpha(opacity=50);
opacity: 0.5; }
.openerp2 .oe_user_menu .oe_dropdown_options {
float: left;
background: #333333;
background: rgba(37, 37, 37, 0.9);
display: none;
position: absolute;
top: 32px;
right: -1px;
border: 0;
z-index: 900;
margin-left: 0;
margin-right: 0;
padding: 6px 0;
zoom: 1;
border-color: #999999;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 0 1px 1px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box; }
.openerp2 .oe_user_menu .oe_dropdown_options li {
float: none;
display: block;
background-color: none; }
.openerp2 .oe_user_menu .oe_dropdown_options li a {
display: block;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #eeeeee; }
.openerp2 .oe_user_menu .oe_dropdown_options li a:hover {
background-color: #292929;
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(to bottom, #292929, #191919);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-box-shadow: none; }
position: relative;
}
.openerp2 a {
text-decoration: none;
}
.openerp2 .oe_webclient {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.openerp2 .oe_webclient .oe_application {
position: absolute;
top: 32px;
bottom: 0;
left: 206px;
right: 0;
}
.openerp2 .oe_content_full_screen .oe_application {
top: 0;
left: 0;
}
.openerp2 .oe_content_full_screen .topbar, .openerp2 .oe_content_full_screen .leftbar {
display: none;
}
.openerp2 .oe_topbar {
width: 100%;
height: 31px;
border-top: solid 1px #d3d3d3;
border-bottom: solid 1px black;
background-color: #646060;
background-image: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
background-image: -webkit-linear-gradient(top, #646060, #262626);
background-image: -moz-linear-gradient(top, #646060, #262626);
background-image: -ms-linear-gradient(top, #646060, #262626);
background-image: -o-linear-gradient(top, #646060, #262626);
background-image: linear-gradient(to bottom, #646060, #262626);
}
.openerp2 .oe_topbar .oe_systray {
float: right;
}
.openerp2 .oe_topbar .oe_systray > div {
float: left;
padding: 0 4px 0 4px;
}
.openerp2 .oe_topbar .oe_topbar_item li {
float: left;
}
.openerp2 .oe_topbar .oe_topbar_item li a {
display: block;
padding: 5px 10px 7px;
line-height: 20px;
height: 20px;
color: #eeeeee;
vertical-align: top;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_topbar .oe_topbar_item li a:hover {
background: #303030;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
}
.openerp2 .oe_topbar .oe_topbar_item .oe_active {
background: #303030;
font-weight: bold;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
}
.openerp2 .oe_topbar .oe_topbar_avatar {
width: 24px;
height: 24px;
margin: -2px 2px 0 0;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.openerp2 .oe_topbar .oe_topbar_avatar {
vertical-align: top;
}
.openerp2 .oe_leftbar {
width: 205px;
height: 100%;
background: #f0eeee;
border-right: 1px solid #afafb6;
overflow: auto;
text-shadow: 0 1px 1px white;
}
.openerp2 .oe_leftbar .oe_footer {
position: absolute;
width: 205px;
text-align: center;
bottom: 8px;
}
.openerp2 a.oe_logo {
display: block;
text-align: center;
height: 70px;
line-height: 70px;
}
.openerp2 a.oe_logo img {
height: 40px;
width: 157px;
margin: 14px 0;
}
.openerp2 .oe_footer {
position: absolute;
width: 205px;
text-align: center;
bottom: 8px;
}
.openerp2 .oe_footer a {
font-weight: 800;
font-family: serif;
font-size: 16px;
color: black;
}
.openerp2 .oe_footer a span {
color: #c81010;
font-style: italic;
}
.openerp2 .oe_menu {
float: left;
padding: 0;
margin: 0;
}
.openerp2 .oe_menu li {
list-style-type: none;
float: left;
}
.openerp2 .oe_menu a {
display: block;
padding: 5px 10px 7px;
line-height: 20px;
height: 20px;
color: #eeeeee;
vertical-align: top;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_menu a:hover {
background: #303030;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
}
.openerp2 .oe_menu .oe_active {
background: #303030;
font-weight: bold;
color: white;
-moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
}
.openerp2 .oe_menu_more_container {
position: relative;
}
.openerp2 .oe_menu_more_container .oe_menu_more {
position: absolute;
padding: 0;
background-color: #646060;
z-index: 1;
border: 1px solid black;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.openerp2 .oe_menu_more_container .oe_menu_more li {
float: none;
}
.openerp2 .oe_menu_more_container .oe_menu_more li a {
white-space: nowrap;
}
.openerp2 .oe_secondary_menu_section {
font-weight: bold;
margin-left: 8px;
color: #8a89ba;
}
.openerp2 .oe_secondary_submenu {
padding: 2px 0 8px 0;
margin: 0;
width: 100%;
display: inline-block;
}
.openerp2 .oe_secondary_submenu li {
position: relative;
padding: 1px 0 1px 16px;
list-style-type: none;
}
.openerp2 .oe_secondary_submenu li a {
display: block;
color: #4c4c4c;
padding: 2px 4px 2px 0;
}
.openerp2 .oe_secondary_submenu li .oe_menu_label {
position: absolute;
top: 1px;
right: 1px;
font-size: 10px;
background: #8a89ba;
color: white;
padding: 2px 4px;
margin: 1px 6px 0 0;
border: 1px solid lightGray;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_secondary_submenu .oe_active {
background: #8a89ba;
border-top: 1px solid lightGray;
border-bottom: 1px solid lightGray;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_secondary_submenu .oe_active a {
color: white;
}
.openerp2 .oe_secondary_submenu .oe_active .oe_menu_label {
background: #eeeeee;
color: #8a89ba;
text-shadow: 0 1px 1px white;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.openerp2 .oe_secondary_submenu .oe_menu_toggler:before {
width: 0;
height: 0;
display: inline-block;
content: "&darr";
text-indent: -99999px;
vertical-align: top;
margin-left: -8px;
margin-top: 4px;
margin-right: 4px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #4c4c4c;
filter: alpha(opacity=50);
opacity: 0.5;
}
.openerp2 .oe_secondary_submenu .oe_menu_opened:before {
margin-top: 6px;
margin-left: -12px;
margin-right: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #4c4c4c;
}
.openerp2 .oe_user_menu {
float: right;
padding: 0;
margin: 0;
}
.openerp2 .oe_user_menu li {
list-style-type: none;
float: left;
}
.openerp2 .oe_user_menu .oe_dropdown {
position: relative;
}
.openerp2 .oe_user_menu .oe_dropdown_toggle:after {
width: 0;
height: 0;
display: inline-block;
content: "&darr";
text-indent: -99999px;
vertical-align: top;
margin-top: 8px;
margin-left: 4px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid white;
filter: alpha(opacity=50);
opacity: 0.5;
}
.openerp2 .oe_user_menu .oe_dropdown_options {
float: left;
background: #333333;
background: rgba(37, 37, 37, 0.9);
display: none;
position: absolute;
top: 32px;
right: -1px;
border: 0;
z-index: 900;
margin-left: 0;
margin-right: 0;
padding: 6px 0;
zoom: 1;
border-color: #999999;
border-color: rgba(0, 0, 0, 0.2);
border-style: solid;
border-width: 0 1px 1px;
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.openerp2 .oe_user_menu .oe_dropdown_options li {
float: none;
display: block;
background-color: none;
}
.openerp2 .oe_user_menu .oe_dropdown_options li a {
display: block;
padding: 4px 15px;
clear: both;
font-weight: normal;
line-height: 18px;
color: #eeeeee;
}
.openerp2 .oe_user_menu .oe_dropdown_options li a:hover {
background-color: #292929;
background-image: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
background-image: -webkit-linear-gradient(top, #292929, #191919);
background-image: -moz-linear-gradient(top, #292929, #191919);
background-image: -ms-linear-gradient(top, #292929, #191919);
background-image: -o-linear-gradient(top, #292929, #191919);
background-image: linear-gradient(to bottom, #292929, #191919);
-moz-box-shadow: none;
-webkit-box-shadow: none;
-box-shadow: none;
}

View File

@ -194,6 +194,20 @@ $colour4: #8a89ba
font-weight: bold
color: white
@include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
.oe_menu_more_container
position: relative
.oe_menu_more
position: absolute
padding: 0
background-color: #646060
z-index: 1
border: 1px solid black
border-bottom-left-radius: 5px
border-bottom-right-radius: 5px
li
float: none
a
white-space: nowrap
.oe_secondary_menu_section
font-weight: bold
margin-left: 8px

View File

@ -635,11 +635,13 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
init: function() {
this._super.apply(this, arguments);
this.has_been_loaded = $.Deferred();
this.maximum_visible_links = 'auto'; // # of menu to show. 0 = do not crop, 'auto' = algo
},
start: function() {
this._super.apply(this, arguments);
this.$secondary_menus = this.getParent().$element.find('.oe_secondary_menus_container');
this.$secondary_menus.on('click', 'a[data-menu]', this.on_menu_click);
$('html').bind('click', this.do_hide_more);
},
do_reload: function() {
var self = this;
@ -650,14 +652,40 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
});
},
on_loaded: function(data) {
var self = this;
this.data = data;
this.renderElement();
this.limit_entries();
this.$element.on('click', 'a[data-menu]', this.on_menu_click);
this.$element.on('click', 'a.oe_menu_more_link', function() {
self.$element.find('.oe_menu_more').toggle();
return false;
});
this.$secondary_menus.html(QWeb.render("Menu.secondary", { widget : this }));
// Hide second level submenus
this.$secondary_menus.find('.oe_menu_toggler').siblings('.oe_secondary_submenu').hide();
this.has_been_loaded.resolve();
},
limit_entries: function() {
var maximum_visible_links = this.maximum_visible_links;
if (maximum_visible_links === 'auto') {
maximum_visible_links = this.auto_limit_entries();
}
if (maximum_visible_links) {
var $more = $(QWeb.render('Menu.more')),
$index = this.$element.find('li').eq(maximum_visible_links - 1);
$index.after($more);
$more.find('.oe_menu_more').append($index.next().nextAll());
}
},
auto_limit_entries: function() {
// TODO: auto detect overflow and bind window on resize
var width = $(window).width();
return Math.floor(width / 125);
},
do_hide_more: function() {
this.$element.find('.oe_menu_more').hide();
},
/**
* Opens a given menu by id, as if a user had browsed to that menu by hand
* except does not trigger any event on the way
@ -702,6 +730,7 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
}
},
on_menu_click: function(ev, id) {
this.do_hide_more();
id = id || 0;
var $clicked_menu, manual = false;

View File

@ -332,6 +332,12 @@
</li>
</ul>
</t>
<t t-name="Menu.more">
<li class="oe_menu_more_container">
<a href="#" class="oe_menu_more_link">More...</a>
<ul class="oe_menu_more" style="display: none;"/>
</li>
</t>
<t t-name="Menu.secondary">
<div t-foreach="widget.data.data.children" t-as="menu" style="display: none" class="oe_secondary_menu" t-att-data-menu-parent="menu.id">
<t t-foreach="menu.children" t-as="menu">