Improved design of button and search

bzr revid: nicolas.vanhoren@openerp.com-20121127164341-ilp6wgetkr9lbdv3

addons/web_im/static/src/css/im.css

@@ -6,10 +6,50 @@
     border-left: 1px solid #AEB9BD;
 }
 
-.openerp .oe_topbar_imbutton{
-    
+.openerp .oe_topbar_imbutton {
+    cursor: pointer;
 }
 
+/* search stuff */
+.openerp .oe_im_frame_header {
+  background: #dedede;
+  background: -moz-linear-gradient(#fcfcfc, #dedede);
+  background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
+  border-bottom: 1px solid border-color !important;
+  padding: 5px;
+}
+.openerp .oe_im_frame_header .oe_im_searchbox {
+  width: 168px;
+  padding: 1px 21px 1px 19px;
+  font-size: 13px;
+  -moz-border-radius: 13px;
+  -webkit-border-radius: 13px;
+  border-radius: 13px;
+}
+.openerp .oe_im_frame_header .oe_im_search_icon {
+  position: absolute;
+  color: #888;
+  top: 2px;
+  left: 9px;
+  font-size: 28px;
+  font-family: "entypoRegular" !important;
+  font-weight: 300 !important;
+}
+.openerp .oe_im_frame_header .oe_im_search_clear {
+  display: none;
+  position: absolute;
+  right: 11px;
+  top: 4px;
+  font-size: 26px;
+  color: #b6b6b6;
+  cursor: pointer;
+}
+.openerp .oe_im_frame_header .oe_im_search_clear:hover {
+  color: #888;
+}
+
+
+
 .openerp .oe_im_conversation {
     position: fixed;
     bottom: 0px;

addons/web_im/static/src/js/im.js

@@ -21,7 +21,7 @@ openerp.web_im = function(instance) {
     instance.web_im.ImTopButton = instance.web.Widget.extend({
         template:'ImTopButton',
         events: {
-            "click button": "clicked",
+            "click .oe_e": "clicked",
         },
         clicked: function() {
             this.trigger("clicked");
@@ -31,18 +31,22 @@ openerp.web_im = function(instance) {
     instance.web_im.InstantMessaging = instance.web.Widget.extend({
         template: "InstantMessaging",
         events: {
-            "keydown .oe_im_input": "search_users",
+            "keydown .oe_im_searchbox": "input_change",
+            "keyup .oe_im_searchbox": "input_change",
+            "change .oe_im_searchbox": "input_change",
         },
         init: function(parent) {
             this._super(parent);
             this.shown = false;
             this.set("right_offset", 0);
+            this.set("current_search", "");
             this.last = null;
             this.users = [];
             this.c_manager = new instance.web_im.ConversationManager(this);
             this.on("change:right_offset", this.c_manager, _.bind(function() {
                 this.c_manager.set("right_offset", this.get("right_offset"));
             }, this));
+            this.user_search_dm = new instance.web.DropMisordered();
         },
         start: function() {
             this.$el.css("right", -this.$el.outerWidth());
@@ -51,7 +55,8 @@ openerp.web_im = function(instance) {
             this.calc_box();
 
             this.poll();
-            this.search_users();
+            this.on("change:current_search", this, this.search_changed);
+            this.search_changed();
         },
         calc_box: function() {
             var $topbar = instance.client.$(".oe_topbar");
@@ -60,13 +65,15 @@ openerp.web_im = function(instance) {
             this.$el.css("top", top);
             this.$el.css("bottom", 0);
         },
-        search_users: function(e) {
-            if(e && e.which !== 13) {
-                return;
-            }
+        input_change: function() {
+            this.set("current_search", this.$(".oe_im_searchbox").val());
+        },
+        search_changed: function(e) {
             var users = new instance.web.Model("res.users");
             var self = this;
-            return users.query(["name"]).filter([["name", "ilike", this.$(".oe_im_input").val()]]).limit(USERS_LIMIT).all().then(function(result) {
+            return this.user_search_dm.add(users.query(["name"])
+                    .filter([["name", "ilike", this.get("current_search")]])
+                    .limit(USERS_LIMIT).all()).then(function(result) {
                 self.$(".oe_im_input").val("");
                 _.each(self.users, function(user) {
                     user.destroy();

addons/web_im/static/src/xml/im.xml

@@ -4,14 +4,18 @@
 <templates xml:space="preserve">
     <t t-name="InstantMessaging">
         <div class="oe_im">
-            <input class="oe_im_input" type="text"/>
+            <div class="oe_im_frame_header">
+                <span class="oe_e oe_im_search_icon">ô</span>
+                <input class="oe_im_searchbox" t-att-placeholder="_t('Search users...')"/>
+                <span class="oe_e oe_im_search_clear">[</span>
+            </div>
             <div class="oe_im_users"></div>
             <div class="oe_im_content"></div>
         </div>
     </t>
     <t t-name="ImTopButton">
-        <div title='Display im' class="oe_topbar_item oe_topbar_imbutton">
-            <button></button>
+        <div t-att-title='_t("Display Instant Messaging")' class="oe_topbar_item oe_topbar_imbutton">
+            <span class="oe_e">+</span>
         </div>
     </t>
     <t t-name="ImUser">