pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] Get rid of jQuery accordion. Improved menu (WIP). Now all levels are working

Browse Source 
bzr revid: fme@openerp.com-20110915202209-5rp3ltzz86msaajz
This commit is contained in:
Fabien Meghazi
2011-09-15 22:22:09 +02:00
parent 6af24261ba
commit c0936ac657
3 changed files with 45 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/css/base.css
+18 -58
View File
@@ -221,17 +221,11 @@ label.error {
height: 100%;
background: #f0eeee;
}
.openerp .oe-application-container {
height: 100%;
}
/* Menu */
.openerp .sf-menu {
margin-bottom: 0;
}
/*
.sf-menu a {
padding: 5px 5px;
}
*/
.openerp .menu {
height: 34px;
background: #cc4e45; /* Old browsers */
@@ -291,12 +285,8 @@ label.error {
background: linear-gradient(top, #c6c6c6 0%,#5c5c5c 7%,#969595 86%); /* W3C */
/* for ie */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c5c5c', endColorstr='#969595',GradientType=0 ); /* IE6-9 */
color: #fff;
}
.openerp .oe-application-container {
height: 100%;
}
/* Secondary Menu */
.openerp .secondary_menu {
width: 200px;
@@ -307,14 +297,16 @@ label.error {
vertical-align: top;
height: 100%;
}
.openerp .secondary_menu .menu_content {
padding: 0;
border: none;
background: none;
overflow: hidden;
.openerp .secondary_menu a {
display: block;
padding: 0 5px 2px 5px;
line-height: 20px;
text-decoration: none;
white-space: nowrap;
color: white;
text-shadow: 0 1px 0 #333;
}
.openerp .secondary_menu h3 {
padding: 0 0 2px;
.openerp .secondary_menu a.oe_secondary_menu_item {
background: #949292; /* Old browsers */
background: -moz-linear-gradient(top, #949292 0%, #6d6b6b 87%, #282828 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#949292), color-stop(87%,#6d6b6b), color-stop(99%,#282828)); /* Chrome,Safari4+ */
@@ -325,34 +317,13 @@ label.error {
background: linear-gradient(top, #949292 0%,#6d6b6b 87%,#282828 99%); /* W3C */
/* for ie9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949292', endColorstr='#5B5A5A',GradientType=0 ); /* IE6-9 */
border: none;
/* overriding jquery ui */
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
}
.openerp .secondary_menu h4 {
padding: 0 0 2px 10px;
border: none;
background: none;
}
.openerp .secondary_menu h3 span, .openerp .secondary_menu h4 span {
left: 0 !important;
}
.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 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 a.oe_secondary_submenu_item:hover,
.openerp a.oe_secondary_submenu_item.leaf.active {
display: block;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #d8d8d8 11%, #afafaf 86%, #333333 91%, #5a5858 96%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(11%,#d8d8d8), color-stop(86%,#afafaf), color-stop(91%,#333333), color-stop(96%,#5a5858)); /* Chrome,Safari4+ */
@@ -361,22 +332,11 @@ label.error {
background: -ms-linear-gradient(top, #ffffff 0%,#d8d8d8 11%,#afafaf 86%,#333333 91%,#5a5858 96%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#5A5858',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#d8d8d8 11%,#afafaf 86%,#333333 91%,#5a5858 96%); /* W3C */
/* overriding jquery ui */
-moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0;
padding: 0 5px 2px 5px;
line-height: 20px;
color: #3f3d3d;
text-decoration: none;
text-shadow: #fff 0 1px 0;
border: none !important;
}
.openerp .secondary_menu h4:hover a,
.openerp .secondary_menu h4:active a,
.openerp .secondary_menu h4.active a {
color: #3f3d3d;
text-shadow: #fff 0 1px 0;
border: none !important;
}
.openerp div.submenu_accordion div.menu_content a span {
padding-left: 20px;
}
/* Header */
addons/web/static/src/js/chrome.js
+8 -17
View File
@@ -787,18 +787,6 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
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
});
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);
},
@@ -817,15 +805,14 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
id = $menu.data('menu');
}
if (this.$secondary_menu.has($menu).length) {
$secondary = $menu.parents('.menu_accordion');
$secondary = $menu.parents('.oe_secondary_menu');
$parent = this.$element.find('a[data-menu=' + $secondary.data('menu-parent') + ']');
} else {
$parent = $menu;
$secondary = this.$secondary_menu.find('.menu_accordion[data-menu-parent=' + $menu.attr('data-menu') + ']');
$secondary = this.$secondary_menu.find('.oe_secondary_menu[data-menu-parent=' + $menu.attr('data-menu') + ']');
}
this.$secondary_menu.find('.menu_accordion').hide();
// TODO: ui-accordion : collapse submenus and expand the good one
this.$secondary_menu.find('.oe_secondary_menu').hide();
$secondary.show();
if (id) {
@@ -837,11 +824,15 @@ openerp.web.Menu = openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
$('.active', this.$element.add(this.$secondary_menu.show())).removeClass('active');
$parent.addClass('active');
$menu.addClass('active');
$menu.parent('h4').addClass('active');
if (this.$secondary_menu.has($menu).length) {
if ($menu.is('.submenu')) {
$menu.next().toggle();
return false;
}
return !$menu.is(".leaf");
} else {
$secondary.find('.oe_secondary_submenu').hide().eq(0).show();
return false;
}
},
addons/web/static/src/xml/base.xml
+19 -29
View File
@@ -374,45 +374,35 @@
</ul>
<t t-name="Menu">
<table align="center">
<tr>
<t t-foreach="data.children" t-as="menu">
<td>
<a href="#" t-att-data-menu="menu.id">
<t t-esc="menu.name"/>
</a>
</td>
</t>
</tr>
<tr>
<td t-foreach="data.children" t-as="menu">
<a href="#" t-att-data-menu="menu.id">
<t t-esc="menu.name"/>
</a>
</td>
</tr>
</table>
</t>
<t t-name="Menu.secondary">
<div style="display: none" class="menu_accordion" t-att-data-menu-parent="menu.id">
<div style="display: none" class="oe_secondary_menu" t-att-data-menu-parent="menu.id">
<t t-foreach="menu.children" t-as="menu">
<t t-set="header">h3</t>
<t t-set="classname">oe_secondary_menu_item</t>
<t t-set="level" t-value="0"/>
<t t-call="Menu.secondary.children"/>
</t>
</div>
</t>
<t t-name="Menu.secondary.children">
&lt;<t t-esc="header"/>&gt;
<a href="#" t-attf-id="menu_#{menu.id}">
<span><t t-esc="menu.name"/></span>
</a>
&lt;/<t t-esc="header"/>&gt;
<div class="menu_content">
<t t-set="level" t-value="level + 1"/>
<a href="#" t-att-class="classname + (menu.children.length ? ' submenu' : ' leaf')" t-att-data-menu="menu.children.length ? undefined : menu.id">
<span t-attf-style="padding-left: #{level - 1}em">
<t t-esc="menu.children.length ? '+' : '-'"/> <t t-esc="menu.name"/>
</span>
</a>
<div t-attf-class="oe_secondary_submenu oe_secondary_submenu_level_#{level}" t-if="menu.children.length" style="display: none">
<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 t-set="classname">oe_secondary_submenu_item</t>
<t t-call="Menu.secondary.children"/>
</t>
</div>
</t>