Show the consolidation in the mockup.

converse.js

@@ -2517,8 +2517,7 @@
                     if (item.get('chatroom')) {
                         view = new converse.ChatRoomView({'model': item});
                     } else if (item.get('box_id') === 'controlbox') {
-                        view = new converse.ControlBoxView({model: item});
-                        view.render();
+                        view = new converse.ControlBoxView({model: item}).render();
                     } else {
                         view = new converse.ChatBoxView({model: item});
                     }
@@ -3580,7 +3579,7 @@
                 if (converse.show_controlbox_by_default) {
                     toggle.hide(); // It's either or
                 }
-                $('#conversejs').append(toggle);
+                $('#conversejs').prepend(toggle);
                 return this;
             },
 

css/converse.css

@@ -568,12 +568,6 @@ span.spinner.hor_centered {
   margin-right: 5px;
   color: white;
 }
-#conversejs #trimmed-chatboxes {
-  float: left;
-  height: 25px;
-  margin-left: 5px;
-  display: block;
-}
 #conversejs #trimmed-chatboxes .box-flyout {
   position: absolute;
   display: block;
@@ -746,7 +740,6 @@ input.error {
   text-overflow: ellipsis;
   white-space: nowrap;
   text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0;
-  height: 1em;
 }
 #conversejs .chat-title a {
   color: white;
@@ -837,23 +830,20 @@ dl.add-converse-contact {
 #conversejs .chat-head-message-count {
   font-weight: bold;
   position: absolute;
-  left: -6px;
-  top: -6px;
+  left: -5px;
+  top: 2px;
   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: 3px solid #4f6a72;
+  border: 1px solid;
   text-shadow: 1px 1px 0 #ccc;
   color: darkred;
   border-radius: 20%;
-  padding: 2px 10px;
-  font-size: 18px;
+  padding: 1px 3px;
+  font-size: 13px;
   text-align: center;
   display: none;
 }
-#conversejs .chat-head-chatroom .chat-head-message-count {
-  border: 3px solid #2D617A;
-}
 #conversejs a.configure-chatroom-button,
 #conversejs a.toggle-chatbox-button,
 #conversejs a.close-chatbox-button {
@@ -1041,6 +1031,7 @@ dl.add-converse-contact {
 #conversejs #converse-roster dd.pending-xmpp-contact:hover span {
   width: 70%;
 }
+#conversejs #trimmed-chatboxes,
 #conversejs .chatbox,
 #conversejs .chatroom {
   height: 25px;
@@ -1048,6 +1039,9 @@ dl.add-converse-contact {
   margin-right: 15px;
   display: block;
 }
+#conversejs #trimmed-chatboxes {
+  width: 130px;
+}
 #conversejs .chatbox {
   width: 200px;
 }

less/converse.less

@@ -598,13 +598,6 @@ span.spinner.hor_centered {
     color: white;
 }
 
-#conversejs #trimmed-chatboxes {
-    float: left;
-    height: 25px;
-    margin-left: 5px;
-    display: block;
-}
-
 #conversejs #trimmed-chatboxes .box-flyout {
     position: absolute;
     display: block;
@@ -809,7 +802,6 @@ input.error {
     text-overflow: ellipsis;
     white-space: nowrap;
     text-shadow: rgba(0,0,0,0.51) 0 -1px 0;
-    height: 1em;
 }
 
 #conversejs .chat-title a {
@@ -917,25 +909,21 @@ dl.add-converse-contact {
 #conversejs .chat-head-message-count {
     font-weight: bold;
     position: absolute;
-    left: -6px;
-    top: -6px;
+    left: -5px;
+    top: 2px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
     background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
-    border: 3px solid rgb(79, 106, 114);
+    border: 1px solid;
     text-shadow: 1px 1px 0 #ccc;
     color: darkred;
     border-radius: 20%;
-    padding: 2px 10px;
-    font-size: 18px;
+    padding: 1px 3px;
+    font-size: 13px;
     text-align: center;
     display: none;
 }
 
-#conversejs .chat-head-chatroom .chat-head-message-count {
-    border: 3px solid #2D617A;
-}
-
 #conversejs a.configure-chatroom-button,
 #conversejs a.toggle-chatbox-button,
 #conversejs a.close-chatbox-button {
@@ -1153,6 +1141,7 @@ dl.add-converse-contact {
     width: 70%;
 }
 
+#conversejs #trimmed-chatboxes,
 #conversejs .chatbox,
 #conversejs .chatroom {
     height: 25px;
@@ -1161,6 +1150,10 @@ dl.add-converse-contact {
     display: block;
 }
 
+#conversejs #trimmed-chatboxes {
+    width: 130px;
+}
+
 #conversejs .chatbox {
     width: 200px;
 }

mockup/index.html

@@ -377,96 +377,68 @@
         <div class="box-flyout">
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
-                <div class="chat-title"> Restricted Chatroom</div>
+                <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>
                 <div class="chat-title">
-                    <a href="http://opkode.com" target="_blank" class="user">
+                    <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>
             </div>
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
-                <div class="chat-title"> My Chatroom</div>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        My Chatroom
+                    </a>
+                </div>
             </div>
-            
             <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
                 <div class="chat-title">
-                <a href="#" class="restore-chat">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Annegreet Gomez
                     </a>
                 </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
                 <div class="chat-title">
-                <a href="#" class="restore-chat">
+                    <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>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Candice van der Knijff
-                </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>
                 <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Felix Amsel
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Candice van der Knijff
                     </a>
                 </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Irini Vlastuin
-                </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>
                 <div class="chat-title">
-                <a href="#" class="restore-chat">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
                         Laura Grunewald
                     </a>
                 </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Lena Grunewald
-                </a>
-            </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Mandy Seiler
-                </a>
             </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Marcel Eberhardt
-                </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>
                 <div class="chat-title">
                     <a href="#" class="restore-chat">
-                    Max Frankfurter
+                        Lena Grunewald
                     </a>
                 </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Nuriye Cuypers
-                </a>
             </div>
-            </div><div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-            <div class="chat-title">
-                <a href="#" class="restore-chat">
-                    Rinse Sommer
-                </a>
         </div>
     </div>
-    </div></div>
-
 </div>
 
 <script>
@@ -531,13 +503,7 @@ $(document).ready(function () {
 
         $('.toggle-chatbox-button').click(function(ev) {
             var $grandparent = $(ev.target).parent().parent().parent();
-            $grandparent.find('.chat-body').slideToggle('fast');
-            var flyout = $grandparent.find('.box-flyout');
-            if (flyout.hasClass('minimized')) {
-                flyout.removeClass('minimized');
-            } else {
-                flyout.addClass('minimized');
-            }
+            $grandparent.fadeOut('fast');
         });
 
         // Clickable Dropdown

src/templates/chatbox.html

 <div class="box-flyout" style="height: {{height}}px">
     <div class="dragresize dragresize-tm"></div>
     <div class="chat-head chat-head-chatbox">
-        <div class="chat-head-message-count">0</div>
         <a class="close-chatbox-button icon-close"></a>
         <a class="toggle-chatbox-button icon-minus"></a>
         <div class="chat-title">

src/templates/trimmed_chat.html

 <a class="close-chatbox-button icon-close"></a>
 <div class="chat-title">
     <a href="#" class="restore-chat">
+        <div class="chat-head-message-count">0</div>
         {{ fullname }}
     </a>
 </div>