[ADD] Menu part 1
bzr revid: fme@openerp.com-20110322114919-a8l2k4ipy6zt4si8
This commit is contained in:
Fabien Meghazi
parent
e4b925112f
commit
c7ce5c80a7
|
|
@ -21,7 +21,10 @@ body {
|
|||
}
|
||||
|
||||
|
||||
.openerp {
|
||||
body.openerp {
|
||||
height: 100%;
|
||||
min-width: 1000px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* STATES */
|
||||
|
|
@ -60,8 +63,13 @@ body {
|
|||
background-color: #f88;
|
||||
}
|
||||
|
||||
/* Main */
|
||||
.openerp .main {
|
||||
/* Main*/
|
||||
.openerp .main_table {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/* Main Application */
|
||||
.openerp .application {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -81,6 +89,114 @@ body {
|
|||
}
|
||||
*/
|
||||
|
||||
.openerp .menu {
|
||||
height: 34px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
background: url(img/menu-bg.png) repeat-x;
|
||||
}
|
||||
.openerp .menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.openerp .menu li {
|
||||
display: -moz-inline-stack;
|
||||
display: inline; /*IE7 */
|
||||
display: inline-block;
|
||||
margin: 6px 1px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.openerp .menu a {
|
||||
display: block;
|
||||
float: left;
|
||||
padding: 0 0 0 3px;
|
||||
background: url(img/menu-item.png) no-repeat;
|
||||
color: #eee;
|
||||
text-shadow: #222 0 1px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.openerp .menu span {
|
||||
display: block;
|
||||
float: left;
|
||||
min-width: 60px;
|
||||
height: 23px;
|
||||
padding: 0 9px 0 6px;
|
||||
background: url(img/menu-item.png) 100% 0 no-repeat;
|
||||
line-height: 22px;
|
||||
font-weight: bold;
|
||||
font-size: 85%;
|
||||
}
|
||||
.openerp .menu ul li a:hover,
|
||||
.openerp .menu li a:focus,
|
||||
.openerp .menu ul li a.active {
|
||||
background-position: 0 -23px;
|
||||
color: #fff;
|
||||
}
|
||||
.openerp .menu ul li a:hover span,
|
||||
.openerp .menu ul li a:focus span,
|
||||
.openerp .menu ul li a.active span {
|
||||
background-position: 100% -23px;
|
||||
}
|
||||
/* Secondary Menu */
|
||||
.openerp .secondary_menu {
|
||||
width: 200px;
|
||||
min-width: 200px;
|
||||
border-right: 1px solid #3C3C3C;
|
||||
border-bottom: 1px solid #5A5858;
|
||||
background: #5A5858;
|
||||
vertical-align: top;
|
||||
}
|
||||
.openerp .secondary_menu .menu_content {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.openerp .secondary_menu h3 {
|
||||
padding: 0 0 2px;
|
||||
background: url(img/secondary_menu-bg.gif) 0 100% repeat-x;
|
||||
border: none;
|
||||
}
|
||||
.openerp .secondary_menu h4 {
|
||||
padding: 0 0 2px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.openerp .secondary_menu a {
|
||||
display: block;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
line-height: 20px;
|
||||
white-space: nowrap;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
text-shadow: 0 1px 0 #333;
|
||||
}
|
||||
.openerp .secondary_menu h3 a {
|
||||
background: url(img/secondary_menu-h3-bg.png) 0 100% repeat-x;
|
||||
}
|
||||
.openerp .secondary_menu a.leaf:hover,
|
||||
.openerp .secondary_menu a.leaf:active,
|
||||
.openerp .secondary_menu a.leaf.active,
|
||||
.openerp .secondary_menu h4:hover,
|
||||
.openerp .secondary_menu h4:active,
|
||||
.openerp .secondary_menu h4.active,
|
||||
.openerp .secondary_menu h4:hover a,
|
||||
.openerp .secondary_menu h4:active a,
|
||||
.openerp .secondary_menu h4.active a {
|
||||
background: url(img/secondary_menu-link-bg.gif) repeat-x;
|
||||
color: #3f3d3d;
|
||||
text-shadow: #fff 0 1px 0;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.openerp .header {
|
||||
height: 65px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html style="height: 100%">
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>OpenERP</title>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,41 @@
|
|||
<t t-name="Interface">
|
||||
<div id="oe_loading" class="loading"></div>
|
||||
<div id="oe_login" class="login"></div>
|
||||
<div id="oe_header" class="header"></div>
|
||||
<div id="oe_menu" style="border-bottom: 1px solid #000;"></div>
|
||||
<div id="oe_main" class="main"></div>
|
||||
<div id="oe_footer" class="footer">
|
||||
Powered by OpenERP.
|
||||
</div>
|
||||
<div id="oe_errors">
|
||||
Debug:
|
||||
</div>
|
||||
<div style="position: absolute; right: 2px; top: 38px;">
|
||||
<button onclick="QWeb.add_template('base.xml'); $('body').css('background-color', '#FFFF9C'); setTimeout(function() { $('body').css('background-color', '#FFF'); }, 500);">Reload QWEB</button>
|
||||
</div>
|
||||
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" class="main_table">
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div id="oe_header" class="header"></div>
|
||||
<div id="oe_menu" class="menu"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top" id="oe_secondary_menu" class="secondary_menu">
|
||||
</td>
|
||||
<td valign="top" width="100%" height="100%">
|
||||
<div id="oe_main" class="main">
|
||||
<div id="oe_application" class="application"></div>
|
||||
<div id="oe_sidebar"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div id="oe_footer" class="footer">
|
||||
Powered by OpenERP.
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div id="oe_errors">
|
||||
Debug:
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</t>
|
||||
<t t-name="Loading">
|
||||
Loading...
|
||||
|
|
@ -61,25 +84,45 @@
|
|||
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Menu.root">
|
||||
<ul class="sf-menu">
|
||||
<t t-foreach="data.children" t-as="menu">
|
||||
<t t-call="Menu.children"/>
|
||||
</t>
|
||||
<t t-name="Menu">
|
||||
<ul>
|
||||
<li t-foreach="data.children" t-as="menu">
|
||||
<a href="#" t-att-data-menu="menu.id">
|
||||
<span><t t-esc="menu.name"/></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="clear: both"></div>
|
||||
</t>
|
||||
<t t-name="Menu.children">
|
||||
<!-- TODO prefix id with the element_id of the controller -->
|
||||
<li><a href="#" t-attf-id="menu_#{menu.id}"><t t-esc="menu.name"/></a>
|
||||
<t t-if="menu.children.length!=0">
|
||||
<ul>
|
||||
<t t-foreach="menu.children" t-as="menu">
|
||||
<t t-call="Menu.children"/>
|
||||
</t>
|
||||
</ul>
|
||||
<t t-name="Menu.secondary">
|
||||
<div style="display: none" class="menu_accordion" t-att-data-menu-parent="menu.id">
|
||||
<t t-foreach="menu.children" t-as="menu">
|
||||
<t t-set="header">h3</t>
|
||||
<t t-call="Menu.secondary.children"/>
|
||||
</t>
|
||||
</li>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="Menu.secondary.children">
|
||||
<<t t-esc="header"/>>
|
||||
<a href="#" t-attf-id="menu_#{menu.id}">
|
||||
<span><t t-esc="menu.name"/></span>
|
||||
</a>
|
||||
</<t t-esc="header"/>>
|
||||
<div class="menu_content">
|
||||
<t t-foreach="menu.children" t-as="menu">
|
||||
<t t-if="!menu.children.length">
|
||||
<a href="#" class="leaf" t-att-data-menu="menu.id">
|
||||
<span><t t-esc="menu.name"/></span>
|
||||
</a>
|
||||
</t>
|
||||
<t t-if="menu.children.length">
|
||||
<div class="submenu_accordion">
|
||||
<t t-call="Menu.secondary.children">
|
||||
<t t-set="header">h4</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
</t>
|
||||
<t t-name="ListView">
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -430,8 +430,10 @@ openerp.base.Header = openerp.base.Controller.extend({
|
|||
});
|
||||
|
||||
openerp.base.Menu = openerp.base.Controller.extend({
|
||||
init: function(session, element_id, model) {
|
||||
init: function(session, element_id, secondary_menu_id) {
|
||||
this._super(session, element_id);
|
||||
this.secondary_menu_id = secondary_menu_id;
|
||||
this.$secondary_menu = $("#" + secondary_menu_id);
|
||||
this.menu = false;
|
||||
},
|
||||
start: function() {
|
||||
|
|
@ -439,22 +441,63 @@ openerp.base.Menu = openerp.base.Controller.extend({
|
|||
},
|
||||
on_loaded: function(data) {
|
||||
this.data = data;
|
||||
var $e = this.$element;
|
||||
$e.html(QWeb.render("Menu.root", this.data));
|
||||
$("ul.sf-menu").superfish({
|
||||
speed: 'fast'
|
||||
this.$element.html(QWeb.render("Menu", this.data));
|
||||
for (var i = 0; i < this.data.data.children.length; i++) {
|
||||
var v = { menu : this.data.data.children[i] };
|
||||
this.$secondary_menu.append(QWeb.render("Menu.secondary", v));
|
||||
}
|
||||
this.$secondary_menu.find("div.menu_accordion").accordion({
|
||||
animated : false,
|
||||
autoHeight : false,
|
||||
icons : false
|
||||
});
|
||||
$e.find("a").click(this.on_menu_click);
|
||||
this.$secondary_menu.find("div.submenu_accordion").accordion({
|
||||
animated : false,
|
||||
autoHeight : false,
|
||||
active: false,
|
||||
collapsible: true,
|
||||
header: 'h4'
|
||||
});
|
||||
|
||||
this.$element.add(this.$secondary_menu).find("a").click(this.on_menu_click);
|
||||
this.on_ready();
|
||||
},
|
||||
on_menu_click: function(ev) {
|
||||
var menu_id = Number(ev.target.id.split("_").pop());
|
||||
this.rpc("/base/menu/action", {"menu_id":menu_id}, this.on_menu_action_loaded);
|
||||
return false;
|
||||
on_menu_click: function(ev, id) {
|
||||
var id = id || 0, $menu, $parent, $secondary;
|
||||
if (id) {
|
||||
// We can manually activate a menu with it's id (for hash url mapping)
|
||||
$menu = $('a[data-menu=' + id + ']', this.$element);
|
||||
if (!$menu.length) {
|
||||
$menu = $('a[data-menu=' + id + ']', this.$secondary_menu);
|
||||
}
|
||||
} else {
|
||||
$menu = $(ev.currentTarget);
|
||||
id = parseInt($menu.attr('data-menu'));
|
||||
}
|
||||
if (this.$secondary_menu.has($menu).length) {
|
||||
$secondary = $menu.parents('.menu_accordion');
|
||||
var parent_id = $secondary.attr('data-menu-parent');
|
||||
$parent = $('a[data-menu=' + parent_id + ']', this.$element);
|
||||
} else {
|
||||
$parent = $menu;
|
||||
$secondary = this.$secondary_menu.find('.menu_accordion[data-menu-parent=' + $menu.attr('data-menu') + ']');
|
||||
}
|
||||
|
||||
this.$secondary_menu.find('.menu_accordion').hide();
|
||||
// TODO: ui-accordion : collapse submenus and expand the good one
|
||||
$secondary.show();
|
||||
this.rpc('/base/menu/action', {'menu_id': id}, this.on_menu_action_loaded);
|
||||
|
||||
$('.active', this.$element.add(this.$secondary_menu)).removeClass('active');
|
||||
$parent.addClass('active');
|
||||
$menu.addClass('active');
|
||||
$menu.parent('h4').addClass('active');
|
||||
|
||||
return !$menu.is(".leaf");
|
||||
},
|
||||
on_menu_action_loaded: function(data) {
|
||||
var self = this;
|
||||
if(data.action.length) {
|
||||
if (data.action.length) {
|
||||
var action = data.action[0][2];
|
||||
self.on_action(action);
|
||||
}
|
||||
|
|
@ -489,7 +532,7 @@ openerp.base.WebClient = openerp.base.Controller.extend({
|
|||
this.session.on_session_valid.add_last(this.header.do_update);
|
||||
this.session.on_session_valid.add_last(this.on_loggued);
|
||||
|
||||
this.menu = new openerp.base.Menu(this.session, "oe_menu");
|
||||
this.menu = new openerp.base.Menu(this.session, "oe_menu", "oe_secondary_menu");
|
||||
this.menu.on_action.add(this.on_menu_action);
|
||||
},
|
||||
start: function() {
|
||||
|
|
@ -499,7 +542,7 @@ openerp.base.WebClient = openerp.base.Controller.extend({
|
|||
this.menu.start();
|
||||
},
|
||||
on_loggued: function() {
|
||||
this.action = new openerp.base.Action(this.session, "oe_main");
|
||||
this.action = new openerp.base.Action(this.session, "oe_application");
|
||||
this.action.start();
|
||||
},
|
||||
on_menu_action: function(action) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue