Add unread messages counter on the min. chats toggle.

css/converse.css

@@ -564,7 +564,7 @@ span.spinner.hor_centered {
   display: block;
   height: auto;
   bottom: 25px;
-  margin-left: -8px;
+  margin-left: 0;
 }
 #conversejs #trimmed-chatboxes .box-flyout .chat-head {
   font-size: 100%;
@@ -587,14 +587,17 @@ span.spinner.hor_centered {
   background-color: #F4F4F4;
   padding: 4px 8px;
   margin-right: 5px;
-  color: #080808;
+  color: #0a0a0a;
+  font-weight: bold;
   height: 100%;
 }
 #conversejs .toggle-minimized-chats {
+  position: relative;
+  padding: 4px 0 0 4px;
   display: block;
   width: 100%;
   height: 100%;
-  color: #080808;
+  color: #0f0f0f;
 }
 #conversejs .chat-head {
   color: #ffffff;
@@ -835,6 +838,11 @@ dl.add-converse-contact {
   background-color: #2D617A;
   padding: 3px 0 0 0;
 }
+#conversejs .toggle-minimized-chats .unread-message-count {
+  right: 5px;
+  bottom: 5px;
+}
+#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));
@@ -843,7 +851,7 @@ dl.add-converse-contact {
   border: 1px solid;
   text-shadow: 1px 1px 0 #ccc;
   color: darkred;
-  border-radius: 20%;
+  border-radius: 5px;
   padding: 2px 4px;
   font-size: 15px;
   text-align: center;
@@ -1048,6 +1056,7 @@ dl.add-converse-contact {
 }
 #conversejs #trimmed-chatboxes {
   width: 130px;
+  padding: 0;
 }
 #conversejs .chatbox {
   width: 200px;

less/converse.less

@@ -593,7 +593,7 @@ span.spinner.hor_centered {
     display: block;
     height: auto;
     bottom: 25px;
-    margin-left: -8px;
+    margin-left: 0;
 }
 
 #conversejs #trimmed-chatboxes .box-flyout .chat-head {
@@ -619,15 +619,18 @@ span.spinner.hor_centered {
     background-color: #F4F4F4;
     padding: 4px 8px;
     margin-right: 5px;
-    color: #080808;
+    color: #0a0a0a;
+    font-weight: bold;
     height: 100%;
 }
 
 #conversejs .toggle-minimized-chats {
+    position: relative;
+    padding: 4px 0 0 4px;
     display: block;
     width: 100%;
     height: 100%;
-    color: #080808;
+    color: #0f0f0f;
 }
 
 #conversejs .chat-head {
@@ -914,6 +917,12 @@ dl.add-converse-contact {
     padding: 3px 0 0 0;
 }
 
+#conversejs .toggle-minimized-chats .unread-message-count {
+    right: 5px;
+    bottom: 5px;
+}
+
+#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, grey) );
@@ -922,7 +931,7 @@ dl.add-converse-contact {
     border: 1px solid;
     text-shadow: 1px 1px 0 #ccc;
     color: darkred;
-    border-radius: 20%;
+    border-radius: 5px;
     padding: 2px 4px;
     font-size: 15px;
     text-align: center;
@@ -1159,6 +1168,7 @@ dl.add-converse-contact {
 
 #conversejs #trimmed-chatboxes {
     width: 130px;
+    padding: 0;
 }
 
 #conversejs .chatbox {

mockup/index.html

@@ -374,21 +374,24 @@
     </div>
 
     <div id="trimmed-chatboxes">
-        <div class="box-flyout">
+        <a class="toggle-minimized-chats" href="#">
+            <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
+        </a>
+        <div class="box-flyout minimized-chats">
             <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>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
-                        <div class="chat-head-message-count" style="display:block">3</div>
                         Restricted Chatroom
                     </a>
                 </div>
             </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>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
-                        <div class="chat-head-message-count" style="display:block">42</div>
                         JC Brand
                     </a>
                 </div>
@@ -408,10 +411,11 @@
                     </a>
                 </div>
             </div>
-            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            <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>
                 <div class="chat-title">
                     <a href="#" class="restore-chat" title="Click to maximize this chat">
-                        <div class="chat-head-message-count" style="display:block">842</div>
                         Asmaa Haakman
                     </a>
                 </div>

mockup/minimal.html

@@ -48,6 +48,7 @@
     <div id="trimmed-chatboxes">
         <a class="toggle-minimized-chats" href="#">
             <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
+            <span class="unread-message-count" href="#" style="display:block">322</span>
         </a>
         <div class="box-flyout minimized-chats">
             <div class="chat-head chat-head-chatroom">