[IMP] New menus

bzr revid: fme@openerp.com-20120228134121-bxs33qrpevrfkctp

5 files changed, 259 insertions, 294 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index c038b396554..59ae0011dce 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -17,6 +17,13 @@
   left: 0;
   right: 0;
 }
+.openerp2 .oe_webclient .oe_application {
+  position: absolute;
+  top: 32px;
+  bottom: 0;
+  left: 206px;
+  right: 0;
+}
 .openerp2 .oe_topbar {
   width: 100%;
   height: 31px;
@@ -65,6 +72,20 @@
 .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 .oe_menu {
   float: left;
   padding: 0;
@@ -98,6 +119,91 @@
   -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);
+  -khtml-opacity: 0.5;
+  -moz-opacity: 0.5;
+  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_dropdown_menu {
   float: right;
   padding: 0;
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c2a66db333e..c1df1b61226 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -1,3 +1,8 @@
+// Variables {{{
+$colour4: #8a89ba
+//$colour4: #d14836
+// }}}
+
 // Mixins {{{
 @mixin vertical-gradient($startColor: #555, $endColor: #333)
     background: $startColor
@@ -61,6 +66,13 @@
         bottom: 0
         left: 0
         right: 0
+
+        .oe_application
+            position: absolute
+            top: 32px
+            bottom: 0
+            left: 206px
+            right: 0
     // }}}
 
     // Topbar {{{
@@ -101,6 +113,22 @@
             vertical-align: top
     // }}}
 
+    // Leftbar {{{
+    .oe_leftbar
+        width: 205px
+        height: 100%
+        background: #f0eeee
+        border-right: 1px solid #afafb6
+        overflow: auto
+        text-shadow: 0 1px 1px white
+
+        .oe_footer
+            position: absolute
+            width: 205px
+            text-align: center
+            bottom: 8px
+    // }}}
+
     // Menu {{{
     .oe_menu
         float: left
@@ -126,6 +154,70 @@
             font-weight: bold
             color: white
             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+    .oe_secondary_menu_section
+        font-weight: bold
+        margin-left: 8px
+        color: $colour4
+    .oe_secondary_submenu
+        padding: 2px 0 8px 0
+        margin: 0
+        width: 100%
+        display: inline-block
+        li
+            position: relative
+            padding: 1px 0 1px 16px
+            list-style-type: none
+            a
+                display: block
+                color: #4c4c4c
+                padding: 2px 4px 2px 0
+            .oe_menu_label
+                position: absolute
+                top: 1px
+                right: 1px
+                font-size: 10px
+                background: $colour4
+                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)
+                @include radius(4px)
+                @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
+        .oe_active
+            background: $colour4
+            border-top: 1px solid lightGray
+            border-bottom: 1px solid lightGray
+            text-shadow: 0 1px 1px rgba(0,0,0,0.2)
+            @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
+            a
+                color: white
+            .oe_menu_label
+                background: #eee
+                color: $colour4
+                text-shadow: 0 1px 1px white
+                @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
+        .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
+            @include opacity(0.5)
+        .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
     // }}}
 
     // DropDown Menu {{{
diff --git a/addons/web/static/src/css/base_old.css b/addons/web/static/src/css/base_old.css
index 9b5bdb2e15b..082a18a922e 100644
--- a/addons/web/static/src/css/base_old.css
+++ b/addons/web/static/src/css/base_old.css
@@ -385,184 +385,6 @@ label.error {
     min-height: 100%\9;
 }
 
-/* Menu */
-.openerp .menu {
-    height: 34px;
-    background: #cc4e45; /* Old browsers */
-    background: -moz-linear-gradient(top, #cc4e45 0%, #b52d20 8%, #7a211a 100%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc4e45), color-stop(8%,#b52d20), color-stop(100%,#7a211a)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #cc4e45 0%,#b52d20 8%,#7a211a 100%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #cc4e45 0%,#b52d20 8%,#7a211a 100%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #cc4e45 0%,#b52d20 8%,#7a211a 100%); /* IE10+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CC4E45', endColorstr='#7A211A',GradientType=0 ); /* IE6-9 */
-    background: linear-gradient(top, #cc4e45 0%,#b52d20 8%,#7a211a 100%); /* W3C */
-}
-.openerp .menu td {
-    text-align: center;
-    padding:0;
-}
-.openerp .menu a {
-    display:block;
-    min-width: 60px;
-    height: 20px;
-    margin: 3px 2px;
-    padding: 0 8px;
-
-    background: #bd5e54; /* Old browsers */
-    background: -moz-linear-gradient(top, #bd5e54 0%, #90322a 60%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd5e54), color-stop(60%,#90322a)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #bd5e54 0%,#90322a 60%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #bd5e54 0%,#90322a 60%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #bd5e54 0%,#90322a 60%); /* IE10+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BD5E54', endColorstr='#90322A',GradientType=0 ); /* IE6-9 */
-    background: linear-gradient(top, #bd5e54 0%,#90322a 60%); /* W3C */
-
-    border: 1px solid #5E1A14;
-    border-radius: 4px;
-    -moz-border-radius: 4px;
-    -webkit-border-radius: 4px;
-
-    color: #eee;
-    text-shadow: #222 0 1px 0;
-    text-decoration: none;
-    text-transform: uppercase;
-    line-height: 20px;
-    font-weight: bold;
-    font-size: 75%;
-
-    white-space: nowrap;
-}
-.openerp .menu a:hover,
-.openerp .menu a:focus,
-.openerp .menu a.active {
-    background: #c6c6c6; /* Old browsers */
-    background: -moz-linear-gradient(top, #c6c6c6 0%, #5c5c5c 7%, #969595 86%); /* FF3.6+ */
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c6c6c6), color-stop(7%,#5c5c5c), color-stop(86%,#969595)); /* Chrome,Safari4+ */
-    background: -webkit-linear-gradient(top, #c6c6c6 0%,#5c5c5c 7%,#969595 86%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #c6c6c6 0%,#5c5c5c 7%,#969595 86%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #c6c6c6 0%,#5c5c5c 7%,#969595 86%); /* IE10+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C6C6C6', endColorstr='#969595',GradientType=0 ); /* IE6-9 */
-    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;
-}
-/* Secondary Menu */
-.openerp .secondary_menu .oe_toggle_secondary_menu {
-    position: absolute;
-    cursor: pointer;
-    border-left: 1px solid #282828;
-    border-bottom: 1px solid #282828;
-    width: 21px;
-    height: 21px;
-    z-index: 10;
-    background: transparent;
-    color: white;
-    text-shadow: 0 1px 0 #333;
-    text-align: center;
-    font-size: 18px;
-    line-height: 18px;
-    right: 0;
-}
-.openerp .secondary_menu.oe_folded .oe_toggle_secondary_menu {
-    position: static;
-    border-left: none;
-    border-bottom: 1px solid #282828;
-    width: 21px;
-    height: 21px;
-    background: #818181;
-}
-.openerp .secondary_menu.oe_folded .oe_toggle_secondary_menu span.oe_menu_fold {
-    display: none;
-}
-.openerp .secondary_menu.oe_unfolded .oe_toggle_secondary_menu span.oe_menu_unfold {
-    display: none;
-}
-.openerp .secondary_menu {
-    width: 200px;
-    min-width: 200px;
-    border-right: 1px solid #3C3C3C;
-    border-bottom: 1px solid #5A5858;
-    background: #5A5858;
-    vertical-align: top;
-    height: 100%;
-    display: block;
-    position: relative;
-    font-size:85%;
-}
-.openerp .secondary_menu.oe_folded {
-    width: 20px;
-    min-width: 20px;
-    position: static;
-}
-.openerp .secondary_menu.oe_folded .oe_secondary_menu.active {
-    position: absolute;
-    z-index: 100;
-    border: 4px solid #585858;
-    border-color: rgba(88, 88, 88, .5);
-    border-radius: 4px;
-    min-width: 200px;
-}
-.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 .oe_secondary_submenu {
-    background: #5A5858;
-}
-.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+ */
-    background: -webkit-linear-gradient(top, #949292 0%,#6d6b6b 87%,#282828 99%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #949292 0%,#6d6b6b 87%,#282828 99%); /* Opera11.10+ */
-    background: -ms-linear-gradient(top, #949292 0%,#6d6b6b 87%,#282828 99%); /* IE10+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949292', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
-    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 */
-    white-space: nowrap;
-    color: white;
-    text-shadow: 0 1px 0 #333;
-
-}
-.openerp a.oe_secondary_submenu_item {
-    padding: 0 5px 2px 10px;
-}
-.openerp a.oe_secondary_submenu_item,
-.openerp a.oe_secondary_menu_item {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.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+ */
-    background: -webkit-linear-gradient(top, #ffffff 0%,#d8d8d8 11%,#afafaf 86%,#333333 91%,#5a5858 96%); /* Chrome10+,Safari5.1+ */
-    background: -o-linear-gradient(top, #ffffff 0%,#d8d8d8 11%,#afafaf 86%,#333333 91%,#5a5858 96%); /* Opera11.10+ */
-    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 */
-    padding: 0 5px 2px 10px;
-    line-height: 20px;
-    color: #3f3d3d;
-    text-decoration: none;
-    text-shadow: #fff 0 1px 0;
-}
-.openerp a.oe_secondary_submenu_item.submenu.opened span:before {
-    content: "\25be";
-}
-.openerp a.oe_secondary_submenu_item.submenu span:before {
-    content: "\25b8";
-}
-
 /* Footer */
 .openerp div.oe_footer {
     background: none repeat scroll 0 0 #CCCCCC;
@@ -1744,10 +1566,6 @@ label.error {
     background: url(http://placekitten.com/g/211/65) repeat;
 }
 
-.openerp.kitten-mode-activated .secondary_menu {
-    background: url(http://placekitten.com/g/212/100) repeat;
-}
-
 .openerp.kitten-mode-activated .menu {
     background: #828282;
     background: -moz-linear-gradient(top, #828282 0%, #4D4D4D 100%);
@@ -1769,7 +1587,6 @@ label.error {
 .openerp.kitten-mode-activated .menu,
 .openerp.kitten-mode-activated .header_corner,
 .openerp.kitten-mode-activated .header_title,
-.openerp.kitten-mode-activated .secondary_menu div,
 .openerp.kitten-mode-activated .oe-application,
 .openerp.kitten-mode-activated .oe_footer,
 .openerp.kitten-mode-activated .loading,
diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js
index 9b8ef61fc3a..29751eba313 100644
--- a/addons/web/static/src/js/chrome.js
+++ b/addons/web/static/src/js/chrome.js
@@ -685,12 +685,14 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
     on_loaded: function(data) {
         this.data = data;
         this.render_element();
-        if (!this.$secondary_menu && this.getParent()) {
+        if (!this.$secondary_menus && this.getParent()) {
             // TODO: create Widget openerp.web.SubMenu
-            this.$secondary_menu = this.getParent().$element.find('.oe_secondary_menu');
+            this.$secondary_menus = this.getParent().$element.find('.oe_secondary_menus_container');
+            this.$element.add(this.$secondary_menus).on('click', 'a[data-menu]', this.on_menu_click);
         }
-        this.$secondary_menu.html(QWeb.render("Menu.secondary", { widget : this }));
-        this.$element.add(this.$secondary_menu).find("a").click(this.on_menu_click);
+        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();
     },
     /**
      * Opens a given menu by id, as if a user had browsed to that menu by hand
@@ -698,39 +700,36 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
      *
      * @param {Number} menu_id database id of the terminal menu to select
      */
-    open_menu: function (menu_id) {
-        this.$element.add(this.$secondary_menu).find('.oe_active')
-                .removeClass('oe_active');
-        this.$secondary_menu.find('> .oe_secondary_menu').hide();
+    open_menu: function (id) {
+        var $clicked_menu, $sub_menu, $main_menu;
+        $clicked_menu = this.$element.add(this.$secondary_menus).find('a[data-menu=' + id + ']');
 
-        var $primary_menu;
-        var $secondary_submenu = this.$secondary_menu.find(
-                'a[data-menu=' + menu_id +']');
-        if ($secondary_submenu.length) {
-            for(;;) {
-                if ($secondary_submenu.hasClass('leaf')) {
-                    $secondary_submenu.addClass('oe_active');
-                } else if ($secondary_submenu.hasClass('submenu')) {
-                    $secondary_submenu.addClass('opened')
-                }
-                var $parent = $secondary_submenu.parent().show();
-                if ($parent.hasClass('oe_secondary_menu')) {
-                    var primary_id = $parent.data('menu-parent');
-                    $primary_menu = this.$element.find(
-                            'a[data-menu=' + primary_id + ']');
-                    break;
-                }
-                $secondary_submenu = $parent.prev();
-            }
+        if (this.$secondary_menus.has($clicked_menu).length) {
+            $sub_menu = $clicked_menu.parents('.oe_secondary_menu');
+            $main_menu = this.$element.find('a[data-menu=' + $sub_menu.data('menu-parent') + ']');
         } else {
-            $primary_menu = this.$element.find('a[data-menu=' + menu_id + ']');
+            $sub_menu = this.$secondary_menus.find('.oe_secondary_menu[data-menu-parent=' + $clicked_menu.attr('data-menu') + ']');
+            $main_menu = $clicked_menu;
         }
-        if (!$primary_menu.length) {
-            return;
+
+        // Activate current main menu
+        this.$element.find('.oe_active').removeClass('oe_active');
+        $main_menu.addClass('oe_active');
+
+        // Show current sub menu
+        this.$secondary_menus.find('.oe_secondary_menu').hide();
+        $sub_menu.show();
+
+        // Activate current menu item and show parents
+        this.$secondary_menus.find('.oe_active').removeClass('oe_active');
+        if ($main_menu !== $clicked_menu) {
+            $clicked_menu.parents().show();
+            if ($clicked_menu.is('.oe_menu_toggler')) {
+                $clicked_menu.toggleClass('oe_menu_opened').siblings('.oe_secondary_submenu:first').toggle();
+            } else {
+                $clicked_menu.parent().addClass('oe_active');
+            }
         }
-        $primary_menu.addClass('oe_active');
-        this.$secondary_menu.find(
-            'div[data-menu-parent=' + $primary_menu.data('menu') + ']').addClass('oe_active');
     },
     on_menu_click: function(ev, id) {
         id = id || 0;
@@ -741,14 +740,15 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
             manual = true;
             $clicked_menu = this.$element.find('a[data-menu=' + id + ']');
             if (!$clicked_menu.length) {
-                $clicked_menu = this.$secondary_menu.find('a[data-menu=' + id + ']');
+                $clicked_menu = this.$secondary_menus.find('a[data-menu=' + id + ']');
             }
         } else {
             $clicked_menu = $(ev.currentTarget);
             id = $clicked_menu.data('menu');
         }
 
-        if (this.do_menu_click($clicked_menu, manual) && id) {
+        if (id) {
+            this.open_menu(id);
             this.current_menu = id;
             this.session.active_id = id;
             this.rpc('/web/menu/action', {'menu_id': id}, this.on_menu_action_loaded);
@@ -758,52 +758,9 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
         }
         return false;
     },
-    do_menu_click: function($clicked_menu, manual) {
-        var $sub_menu, $main_menu,
-            active = $clicked_menu.is('.oe_active'),
-            sub_menu_visible = false,
-            has_submenu_items = false;
-
-        if (this.$secondary_menu.has($clicked_menu).length) {
-            $sub_menu = $clicked_menu.parents('.oe_secondary_menu');
-            $main_menu = this.$element.find('a[data-menu=' + $sub_menu.data('menu-parent') + ']');
-        } else {
-            $sub_menu = this.$secondary_menu.find('.oe_secondary_menu[data-menu-parent=' + $clicked_menu.attr('data-menu') + ']');
-            $main_menu = $clicked_menu;
-        }
-
-        sub_menu_visible = $sub_menu.is(':visible');
-        has_submenu_items = !!$sub_menu.children().length;
-        this.$secondary_menu.find('.oe_secondary_menu').hide();
-
-        $('.oe_active', this.$element.add(this.$secondary_menu)).removeClass('oe_active');
-        $main_menu.add($clicked_menu).add($sub_menu).addClass('oe_active');
-
-        if (has_submenu_items) {
-            if (!manual) {
-                this.do_show_secondary($sub_menu, $main_menu);
-            } else {
-                this.do_show_secondary();
-            }
-        }
-
-        if ($main_menu != $clicked_menu) {
-            if ($clicked_menu.is('.submenu')) {
-                $clicked_menu.toggleClass('opened').next().toggle();
-            } else if ($clicked_menu.is('.leaf')) {
-                return true;
-            }
-        } else {
-            return true;
-        }
-        return false;
-    },
-    do_hide_secondary: function() {
-        //this.$secondary_menu.hide();
-    },
     do_show_secondary: function($sub_menu, $main_menu) {
         var self = this;
-        this.$secondary_menu.show();
+        this.$secondary_menus.show();
         if (!arguments.length) {
             return;
         }
@@ -1048,7 +1005,7 @@ openerp.web.WebClient = openerp.web.Widget.extend(/** @lends openerp.web.WebClie
             if(self.action_manager)
                 self.action_manager.destroy();
             self.action_manager = new openerp.web.ActionManager(self);
-            self.action_manager.appendTo($("#oe_app"));
+            self.action_manager.appendTo(self.$element.find('.oe_application'));
             self.bind_hashchange();
             var version_label = _t("OpenERP - Unsupported/Community Version");
             if (!self.session.openerp_entreprise) {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index c9c3bb65857..66c6b316393 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -24,30 +24,16 @@
             <div class="oe_dropdown_menu_placeholder"/>
         </div>
         <div class="oe_leftbar">
+            <div class="oe_secondary_menus_container"/>
             <!--
             <a href="#" class="oe_logo"><img src="img/logo.png"/></a>
 
-            <div class="oe_secondary_menu"/>
-
             <div class="oe_footer">
                 Powered by <a href="http://www.openerp.com" class="openerp"><span class="red">Open</span>ERP</a>
             </div>
             -->
         </div>
-        <div class="oe_application">
-            <!-- This table will be removed as soon as we decide what will happen to the sidebar -->
-            <table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
-            <tr>
-                <td valign="top" class="secondary_menu">
-                    <div class="oe_secondary_menu"/>
-                </td>
-                <td valign="top" class="oe-application-container">
-                    <div id="oe_app" class="oe-application">
-                    </div>
-                </td>
-            </tr>
-            </table>
-        </div>
+        <div class="oe_application"/>
     </div>
 </t>
 <t t-name="Loading">
@@ -351,25 +337,32 @@
 <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">
-            <t t-set="classname" t-translation="off">oe_secondary_menu_item</t>
-            <t t-set="level" t-value="0"/>
-            <t t-call="Menu.secondary.children"/>
+            <div class="oe_secondary_menu_section">
+                <t t-esc="menu.name"/>
+                <!--
+                    Shall the section be still clickable ?
+                    <t t-call="Menu.secondary.link"/>
+                -->
+            </div>
+            <t t-call="Menu.secondary.submenu"/>
         </t>
     </div>
 </t>
-<t t-name="Menu.secondary.children">
-    <t t-set="level" t-value="level + 1"/>
-    <a href="#" t-att-id="menu.children.length ? 'menu_' + menu.id : undefined"
-        t-att-class="classname + (menu.children.length ? ' submenu' : ' leaf') + (menu_first and level == 1 ? ' opened' : '')"
-        t-att-data-menu="menu.children.length ? undefined : menu.id">
-        <span t-attf-style="padding-left: #{(level - 2) * 20}px"> <t t-esc="menu.name"/></span>
+<t t-name="Menu.secondary.submenu">
+    <ul t-if="menu.children.length" class="oe_secondary_submenu">
+        <li t-foreach="menu.children" t-as="menu">
+            <t t-call="Menu.secondary.link"/>
+            <!--<span class="oe_menu_label">8</span>-->
+            <t t-call="Menu.secondary.submenu"/>
+        </li>
+    </ul>
+</t>
+<t t-name="Menu.secondary.link">
+    <a href="#"
+        t-att-class="menu.children.length ? 'oe_menu_toggler' : 'oe_menu_leaf'"
+        t-att-data-menu="menu.id">
+        <t t-esc="menu.name"/>
     </a>
-    <div t-attf-class="oe_secondary_submenu" t-if="menu.children.length" t-att-style="level == 1 ? undefined : 'display: none'">
-        <t t-foreach="menu.children" t-as="menu">
-            <t t-set="classname" t-translation="off">oe_secondary_submenu_item</t>
-            <t t-call="Menu.secondary.children"/>
-        </t>
-    </div>
 </t>
 
 <t t-name="DropDownMenu">