Styling for the minimized chats list.

converse.js

@@ -598,7 +598,7 @@
                 this.registerPresenceHandler();
                 this.chatboxes.registerMessageHandler();
                 converse.xmppstatus.sendPresence();
-                this.giveFeedback(__('Online Contacts'));
+                this.giveFeedback(__('Contacts'));
             }, this));
         };
 
@@ -640,7 +640,7 @@
             this.initStatus($.proxy(function () {
 
                 this.chatboxes.onConnected();
-                this.giveFeedback(__('Online Contacts'));
+                this.giveFeedback(__('Contacts'));
                 if (this.callback) {
                     if (this.connection.service === 'jasmine tests') {
                         // XXX: Call back with the internal converse object. This

css/converse.css

@@ -31,7 +31,7 @@
   font-size: 14px;
   bottom: 0;
   direction: ltr;
-  height: 25px;
+  height: 35px;
   left: 0;
   position: fixed;
   right: 0;
@@ -356,26 +356,57 @@
     text-align: center;
     display: block;
     margin: 0 auto; }
-  #conversejs #minimized-chats,
+  #conversejs .toggle-controlbox,
+  #conversejs #minimized-chats {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    float: right;
+    margin: 0 7px;
+    font-weight: bold; }
   #conversejs .toggle-controlbox {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
+    background-color: #436F64;
     color: #0a0a0a;
-    float: right;
-    font-size: 90%;
-    font-weight: bold;
     height: 100%;
-    margin-right: 5px;
-    padding: 4px 8px; }
+    padding: 10px 8px 0 8px; }
+    #conversejs .toggle-controlbox span {
+      color: white; }
   #conversejs #minimized-chats {
-    width: 130px;
+    color: white;
+    display: none;
+    height: 100%;
     padding: 0;
-    display: none; }
+    width: 130px; }
+    #conversejs #minimized-chats #toggle-minimized-chats {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      background-color: ivory;
+      position: relative;
+      padding: 10px 0 0 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      text-align: center; }
+    #conversejs #minimized-chats .unread-message-count,
+    #conversejs #minimized-chats .chat-head-message-count {
+      font-weight: bold;
+      background-color: #f6f6f6;
+      background-image: -webkit-linear-gradient(#f6f6f6 5%, #808080 100%);
+      background-image: linear-gradient(#f6f6f6 5%, #808080 100%);
+      border: 1px solid;
+      text-shadow: 1px 1px 0 #FAFAFA;
+      color: #681F2C;
+      border-radius: 5px;
+      padding: 2px 4px;
+      font-size: 16px;
+      text-align: center;
+      position: absolute;
+      right: 116px;
+      bottom: 10px; }
     #conversejs #minimized-chats .box-flyout {
       position: absolute;
       display: block;
       height: auto;
-      bottom: 25px;
+      bottom: 35px;
       margin-left: 0; }
       #conversejs #minimized-chats .box-flyout .chat-head {
         font-size: 100%;
@@ -385,27 +416,6 @@
         box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
         height: 24px;
         width: 130px; }
-  #conversejs #toggle-minimized-chats {
-    position: relative;
-    padding: 4px 0 0 4px;
-    display: block;
-    width: 100%;
-    height: 100%; }
-    #conversejs #toggle-minimized-chats .unread-message-count {
-      right: 5px;
-      bottom: 5px; }
-  #conversejs .toggle-controlbox,
-  #conversejs a.toggle-minimized-chats {
-    float: right;
-    font-size: 85%;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
-    background-color: #436F64;
-    padding: 4px 8px;
-    margin-right: 5px; }
-    #conversejs .toggle-controlbox span,
-    #conversejs a.toggle-minimized-chats span {
-      color: white; }
   #conversejs .chat-body {
     background-color: white;
     border-bottom-right-radius: 4px;
@@ -611,22 +621,6 @@
     padding: 0 0 5px 5px; }
     #conversejs form.search-xmpp-contact input {
       width: 8em; }
-  #conversejs .unread-message-count,
-  #conversejs .chat-head-message-count {
-    font-weight: bold;
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
-    background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
-    border: 1px solid;
-    text-shadow: 1px 1px 0 #FAFAFA;
-    color: #681F2C;
-    border-radius: 5px;
-    padding: 2px 4px;
-    font-size: 15px;
-    text-align: center;
-    position: absolute;
-    right: 22px;
-    bottom: 1px; }
   #conversejs a.configure-chatroom-button,
   #conversejs a.toggle-chatbox-button,
   #conversejs a.close-chatbox-button {
@@ -815,7 +809,7 @@
     background-color: #E3C9C1; }
   #conversejs .chatbox,
   #conversejs .chatroom {
-    height: 25px;
+    height: 35px;
     float: right;
     margin: 0 7px;
     display: block; }
@@ -1217,7 +1211,7 @@
         height: 400px; } }
   #conversejs .minimized-chats-flyout {
     border-radius: 4px;
-    bottom: 25px;
+    bottom: 35px;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     display: block;
     position: absolute;
@@ -1227,7 +1221,7 @@
     #conversejs .minimized-chats-flyout .chat-head {
       border-radius: 4px;
       width: 130px;
-      height: 25px;
+      height: 35px;
       margin-bottom: 1px; }
   #conversejs .minimized-chats-flyout.minimized {
     height: auto; }

mockup/minimal.html

@@ -21,7 +21,7 @@
 
 <div id="conversejs">
     <a id="toggle-controlbox" href="#" class="toggle-controlbox">
-        <span class="conn-feedback">Friends Online</span>
+        <span class="conn-feedback">Toggle Chat</span>
         <span id="online-count">(0)</span>
     </a>
 
@@ -53,7 +53,7 @@
         <div class="minimized-chats-flyout">
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="chat-head-message-count" href="#" style="display:block">3</a>
+                <a class="chat-head-message-count" href="#">3</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Restricted Chatroom
@@ -62,7 +62,7 @@
             </div>
             <div class="chat-head chat-head-chatbox">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="chat-head-message-count" href="#" style="display:block">42</a>
+                <a class="chat-head-message-count" href="#">42</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         JC Brand
@@ -86,7 +86,7 @@
             </div>
             <div class="chat-head chat-head-chatbox">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="chat-head-message-count" href="#" style="display:block">842</a>
+                <a class="chat-head-message-count" href="#">842</a>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Asmaa Haakman

sass/converse.scss

@@ -38,7 +38,7 @@
   font-size: $font-size;
   bottom: 0;
   direction: ltr;
-  height: 25px;
+  height: $bottom-gutter-height;
   left: 0;
   position: fixed;
   right: 0;
@@ -270,29 +270,65 @@
     margin: 0 auto;
   }
 
-  #minimized-chats,
-  .toggle-controlbox {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-    color: #0a0a0a;
+  .toggle-controlbox,
+  #minimized-chats {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
     float: right;
-    font-size: 90%;
+    margin: 0 $chat-gutter;
     font-weight: bold;
+  }
+
+  .toggle-controlbox {
+    background-color: $link-color;
+    color: #0a0a0a;
     height: 100%;
-    margin-right: 5px;
-    padding: 4px 8px;
+    padding: 10px 8px 0 8px;
+    span {
+      color: $inverse-link-color;
+    }
   }
 
   #minimized-chats {
-    width: 130px;
-    padding: 0;
+    color: $inverse-link-color;
     display: none;
+    height: 100%;
+    padding: 0;
+    width: 130px;
+
+    #toggle-minimized-chats {
+      border-top-left-radius: 4px;
+      border-top-right-radius: 4px;
+      background-color: ivory;
+      position: relative;
+      padding: 10px 0 0 0;
+      display: block;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+    }
+    
+    .unread-message-count,
+    .chat-head-message-count {
+      font-weight: bold;
+      @include linear-gradient(#f6f6f6 5%, #808080 100%);
+      border: 1px solid;
+      text-shadow: 1px 1px 0 $text-shadow-color;
+      color: $warning-color;
+      border-radius: 5px;
+      padding: 2px 4px;
+      font-size: 16px;
+      text-align: center;
+      position: absolute;
+      right: 116px;
+      bottom: 10px;
+    }
 
     .box-flyout {
       position: absolute;
       display: block;
       height: auto;
-      bottom: 25px;
+      bottom: $bottom-gutter-height;
       margin-left: 0;
 
       .chat-head {
@@ -307,32 +343,6 @@
     }
   }
 
-  #toggle-minimized-chats {
-    position: relative;
-    padding: 4px 0 0 4px;
-    display: block;
-    width: 100%;
-    height: 100%;
-    .unread-message-count {
-      right: 5px;
-      bottom: 5px;
-    }
-  }
-
-  .toggle-controlbox,
-  a.toggle-minimized-chats {
-    float: right;
-    font-size: 85%;
-    border-top-right-radius: 4px;
-    border-top-left-radius: 4px;
-    background-color: $link-color;
-    padding: 4px 8px;
-    margin-right: 5px;
-    span {
-      color: $inverse-link-color;
-      }
-  }
-
   .chat-body {
     background-color: white;
     border-bottom-right-radius: 4px;
@@ -633,24 +643,6 @@
     }
   }
 
-  .unread-message-count,
-  .chat-head-message-count {
-    font-weight: bold;
-    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
-    background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
-    border: 1px solid;
-    text-shadow: 1px 1px 0 $text-shadow-color;
-    color: $warning-color;
-    border-radius: 5px;
-    padding: 2px 4px;
-    font-size: 15px;
-    text-align: center;
-    position: absolute;
-    right: 22px;
-    bottom: 1px;
-  }
-
   a.configure-chatroom-button,
   a.toggle-chatbox-button,
   a.close-chatbox-button {
@@ -909,7 +901,7 @@
 
   .chatbox,
   .chatroom {
-    height: 25px;
+    height: $bottom-gutter-height;
     float: right;
     margin: 0 $chat-gutter;
     @media screen and (max-width: $mobile_landscape_length) {
@@ -1466,7 +1458,7 @@
 
   .minimized-chats-flyout {
     border-radius: 4px;
-    bottom: 25px;
+    bottom: $bottom-gutter-height;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     display: block;
     position: absolute;
@@ -1476,7 +1468,7 @@
     .chat-head {
       border-radius: 4px;
       width: 130px;
-      height: 25px;
+      height: 35px;
       margin-bottom: 1px;
     }
   }

sass/variables.scss

@@ -22,6 +22,8 @@
   $roster-height: 194px;
   $controlbox-dropdown-height: 25px;
 
+  $bottom-gutter-height: 35px;
+
   $mobile_landscape_length: 480px;
 
   $font-size: 14px;