From 037793e811b16c8b316dc23dc87a4e832e8482e1 Mon Sep 17 00:00:00 2001
From: Minh Tran <mit@openerp.com>
Date: Mon, 2 Apr 2012 17:56:50 +0200
Subject: [PATCH] Styling of sidebar dropdown menu

bzr revid: mit@openerp.com-20120402155650-6wuiymgslior2vfz
---
 addons/web/static/src/css/base.css  | 187 +++++++++++++++++++++++++++-
 addons/web/static/src/css/base.sass |  53 ++++++++
 addons/web/static/src/js/views.js   |  15 ++-
 addons/web/static/src/xml/base.xml  |   4 +-
 4 files changed, 251 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 5077db3901b..63bed28ea07 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -137,6 +137,66 @@
   background-image: -o-linear-gradient(top, #dc5f59, #b33630);
   background-image: linear-gradient(to bottom, #dc5f59, #b33630);
 }
+.openerp2 table {
+  padding: 0;
+  font-size: 13px;
+  border-collapse: collapse;
+}
+.openerp2 thead {
+  font-weight: bold;
+  background-color: #f0f0f0;
+}
+.openerp2 thead th {
+  border-right: 1px dotted #afafb6;
+}
+.openerp2 thead th:last-child {
+  border-right: none;
+}
+.openerp2 th, .openerp2 td {
+  padding: 0;
+  line-height: 18px;
+  text-align: left;
+}
+.openerp2 th {
+  font-weight: bold;
+  vertical-align: middle;
+}
+.openerp2 td {
+  vertical-align: top;
+}
+.openerp2 .zebra tbody tr:nth-child(odd) td {
+  background-color: #f0f0fa;
+  background-color: #f0f0fa;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
+  background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -moz-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -ms-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -o-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
+}
+.openerp2 .zebra tbody tr:hover td {
+  background-color: #eeeeee;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#dedede));
+  background-image: -webkit-linear-gradient(top, #eeeeee, #dedede);
+  background-image: -moz-linear-gradient(top, #eeeeee, #dedede);
+  background-image: -ms-linear-gradient(top, #eeeeee, #dedede);
+  background-image: -o-linear-gradient(top, #eeeeee, #dedede);
+  background-image: linear-gradient(to bottom, #eeeeee, #dedede);
+}
+.openerp2 .numeric {
+  text-align: right;
+  width: 82px;
+}
+.openerp2 .numeric input {
+  text-align: right;
+}
+.openerp2 ul, .openerp2 li {
+  margin: 0;
+  padding: 0;
+}
+.openerp2 li {
+  list-style-type: none;
+}
 .openerp2 .oe_left {
   float: left;
 }
@@ -337,7 +397,6 @@
   margin: 0;
 }
 .openerp2 .oe_menu li {
-  list-style-type: none;
   float: left;
 }
 .openerp2 .oe_menu a {
@@ -396,7 +455,6 @@
 .openerp2 .oe_secondary_submenu li {
   position: relative;
   padding: 1px 0 1px 16px;
-  list-style-type: none;
 }
 .openerp2 .oe_secondary_submenu li a {
   display: block;
@@ -517,7 +575,6 @@
 .openerp2 .oe_form_topbar ul li {
   padding: 0;
   margin: 0;
-  list-style-type: none;
   float: left;
   vertical-align: top;
   border-right: 1px solid #cacaca;
@@ -650,8 +707,128 @@
   border-bottom-color: transparent;
   cursor: default;
 }
-.openerp2 .oe_form_label_help[for], .openerp2 .oe_form_label[for] {
-  white-space: nowrap;
+.openerp2 .oe_form_dropdown_section {
+  position: relative;
+  display: inline-block;
+  margin-right: 4px;
+}
+.openerp2 .oe_dropdown_toggle:after {
+  width: 0;
+  height: 0;
+  display: inline-block;
+  content: "&darr";
+  text-indent: -99999px;
+  vertical-align: top;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid white;
+  filter: alpha(opacity=50);
+  opacity: 0.5;
+  margin-top: 7px;
+  margin-left: 6px;
+  border-top-color: #404040;
+}
+.openerp2 .oe_dropdown_menu {
+  display: none;
+  position: absolute;
+  top: 28px;
+  left: 0px;
+  padding: 8px;
+  border: 1px solid #afafb6;
+  width: 120px;
+  overflow-x: hidden;
+  z-index: 900;
+  background: white;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -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);
+}
+.openerp2 .oe_dropdown_menu li {
+  list-style-type: none;
+  float: none;
+  display: block;
+  background-color: none;
+}
+.openerp2 .oe_dropdown_menu li a {
+  display: block;
+  padding: 3px 6px;
+  clear: both;
+  font-weight: normal;
+  line-height: 14px;
+  color: #4c4c4c;
+  text-decoration: none;
+}
+.openerp2 .oe_dropdown_menu li a:hover {
+  text-decoration: none;
+  background-color: #f0f0fa;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
+  background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -moz-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -ms-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: -o-linear-gradient(top, #f0f0fa, #eeeef6);
+  background-image: linear-gradient(to bottom, #f0f0fa, #eeeef6);
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+}
+.openerp2 .oe_kanban_group_title {
+  margin: 1px 1px 4px;
+  font-size: 15px;
+  font-weight: bold;
+  text-shadow: 0 1px 0 white;
+}
+.openerp2 .oe_kanban_column, .openerp2 .oe_kanban_group_header {
+  width: 240px;
+  vertical-align: top;
+  padding: 6px 7px 6px 6px;
+  background: #f0eeee;
+  border-left: 1px solid #f0f8f8;
+  border-right: 1px solid #b9b9b9;
+}
+.openerp2 .oe_kanban_record {
+  position: relative;
+  display: block;
+  min-height: 50px;
+  background: white;
+  border: 1px solid #d8d8d8;
+  border-bottom-color: #b9b9b9;
+  padding: 6px;
+  margin: 6px 0;
+  display: block;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  border-radius: 4px;
+}
+.openerp2 .oe_kanban_record:last-child {
+  margin-bottom: 0;
+}
+.openerp2 .oe_kanban_record:hover {
+  -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
+  -box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
+}
+.openerp2 .oe_kanban_record .oe_kanban_title {
+  font-weight: bold;
+  margin: 2px 4px;
+}
+.openerp2 .oe_kanban_gravatar {
+  width: 20px;
+  height: 20px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  border-radius: 3px;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.openerp2 .oe_application a {
+  color: #8a89ba;
+}
+.openerp2 .oe_application a:hover {
+  text-decoration: underline;
 }
 
 .openerp .oe_form_field_many2one td:first-child {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index 2214394ca4c..ab1c3c0ec99 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -587,6 +587,59 @@ $colour4: #8a89ba
         border-bottom-color: transparent
         cursor: default
 
+
+    .oe_form_dropdown_section
+        position: relative
+        display: inline-block
+        margin-right: 4px
+
+    .oe_dropdown_toggle:after
+        width: 0
+        height: 0
+        display: inline-block
+        content: "&darr"
+        text-indent: -99999px
+        vertical-align: top
+        border-left: 4px solid transparent
+        border-right: 4px solid transparent
+        border-top: 4px solid white
+        @include opacity(0.5)
+
+        margin-top: 7px
+        margin-left: 6px
+        border-top-color: #404040
+
+    .oe_dropdown_menu
+        display: none
+        position: absolute
+        top: 28px
+        left: 0px
+        padding: 8px
+        border: 1px solid #afafb6
+        width: 120px
+        overflow-x: hidden
+        z-index: 900
+        background: white
+        @include radius(3px)
+        @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
+        li
+            list-style-type: none
+            float: none
+            display: block
+            background-color: none
+            a
+                display: block
+                padding: 3px 6px
+                clear: both
+                font-weight: normal
+                line-height: 14px
+                color: #4c4c4c
+                text-decoration: none
+                &:hover
+                    text-decoration: none
+                    @include vertical-gradient(#f0f0fa, #eeeef6)
+                    @include box-shadow(none)
+
     // }}}
     // Kanban view {{{
     .oe_kanban_group_title
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index f71066990f0..96e5632b976 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -793,9 +793,22 @@ session.web.Sidebar = session.web.Widget.extend({
         this.items = {};
         this.sections = {};
     },
+
     start: function() {
+        var self = this;
         this._super(this);
+        this.$element.find('.oe_dropdown_toggle').click(function() {
+            self.$element.find('.oe_dropdown_menu').toggle();
+            return false;
+        });
+        this.$element.on('click', '.oe_dropdown_menu li a', function() {
+            var f = self['on_menu_' + $(this).data('menu')];
+            f && f($(this));
+            self.$element.find('.oe_dropdown_menu').hide();
+            return false;
+        });
     },
+
     add_default_sections: function() {
         var self = this;
         var view = this.getParent();
@@ -905,7 +918,7 @@ session.web.Sidebar = session.web.Widget.extend({
 
             var $ul = $section.find('ul');
             if(!$ul.length) {
-                $ul = $('<ul/>').appendTo($section);
+                $ul = $('<ul class="oe_dropdown_menu"/>').appendTo($section);
             }
             $items.appendTo($ul);
         }
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 40f8448059a..f7b5960f82c 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -514,8 +514,8 @@
     </div>
 </t>
 <t t-name="Sidebar.section">
-    <div t-att-id="section_id" t-att-class="classname">
-        <h2><t t-esc="name"/></h2>
+    <div t-att-id="section_id" t-attf-class="#{classname} oe_form_dropdown_section ">
+        <button class="oe_dropdown_toggle"><t t-esc="name"/></button>
     </div>
 </t>
 <t t-name="Sidebar.section.items">