More tweaks and fixes

converse.css

@@ -21,7 +21,6 @@
 }
 
 .locked {
-    background: url(images/emblem-readonly.png) no-repeat right;
     padding-right: 22px;
 }
 
@@ -454,13 +453,7 @@ a.close-chatbox-button {
 #converse-roster dd.current-xmpp-contact span {
     font-size: 16px;
     float: left;
-}
-
-#converse-roster dd.current-xmpp-contact.xa,
-#converse-roster dd.current-xmpp-contact.xa:hover,
-#converse-roster dd.current-xmpp-contact.away,
-#converse-roster dd.current-xmpp-contact.away:hover {
-    background: url(images/user_away_panel.png) no-repeat 5px 2px;
+    color: rgb(79, 79, 79);
 }
 
 #converse-roster dd.requesting-xmpp-contact button{
@@ -786,7 +779,7 @@ form.add-xmpp-contact {
 }
 
 form.add-xmpp-contact input {
-    width: 125px;
+    width: 120px;
 }
 
 .chatbox .dropdown dt a span {
@@ -822,18 +815,15 @@ form.add-xmpp-contact input {
     padding-top: 2px;
 }
 
-.chatbox .dropdown a.offline {
-    background: url(images/user_offline_panel.png) no-repeat 3px 4px;
-}
-
-.chatbox .dropdown a.dnd {
-    background: url(images/user_busy_panel.png) no-repeat 3px 4px;
+.chatbox .dropdown dd ul a:hover {
+    background-color: #bed6e5;
 }
 
-.chatbox .dropdown a.away {
-    background: url(images/user_away_panel.png) no-repeat 3px 4px;
+.xmpp-status-menu li a {
+    width: 100%;
 }
 
-.chatbox .dropdown dd ul a:hover {
-    background-color: #bed6e5;
+.xmpp-status-menu li a span {
+    padding: 0 5px 0 5px;
+    color: rgb(79, 79, 79);
 }

converse.js

@@ -739,6 +739,7 @@
                 'title="'+__('Show more information on this room')+'" href="#">&nbsp;</a>'+
                 '</dd>'),
 
+            // FIXME: check markup in mockup
             room_description_template: _.template(
                 '<div class="room-info">'+
                 '<p class="room-info"><strong>'+__('Description:')+'</strong> {{desc}}</p>' +

mockup.html

@@ -59,11 +59,27 @@
                             </div>
                         </dt>
                         <dd>
-                            <ul style="display: none;">
-                                <li><a href="#" class="online" data-value="online">Online</a></li>
-                                <li><a href="#" class="dnd" data-value="dnd">Busy</a></li>
-                                <li><a href="#" class="away" data-value="away">Away</a></li>
-                                <li><a href="#" class="offline" data-value="offline">Offline</a></li>
+                            <ul style="display: none;" class="xmpp-status-menu">
+                                <li>
+                                    <a href="#" class="online" data-value="online">
+                                    <span class="icon-bubble"></span>
+                                    Online</a>
+                                </li>
+                                <li>
+                                    <a href="#" class="dnd" data-value="dnd">
+                                    <span class="icon-busy"></span>
+                                    Busy</a>
+                                </li>
+                                <li>
+                                    <a href="#" class="away" data-value="away">
+                                    <span class="icon-bubble-2"></span>
+                                    Away</a>
+                                </li>
+                                <li>
+                                    <a href="#" class="offline" data-value="offline">
+                                    <span class="icon-offline"></span>
+                                    Offline</a>
+                                </li>
                             </ul>
                         </dd>
                     </dl>
@@ -79,7 +95,10 @@
                     <dd class="search-xmpp" style="display:none">
                         <ul>
                             <li>
-                                <form class="add-xmpp-contact"><input type="text" name="identifier" class="username" placeholder="Contact username"><button type="submit">Add</button></form>
+                                <form class="add-xmpp-contact">
+                                    <input type="text" name="identifier" class="username" placeholder="Contact username">
+                                    <button type="submit">Add</button>
+                                </form>
                             </li>
                             <li></li>
                         </ul>
@@ -158,6 +177,7 @@
                             <li class="room-info">Moderated</li><li class="room-info">Open room</li>
                             <li class="room-info">Permanent room</li><li class="room-info">Public</li>
                             <li class="room-info">Semi-anonymous</li>
+                            <li class="room-info">Requires authentication <span class="icon-lock"></span></li>
                             <p></p>
                         </ul>
                     </div>
@@ -261,6 +281,20 @@ $(document).ready(function () {
         switchTab(ev); 
     });
 
+    $("a.choose-xmpp-status").click(function (ev) {
+        ev.preventDefault();
+        $(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
+    });
+
+    $('.toggle-xmpp-contact-form').click(function (ev) {
+        ev.preventDefault();
+        $(ev.target).parent().parent().find('.search-xmpp').toggle('fast', function () {
+            if ($(this).is(':visible')) {
+                $(this).find('input.username').focus();
+            }
+        });
+    });
+
     var switchTab = function (ev) {
         ev.preventDefault();
         var $tab = $(ev.target),