Make the user search form similar to the status dropdown

converse.css

@@ -231,23 +231,34 @@ p.chatroom-topic {
 
 a.subscribe-to-user {
     padding-left: 2em;
-    background: url('images/add_icon.png') no-repeat 3px top;
     font-weight: bold;
 }
 
-div.add-xmpp-contact {
-    display: block;
-    border:1px solid #ddd;
-    padding: 3px 3px 3px 3px;
-    margin: 0 0.5em;
-    clear: both;
-    background: url('images/add_icon.png') no-repeat 3px 3px;
-    font-weight: bold;
+dl.add-xmpp-contact {
+    margin: 0 0 0 0.5em;
+    padding-top: 3px;
+    z-index: 21;
+    background: url('images/add_icon.png') no-repeat 3px;
 }
 
-div.add-xmpp-contact a.add-xmpp-contact {
+dt#xmpp-contact-search {
+    padding-top: 3px;
+}
+
+.fancy-dropdown a.choose-xmpp-status,
+.fancy-dropdown a.add-xmpp-contact {
     text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
     padding-left: 1.5em;
+    width: 140px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    float: left;
+}
+
+#fancy-xmpp-status-select {
+    padding-bottom: 3px;
 }
 
 #fancy-xmpp-status-select a.change-xmpp-status-message {
@@ -259,24 +270,16 @@ div.add-xmpp-contact a.add-xmpp-contact {
     height: 1em;
 }
 
-#fancy-xmpp-status-select a.choose-xmpp-status {
-    text-shadow: 0 1px 0 rgba(250, 250, 250, 1);
-    padding-left: 1.5em;
-    width: 140px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    float: left;
-}
-
 ul#found-users {
-    padding-top: 0.5em;
+    padding: 10px 0 5px 5px;
+    border: 0; 
 }
 
 form.search-xmpp-contact {
     margin: 0;
-    padding: 1em 0 0 0;
+    padding-left: 5px;
+    padding: 1em 0 0 5px;
+    background: white;
 }
 
 form.search-xmpp-contact input {
@@ -459,11 +462,6 @@ dd.available-chatroom,
     padding: 0;
 }
 
-.oc-chat-content dl {
-    margin: 0;
-    padding: 0;
-}
-
 .oc-chat-content dd {
     margin-left: 0;
     margin-bottom: 0;
@@ -601,6 +599,7 @@ form.sendXMPPMessage {
 /* status dropdown styles */
 dl.dropdown {
     margin-right: 0.5em;
+    margin-bottom: 0;
 }
 .dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
 .dropdown dd { position:relative; }
@@ -613,7 +612,7 @@ input.custom-xmpp-status {
     height: 18px;
 }
 
-#fancy-xmpp-status-select {
+.fancy-dropdown {
     border:1px solid #ddd;
     height: 22px;
 }
@@ -624,7 +623,6 @@ input.custom-xmpp-status {
 
 .dropdown dd ul {
     list-style:none;
-    padding:5px 0;
     position:absolute; left:0; top:0;
     border:1px solid #ddd;
     border-top: 0;
@@ -647,18 +645,18 @@ input.custom-xmpp-status {
 }
 
 .dropdown a.online {
-    background: url(images/user_online_panel.png) no-repeat left;
+    background: url(images/user_online_panel.png) no-repeat left 3px;
 }
 
 .dropdown a.offline {
-    background: url(images/user_offline_panel.png) no-repeat left;
+    background: url(images/user_offline_panel.png) no-repeat left 3px;
 }
 
 .dropdown a.dnd {
-    background: url(images/user_busy_panel.png) no-repeat left;
+    background: url(images/user_busy_panel.png) no-repeat left 3px;
 }
 
 .dropdown a.away {
-    background: url(images/user_away_panel.png) no-repeat left;
+    background: url(images/user_away_panel.png) no-repeat left 3px;
 }
 

converse.js

@@ -581,14 +581,18 @@
                     '</select>'+
                 '</span>'+
             '</form>'+
-            '<div class="add-xmpp-contact">'+
-                '<a class="add-xmpp-contact" href="#" title="Click to search for new users to add as chat contacts">Add a contact</a>'+
-                '<form class="search-xmpp-contact" style="display:none">'+
-                    '<input type="text" name="identifier" class="username" placeholder="Contact name"/>'+
-                    '<button type="submit">Search</button>'+
-                    '<ul id="found-users"></ul>'+
-                '</form>'+
-            '</div>'
+            '<dl class="add-xmpp-contact dropdown">' +
+                '<dt id="xmpp-contact-search" class="fancy-dropdown">' +
+                    '<a class="add-xmpp-contact" href="#" title="Click to search for new users to add as chat contacts">Add a contact</a>' +
+                '</dt>' +
+                '<dd class="search-xmpp" style="display:none"><ul>' +
+                '<form class="search-xmpp-contact">' +
+                    '<input type="text" name="identifier" class="username" placeholder="Contact name"/>' +
+                    '<button type="submit">Search</button>' +
+                    '<ul id="found-users"></ul>' +
+                '</form>' +
+                '</ul></dd>' +
+            '</dl>'
         ),
 
         render: function () {
@@ -599,29 +603,29 @@
 
         toggleContactForm: function (ev) {
             ev.preventDefault();
-            this.$el.find('form.search-xmpp-contact').fadeToggle('medium').find('input.username').focus();
+            this.$el.find('.search-xmpp').toggle().find('input.username').focus();
         },
 
         searchContacts: function (ev) {
             ev.preventDefault();
             $.getJSON(portal_url + "/search-users?q=" + $(ev.target).find('input.username').val(), function (data) {
-                var $results_el = $('#found-users');
-                $(data).each(function (idx, obj) {
-                    if ($results_el.children().length) {
+                    var $results_el = $('#found-users');
+                    $(data).each(function (idx, obj) {
+                        if ($results_el.children().length) {
                         $results_el.empty();
-                    }
-                    $results_el.append(
+                        }
+                        $results_el.append(
                             $('<li></li>')
-                                .attr('id', 'found-users-'+obj.id)
-                                .append(
-                                    $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
-                                        .attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+xmppchat.domain)
-                                        .text(obj.fullname)
+                            .attr('id', 'found-users-'+obj.id)
+                            .append(
+                                $('<a class="subscribe-to-user" href="#" title="Click to add as a chat contact"></a>')
+                                .attr('data-recipient', Strophe.escapeNode(obj.id)+'@'+xmppchat.domain)
+                                .text(obj.fullname)
                                 )
-                        );
-                });
-            });
-        },
+                            );
+                        });
+                    });
+            },
 
         subscribeToContact: function (ev) {
             ev.preventDefault();
@@ -629,10 +633,10 @@
                 jid = $target.attr('data-recipient'),
                 name = $target.text();
             xmppchat.connection.roster.add(jid, name, [], function (iq) {
-                xmppchat.connection.roster.subscribe(jid, null, xmppchat.fullname);
-            });
+                    xmppchat.connection.roster.subscribe(jid, null, xmppchat.fullname);
+                    });
             $target.parent().remove();
-            $('form.search-xmpp-contact').hide();
+            $('.search-xmpp').hide();
         }
     });
 
@@ -1758,7 +1762,7 @@
 
         choose_template: _.template(
             '<dl id="target" class="dropdown">' +
-                '<dt id="fancy-xmpp-status-select"></dt>' +
+                '<dt id="fancy-xmpp-status-select" class="fancy-dropdown"></dt>' +
                 '<dd><ul></ul></dd>' +
             '</dl>'),
 
@@ -1935,6 +1939,9 @@
             this.chatboxes.onConnected();
             this.rosterview = new this.RosterView({'model':this.roster});
 
+            this.xmppstatusview = new this.XMPPStatusView({'model': this.xmppstatus}).render();
+            this.xmppstatus.fetch();
+
             this.connection.addHandler(
                 $.proxy(this.roster.subscribeToSuggestedItems, this.roster),
                 'http://jabber.org/protocol/rosterx', 'message', null);
@@ -1956,8 +1963,6 @@
                             return true;
                         }, this), null, 'message', 'chat');
 
-                this.xmppstatusview = new this.XMPPStatusView({'model': this.xmppstatus}).render();
-                this.xmppstatus.fetch();
                 this.xmppstatus.initStatus();
             }, this));
             this.$feedback.text('Online Contacts');