[ADD] Added dropdown menu.

bzr revid: fme@openerp.com-20120223174439-nlyeqjobi230e7xx

addons/web/static/src/css/base.css

@@ -1,4 +1,3 @@
-/* line 43, base.sass */
 .openerp2 {
   padding: 0;
   margin: 0;
@@ -8,12 +7,9 @@
   background: white;
   position: relative;
 }
-/* line 53, base.sass */
 .openerp2 a {
-  color: #4c4c4c;
   text-decoration: none;
 }
-/* line 59, base.sass */
 .openerp2 .oe_webclient {
   position: absolute;
   top: 0;
@@ -21,7 +17,6 @@
   left: 0;
   right: 0;
 }
-/* line 68, base.sass */
 .openerp2 .oe_topbar {
   width: 100%;
   height: 31px;
@@ -32,15 +27,9 @@
   background: -webkit-gradient(linear, left top, left bottom, from(#646060), to(#262626));
   background: -webkit-linear-gradient(#646060, #262626);
 }
-/* line 75, base.sass */
-.openerp2 .oe_topbar .oe_topbar_item {
-  float: left;
-}
-/* line 77, base.sass */
 .openerp2 .oe_topbar .oe_topbar_item li {
   float: left;
 }
-/* line 79, base.sass */
 .openerp2 .oe_topbar .oe_topbar_item li a {
   display: block;
   padding: 5px 10px 7px;
@@ -50,7 +39,6 @@
   vertical-align: top;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
-/* line 87, base.sass */
 .openerp2 .oe_topbar .oe_topbar_item li a:hover {
   background: #303030;
   color: white;
@@ -58,7 +46,6 @@
   -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;
 }
-/* line 91, base.sass */
 .openerp2 .oe_topbar .oe_topbar_item .oe_active {
   background: #303030;
   font-weight: bold;
@@ -67,7 +54,6 @@
   -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;
 }
-/* line 97, base.sass */
 .openerp2 .oe_topbar .oe_topbar_avatar {
   width: 24px;
   height: 24px;
@@ -76,18 +62,15 @@
   -webkit-border-radius: 4px;
   border-radius: 4px;
 }
-/* line 105, base.sass */
 .openerp2 .oe_menu {
   float: left;
   padding: 0;
   margin: 0;
 }
-/* line 109, base.sass */
 .openerp2 .oe_menu li {
   list-style-type: none;
   float: left;
 }
-/* line 112, base.sass */
 .openerp2 .oe_menu a {
   display: block;
   padding: 5px 10px 7px;
@@ -97,7 +80,6 @@
   vertical-align: top;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 }
-/* line 120, base.sass */
 .openerp2 .oe_menu a:hover {
   background: #303030;
   color: white;
@@ -105,7 +87,6 @@
   -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;
 }
-/* line 124, base.sass */
 .openerp2 .oe_menu .oe_active {
   background: #303030;
   font-weight: bold;
@@ -114,12 +95,90 @@
   -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_dropdown_menu {
+  float: right;
+  padding: 0;
+  margin: 0;
+}
+.openerp2 .oe_dropdown_menu li {
+  list-style-type: none;
+  float: left;
+}
+.openerp2 .oe_dropdown_menu .oe_dropdown {
+  position: relative;
+}
+.openerp2 .oe_dropdown_menu .dropdown-toggle:after {
+  width: 0;
+  height: 0;
+  display: inline-block;
+  content: "&darr";
+  text-indent: -99999px;
+  vertical-align: top;
+  margin-top: 8px;
+  margin-left: 4px;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid white;
+  filter: alpha(opacity=50);
+  -khtml-opacity: 0.5;
+  -moz-opacity: 0.5;
+  opacity: 0.5;
+}
+.openerp2 .oe_dropdown_menu .oe_dropdown_options {
+  float: left;
+  background: #333333;
+  background: rgba(37, 37, 37, 0.9);
+  display: none;
+  position: absolute;
+  top: 32px;
+  right: -1px;
+  border: 0;
+  z-index: 900;
+  width: 160px;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 6px 0;
+  zoom: 1;
+  border-color: #999999;
+  border-color: rgba(0, 0, 0, 0.2);
+  border-style: solid;
+  border-width: 0 1px 1px;
+  -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;
+}
+.openerp2 .oe_dropdown_menu .oe_dropdown_options li {
+  float: none;
+  display: block;
+  background-color: none;
+}
+.openerp2 .oe_dropdown_menu .oe_dropdown_options li a {
+  display: block;
+  padding: 4px 15px;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  color: #eeeeee;
+}
+.openerp2 .oe_dropdown_menu .oe_dropdown_options li a:hover {
+  background: #292929;
+  background: -moz-linear-gradient(#292929, #191919);
+  background: -webkit-gradient(linear, left top, left bottom, from(#292929), to(#191919));
+  background: -webkit-linear-gradient(#292929, #191919);
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  -box-shadow: none;
+}
 
-/* line 133, base.sass */
 .openerp .oe-shortcuts {
   position: static;
 }
-/* line 135, base.sass */
 .openerp #oe_header {
   clear: both;
 }

addons/web/static/src/css/base.sass

@@ -51,7 +51,6 @@
     position: relative
 
     a
-        color: #4c4c4c
         text-decoration: none
     // }}}
 
@@ -73,7 +72,6 @@
         @include vertical-gradient(#646060, #262626)
 
         .oe_topbar_item
-            float: left
             li
                 float: left
                 a
@@ -128,6 +126,69 @@
             @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
     // }}}
 
+    // DropDown Menu {{{
+    .oe_dropdown_menu
+        float: right
+        padding: 0
+        margin: 0
+        li
+            list-style-type: none
+            float: left
+        .oe_dropdown
+            position: relative
+
+        .dropdown-toggle:after
+            width: 0
+            height: 0
+            display: inline-block
+            content: "&darr"
+            text-indent: -99999px
+            vertical-align: top
+            margin-top: 8px
+            margin-left: 4px
+            border-left: 4px solid transparent
+            border-right: 4px solid transparent
+            border-top: 4px solid white
+            @include opacity(0.5)
+
+        .oe_dropdown_options
+            float: left
+            background: #333
+            background: rgba(37,37,37,0.9)
+            display: none
+            position: absolute
+            top: 32px
+            right: -1px
+            border: 0
+            z-index: 900
+            width: 160px
+            margin-left: 0
+            margin-right: 0
+            padding: 6px 0
+            zoom: 1
+            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
+                background-color: none
+                a
+                    display: block
+                    padding: 4px 15px
+                    clear: both
+                    font-weight: normal
+                    line-height: 18px
+                    color: #eee
+                    &:hover
+                        @include vertical-gradient(#292929, #191919)
+                        @include box-shadow(none)
+    // }}}
+
 .openerp
     // Transitional overrides for old styles {{{
     .oe-shortcuts

addons/web/static/src/js/chrome.js

@@ -984,7 +984,7 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
         return false;
     },
     do_hide_secondary: function() {
-        this.$secondary_menu.hide();
+        //this.$secondary_menu.hide();
     },
     do_show_secondary: function($sub_menu, $main_menu) {
         var self = this;
@@ -1008,6 +1008,78 @@ openerp.web.Menu =  openerp.web.Widget.extend(/** @lends openerp.web.Menu# */{
     }
 });
 
+openerp.web.DropDownMenu =  openerp.web.Widget.extend(/** @lends openerp.web.Header# */{
+    template: "DropDownMenu",
+    /**
+     * @constructs openerp.web.DropDownMenu
+     * @extends openerp.web.OldWidget
+     *
+     * @param parent
+     */
+    init: function(parent) {
+        this._super(parent);
+    },
+    start: function() {
+        var self = this;
+        this._super.apply(this, arguments);
+        $('html').bind('click', function() {
+            self.$element.find('.oe_dropdown_options').hide();
+        });
+        this.$element.find('.oe_dropdown_toggle').click(function() {
+            self.$element.find('.oe_dropdown_options').toggle();
+            return false;
+        });
+        this.$element.find('.oe_dropdown_options li a').click(function() {
+            var f = self['on_menu_' + $(this).data('menu')];
+            f && f();
+            self.$element.find('.oe_dropdown_options').hide();
+            return false;
+        });
+    },
+    on_menu_logout: function() {
+    },
+    on_menu_settings: function() {
+        var self = this;
+        var action_manager = new openerp.web.ActionManager(this);
+        var dataset = new openerp.web.DataSet (this,'res.users',this.context);
+        dataset.call ('action_get','',function (result){
+            self.rpc('/web/action/load', {action_id:result}, function(result){
+                action_manager.do_action(_.extend(result['result'], {
+                    res_id: self.session.uid,
+                    res_model: 'res.users',
+                    flags: {
+                        action_buttons: false,
+                        search_view: false,
+                        sidebar: false,
+                        views_switcher: false,
+                        pager: false
+                    }
+                }));
+            });
+        });
+        this.dialog = new openerp.web.Dialog(this,{
+            title: _t("Preferences"),
+            width: '700px',
+            buttons: [
+                {text: _t("Cancel"), click: function(){ $(this).dialog('destroy'); }},
+                {text: _t("Change password"), click: function(){ self.change_password(); }},
+                {text: _t("Save"), click: function(){
+                        var inner_viewmanager = action_manager.inner_viewmanager;
+                        inner_viewmanager.views[inner_viewmanager.active_view].controller.do_save()
+                        .then(function() {
+                            self.dialog.destroy();
+                            // needs to refresh interface in case language changed
+                            window.location.reload();
+                        });
+                    }
+                }
+            ]
+        }).open();
+       action_manager.appendTo(this.dialog);
+       action_manager.render(this.dialog);
+    }
+});
+
 openerp.web.WebClient = openerp.web.Widget.extend(/** @lends openerp.web.WebClient */{
     /**
      * @constructs openerp.web.WebClient
@@ -1071,6 +1143,9 @@ openerp.web.WebClient = openerp.web.Widget.extend(/** @lends openerp.web.WebClie
         self.menu = new openerp.web.Menu(self);
         self.menu.replace(this.$element.find('.oe_menu_placeholder'));
         self.menu.on_action.add(this.proxy('on_menu_action'));
+        self.dropdown_menu = new openerp.web.DropDownMenu(self);
+        self.dropdown_menu.replace(this.$element.find('.oe_dropdown_menu_placeholder'));
+        self.dropdown_menu.on_menu_logout.add(this.proxy('on_logout'));
     },
     show_common: function() {
         var self = this;

addons/web/static/src/xml/base.xml

@@ -21,8 +21,9 @@
     <div class="oe_webclient">
         <div class="oe_topbar">
             <div class="oe_menu_placeholder"/>
+            <div class="oe_dropdown_menu_placeholder"/>
         </div>
-        <div id="oe_header" class="header"></div>
+        <div id="oe_header" class="header" style="display: none"></div>
         <div class="oe_leftbar">
             <!--
             <a href="#" class="oe_logo"><img src="img/logo.png"/></a>
@@ -409,6 +410,22 @@
     </div>
 </t>
 
+<t t-name="DropDownMenu">
+    <ul class="oe_dropdown_menu oe_topbar_item">
+        <li class="oe_dropdown">
+            <a href="#" class="oe_dropdown_toggle">
+                <img class="oe_topbar_avatar" src="http://www.amigrave.com/ClarkGableSmall.jpg"/>
+                Clark Gable
+            </a>
+            <ul class="oe_dropdown_options">
+                <!--<li><a href="#" data-menu="profile">Profile</a></li>-->
+                <li><a href="#" data-menu="settings">Settings</a></li>
+                <li><a href="#" data-menu="logout">Log out</a></li>
+            </ul>
+        </li>
+    </ul>
+</t>
+
 <t t-name="ViewManager">
     <table class="view-manager-main-table" cellpadding="0" cellspacing="0">
     <tbody>