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

bzr revid: fme@openerp.com-20110915202209-5rp3ltzz86msaajz

3 files changed, 45 insertions, 104 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 4645c55f692..9200cfc3383 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -221,17 +221,11 @@ label.error {
     height: 100%;
     background: #f0eeee;
 }
-
-/* Menu */
-.openerp .sf-menu {
-    margin-bottom: 0;
-}
-/*
-.sf-menu a {
-    padding: 5px 5px;
+.openerp .oe-application-container {
+    height: 100%;
 }
-*/
 
+/* Menu */
 .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;
-    color: #3f3d3d;
-    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 {
+    padding: 0 5px 2px 5px;
+    line-height: 20px;
     color: #3f3d3d;
+    text-decoration: none;
     text-shadow: #fff 0 1px 0;
-    border: none !important;
-}
-.openerp div.submenu_accordion div.menu_content a span {
-    padding-left: 20px;
 }
 
 /* Header */
diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index d114f485c62..0d671b25d53 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -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;
         }
     },
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 83ca819b4e6..95e2a7e5770 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -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>