From 135be629b12625323ed73d7622ee5eb04f361e13 Mon Sep 17 00:00:00 2001
From: Fabien Meghazi <fme@openerp.com>
Date: Wed, 20 Jun 2012 12:21:26 +0200
Subject: [PATCH] [FIX] Sidebar dropdown

bzr revid: fme@openerp.com-20120620102126-nax3dlhuj9ja2x2w
---
 addons/web/static/src/css/base.css  | 155 +++++++++++-----------------
 addons/web/static/src/css/base.sass | 154 +++++++++++----------------
 addons/web/static/src/js/views.js   |  14 +--
 addons/web/static/src/xml/base.xml  |  40 +++----
 4 files changed, 144 insertions(+), 219 deletions(-)

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index c094c1adc6b..6bc652ecab7 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -369,7 +369,47 @@
 .openerp .oe_cropdown_menu {
   display: none;
   position: absolute;
+  top: 28px;
   z-index: 1;
+  border: 1px solid #afafb6;
+  background: white;
+  padding: 8px;
+  min-width: 120px;
+  text-align: left;
+  -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);
+}
+.openerp .oe_cropdown_menu li {
+  list-style-type: none;
+  float: none;
+  display: block;
+  position: relative;
+}
+.openerp .oe_cropdown_menu li:hover {
+  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;
+}
+.openerp .oe_cropdown_menu li a {
+  white-space: nowrap;
+  display: block;
+  padding: 3px 6px;
+  color: #4c4c4c;
+  text-decoration: none;
+}
+.openerp .oe_cropdown_menu li a:hover {
+  text-decoration: none;
 }
 .openerp .oe_cropdown_arrow:after {
   width: 0;
@@ -382,52 +422,26 @@
   margin-left: 4px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
-  border-top-color: #404040;
+  border-top: 4px solid #404040;
   filter: alpha(opacity=50);
   opacity: 0.5;
 }
-.openerp .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;
+.openerp .oe_sidebar {
+  white-space: nowrap;
 }
-.openerp .oe_dropdown_menu {
-  display: none;
-  position: absolute;
-  top: 28px;
-  left: 0px;
-  padding: 8px;
-  border: 1px solid #afafb6;
-  min-width: 120px;
-  overflow-x: hidden;
-  z-index: 900;
-  text-align: left;
-  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);
+.openerp .oe_sidebar .oe_cropdown_menu .oe_sidebar_add_attachment {
+  height: 20px;
+  cursor: pointer;
+  padding-left: 6px;
+  margin-top: 6px;
 }
-.openerp .oe_dropdown_menu li {
-  position: relative;
-  list-style-type: none;
-  float: none;
-  display: block;
-  background-color: none;
+.openerp .oe_sidebar .oe_cropdown_menu .oe_sidebar_add_attachment span {
+  font-weight: bold;
 }
-.openerp .oe_dropdown_menu li:hover {
+.openerp .oe_sidebar .oe_cropdown_menu .oe_sidebar_add_attachment .oe_hidden_input_file {
+  width: 200px;
+}
+.openerp .oe_sidebar .oe_cropdown_menu .oe_sidebar_add_attachment:hover {
   background-color: #f0f0fa;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
   background-image: -webkit-linear-gradient(top, #f0f0fa, #eeeef6);
@@ -439,27 +453,13 @@
   -webkit-box-shadow: none;
   box-shadow: none;
 }
-.openerp .oe_dropdown_menu li a {
-  display: block;
-  padding: 3px 6px;
-  clear: both;
-  font-weight: normal;
-  line-height: 14px;
-  color: #4c4c4c;
-  text-decoration: none;
-  cursor: pointer;
-}
-.openerp .oe_dropdown_menu li a:hover {
-  text-decoration: none;
-}
-.openerp .oe_dropdown_menu li .oe_sidebar_delete_item {
+.openerp .oe_sidebar .oe_cropdown_menu li .oe_sidebar_delete_item {
   position: absolute;
-  bottom: 1px;
+  top: 4px;
   right: 4px;
   display: none;
   width: 12px;
   height: 12px;
-  line-height: 12px;
   padding: 1px;
   color: #8786b7;
   line-height: 8px;
@@ -467,7 +467,7 @@
   font-weight: bold;
   text-shadow: 0 1px 1px white;
 }
-.openerp .oe_dropdown_menu li .oe_sidebar_delete_item:hover {
+.openerp .oe_sidebar .oe_cropdown_menu li .oe_sidebar_delete_item:hover {
   text-decoration: none;
   color: white;
   background: #8786b7;
@@ -476,38 +476,9 @@
   -webkit-border-radius: 2px;
   border-radius: 2px;
 }
-.openerp .oe_dropdown_menu li:hover .oe_sidebar_delete_item {
+.openerp .oe_sidebar .oe_cropdown_menu li:hover .oe_sidebar_delete_item {
   display: inline-block;
 }
-.openerp .oe_sidebar {
-  white-space: nowrap;
-}
-.openerp .oe_sidebar .oe_dropdown_menu li {
-  padding-right: 16px;
-}
-.openerp .oe_sidebar .oe_sidebar_add_attachment {
-  cursor: pointer;
-  padding-left: 6px;
-  margin-top: 6px;
-}
-.openerp .oe_sidebar .oe_sidebar_add_attachment span {
-  font-weight: bold;
-}
-.openerp .oe_sidebar .oe_sidebar_add_attachment .oe_hidden_input_file {
-  width: 200px;
-}
-.openerp .oe_sidebar .oe_sidebar_add_attachment:hover {
-  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;
-}
 .openerp .oe_loading {
   display: none;
   z-index: 100;
@@ -743,13 +714,12 @@
 .openerp .oe_topbar .oe_topbar_avatar {
   vertical-align: top;
 }
-.openerp .oe_topbar .oe_cropdown_toggle:after {
+.openerp .oe_topbar .oe_cropdown_arrow:after {
   border-top: 4px solid white;
 }
 .openerp .oe_topbar .oe_cropdown_menu {
   background: #333333;
   background: rgba(37, 37, 37, 0.9);
-  padding: 6px 0;
   border-color: #999999;
   border-color: rgba(0, 0, 0, 0.2);
   border-style: solid;
@@ -757,21 +727,14 @@
   -moz-border-radius: 0 0 6px 6px;
   -webkit-border-radius: 0 0 6px 6px;
   border-radius: 0 0 6px 6px;
-  -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);
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding-box;
   background-clip: padding-box;
 }
 .openerp .oe_topbar .oe_cropdown_menu li {
   float: none;
-  display: block;
 }
 .openerp .oe_topbar .oe_cropdown_menu li a {
-  white-space: nowrap;
-  display: block;
-  padding: 4px 15px;
   color: #eeeeee;
 }
 .openerp .oe_topbar .oe_cropdown_menu li a:hover {
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c8751a65e1e..dee67590e07 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -322,7 +322,31 @@ $colour4: #8a89ba
     .oe_cropdown_menu
         display: none
         position: absolute
+        top: 28px
         z-index: 1
+        border: 1px solid #afafb6
+        background: white
+        padding: 8px
+        min-width: 120px
+        text-align: left
+        @include radius(3px)
+        @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
+        li
+            &:hover
+                @include vertical-gradient(#f0f0fa, #eeeef6)
+                @include box-shadow(none)
+            list-style-type: none
+            float: none
+            display: block
+            position: relative
+            a
+                white-space: nowrap
+                display: block
+                padding: 3px 6px
+                color: #4c4c4c
+                text-decoration: none
+                &:hover
+                    text-decoration: none
     .oe_cropdown_arrow:after
         width: 0
         height: 0
@@ -334,95 +358,47 @@ $colour4: #8a89ba
         margin-left: 4px
         border-left: 4px solid transparent
         border-right: 4px solid transparent
-        border-top-color: #404040
+        border-top: 4px solid#404040
         @include opacity(0.5)
 
-
-    .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
-    .oe_dropdown_menu
-        display: none
-        position: absolute
-        top: 28px
-        left: 0px
-        padding: 8px
-        border: 1px solid #afafb6
-        min-width: 120px
-        overflow-x: hidden
-        z-index: 900
-        text-align: left
-        background: white
-        @include radius(3px)
-        @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
-        li
-            &:hover
-                @include vertical-gradient(#f0f0fa, #eeeef6)
-                @include box-shadow(none)
-            position: relative
-            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
-                cursor: pointer
-                &:hover
-                    text-decoration: none
-            .oe_sidebar_delete_item
-                position: absolute
-                bottom: 1px
-                right: 4px
-                display: none
-                width: 12px
-                height: 12px
-                line-height: 12px
-                padding: 1px
-                color: #8786b7
-                line-height: 8px
-                text-align: center
-                font-weight: bold
-                text-shadow: 0 1px 1px white
-                &:hover
-                    text-decoration: none
-                    color: white
-                    background: #8786b7
-                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
-                    @include radius(2px)
-            &:hover
-                .oe_sidebar_delete_item
-                    display: inline-block
     .oe_sidebar
         white-space: nowrap
-        .oe_dropdown_menu li
-            padding-right: 16px
-        .oe_sidebar_add_attachment
-            cursor: pointer
-            padding-left: 6px
-            margin-top: 6px
-            span
-                font-weight: bold
-            .oe_hidden_input_file
-                width: 200px
-            &:hover
-                @include vertical-gradient(#f0f0fa, #eeeef6)
-                @include box-shadow(none)
+        .oe_cropdown_menu
+            .oe_sidebar_add_attachment
+                height: 20px
+                cursor: pointer
+                padding-left: 6px
+                margin-top: 6px
+                span
+                    font-weight: bold
+                .oe_hidden_input_file
+                    width: 200px
+                &:hover
+                    @include vertical-gradient(#f0f0fa, #eeeef6)
+                    @include box-shadow(none)
+            li
+                .oe_sidebar_delete_item
+                    position: absolute
+                    top: 4px
+                    right: 4px
+                    display: none
+                    width: 12px
+                    height: 12px
+                    padding: 1px
+                    color: #8786b7
+                    line-height: 8px
+                    text-align: center
+                    font-weight: bold
+                    text-shadow: 0 1px 1px white
+                    &:hover
+                        text-decoration: none
+                        color: white
+                        background: #8786b7
+                        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4)
+                        @include radius(2px)
+                &:hover
+                    .oe_sidebar_delete_item
+                        display: inline-block
     // }}}
 
     // Loading {{{
@@ -603,26 +579,20 @@ $colour4: #8a89ba
             @include radius(3px)
         .oe_topbar_avatar
             vertical-align: top
-        .oe_cropdown_toggle:after
+        .oe_cropdown_arrow:after
             border-top: 4px solid white
         .oe_cropdown_menu
             background: #333
             background: rgba(37,37,37,0.9)
-            padding: 6px 0
             border-color: #999
             border-color: rgba(0, 0, 0, 0.2)
             border-style: solid
             border-width: 0 1px 1px
             @include radius(0 0 6px 6px)
-            @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
             @include background-clip()
             li
                 float: none
-                display: block
                 a
-                    white-space: nowrap
-                    display: block
-                    padding: 4px 15px
                     color: #eee
                     &:hover
                         @include vertical-gradient(#292929, #191919)
diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js
index 7fc27625bcd..7e353472266 100644
--- a/addons/web/static/src/js/views.js
+++ b/addons/web/static/src/js/views.js
@@ -739,18 +739,9 @@ instance.web.Sidebar = instance.web.Widget.extend({
         var self = this;
         this._super(this);
         this.redraw();
-        this.$element.on('click','.oe_dropdown_toggle',function(event) {
-            self.$('ul').hide();
-            $(this).parent().find('ul').toggle();
-            return false;
-        });
-        instance.web.bus.on('click', self, function(ev) {
-            self.$('ul').hide();
-        });
-        this.$element.on('click','.oe_dropdown_menu li a', function(event) {
+        this.$element.on('click','.oe_cropdown_menu li a', function(event) {
             var section = $(this).data('section');
             var index = $(this).data('index');
-            $(this).closest('ul').hide();
             var item = self.items[section][index];
             if (item.callback) {
                 item.callback.apply(self, [item]);
@@ -759,13 +750,12 @@ instance.web.Sidebar = instance.web.Widget.extend({
             } else if (item.url) {
                 return true;
             }
-            return false;
+            event.preventDefault();
         });
     },
     redraw: function() {
         var self = this;
         self.$element.html(QWeb.render('Sidebar', {widget: self}));
-        this.$element.find('ul').hide();
 
         // Hides Sidebar sections when item list is empty
         this.$('.oe_form_dropdown_section').each(function() {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 07131a70e00..942250c2dbb 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -508,25 +508,27 @@
     <div class="oe_sidebar">
         <t t-foreach="widget.sections" t-as="section">
             <div class="oe_form_dropdown_section">
-                <button class="oe_dropdown_toggle"><t t-esc="section.label"/></button>
-                <ul class="oe_dropdown_menu">
-                    <li t-foreach="widget.items[section.name]" t-as="item" t-att-class="item.classname">
-                        <a class="oe_sidebar_action_a" t-att-title="item.title" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url" target="_blank">
-                            <t t-raw="item.label"/>
-                        </a>
-                        <a t-if="section.name == 'files'" class="oe_sidebar_delete_item" t-att-data-id="item.id" title="Delete this attachment">x</a>
-                    </li>
-                    <li t-if="section.name == 'files'" class="oe_sidebar_add_attachment">
-                        <t t-call="HiddenInputFile">
-                            <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
-                            <t t-set="fileupload_action">/web/binary/upload_attachment</t>
-                            <input type="hidden" name="model" t-att-value="widget.dataset and widget.dataset.model"/>
-                            <input type="hidden" name="id" t-att-value="widget.model_id"/>
-                            <input type="hidden" name="session_id" t-att-value="widget.session.session_id"/>
-                            <span>Add...</span>
-                        </t>
-                    </li>
-                </ul>
+                <button class="oe_cropdown_toggle oe_cropdown_arrow">
+                    <t t-esc="section.label"/>
+                    <ul class="oe_cropdown_menu">
+                        <li t-foreach="widget.items[section.name]" t-as="item" t-att-class="item.classname">
+                            <a class="oe_sidebar_action_a" t-att-title="item.title" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url" target="_blank">
+                                <t t-raw="item.label"/>
+                            </a>
+                            <a t-if="section.name == 'files'" class="oe_sidebar_delete_item" t-att-data-id="item.id" title="Delete this attachment">x</a>
+                        </li>
+                        <li t-if="section.name == 'files'" class="oe_sidebar_add_attachment">
+                            <t t-call="HiddenInputFile">
+                                <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                                <t t-set="fileupload_action">/web/binary/upload_attachment</t>
+                                <input type="hidden" name="model" t-att-value="widget.dataset and widget.dataset.model"/>
+                                <input type="hidden" name="id" t-att-value="widget.model_id"/>
+                                <input type="hidden" name="session_id" t-att-value="widget.session.session_id"/>
+                                <span>Add...</span>
+                            </t>
+                        </li>
+                    </ul>
+                </button>
             </div>
         </t>
     </div>