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">
-                    Annegreet Gomez
-                </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">
-                    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-title">
-                <a href="#" class="restore-chat">
-                    Felix Amsel
-                </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-title">
-                <a href="#" class="restore-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 class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Annegreet Gomez
+                    </a>
+                </div>
             </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 class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></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>
             </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">
-                    Max Frankfurter
-                </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" title="Click to maximize this chat">
+                        Candice van der Knijff
+                    </a>
+                </div>
             </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 class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Laura Grunewald
+                    </a>
+                </div>
             </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 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>
-    </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

mockup/minimized.html

@@ -1,274 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title id="pageTitle">Converse.js: Mockup of minimized chats</title>
-    <meta charset="utf-8">
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-    <meta name="description" content="Converse.js: Chat Client for Websites" />
-    <link type="text/css" href="../css/theme.css" rel="stylesheet" media="screen" />
-    <link type="text/css" href="../css/converse.css" rel="stylesheet" media="screen" />
-    <script src="../components/jquery/dist/jquery.min.js"></script>
-</head>
-<body>
-<!-- HEADER -->
-<div id="header_wrap" class="outer">
-    <header class="inner">
-        <h1 id="project_title"><a href="http://conversejs.org">Converse.js</a></h1>
-        <h2 id="project_tagline">Static Mockup</h2>
-    </header>
-</div>
-
-<div id="conversejs">
-
-    <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
-        <div class="box-flyout minimized">
-            <div class="dragresize dragresize-tm"></div>
-            <div class="chat-head chat-head-chatbox">
-                <div class="chat-head-message-count" style="display:block">3</div>
-                <a class="close-chatbox-button icon-close"></a>
-                <a class="toggle-chatbox-button icon-minus"></a>
-                <canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
-                <div class="chat-title">
-                    <a href="http://opkode.com" target="_blank" class="user">
-                        JC Brand
-                    </a>
-                </div>
-                <p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
-
-            </div>
-            <div class="chat-body" style="display: none">
-                <div class="chat-content">
-                    <div class="chat-info"><strong>/help</strong>:This is an info message</div>
-                    <div class="chat-error">This is an error message</div>
-                    <div class="chat-message">
-                        <span class="chat-message-me">09:35 me:&nbsp;</span>
-                        <span class="chat-message-content">
-                            Hello world
-                            <span class="icon-smiley"></span>
-                        </span>
-                    </div>
-                    <div class="chat-message ">
-                        <span class="chat-message-them">19:25 Benedict-John:&nbsp;</span>
-                        <span class="chat-message-content">Dagsê</span>
-                    </div>
-                    <div class="chat-message">
-                        <span class="chat-message-me">19:39 me:&nbsp;</span>
-                        <span class="chat-message-content">This is a relatively long message to check that wrapping works as expected.</span>
-                    </div>
-                    <div class="chat-message">
-                        <span class="chat-message-me">19:42 me:&nbsp;</span>
-                        <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                    </div>
-                    <div class="chat-event">JC Brand is busy</div>
-                    <div class="chat-message ">
-                        <span class="chat-message-me">19:43 me:&nbsp;</span>
-                        <span class="chat-message-content">Another message to check that scrolling works.</span>
-                    </div>
-                </div>
-                <form class="sendXMPPMessage" action="" method="post">
-                    <ul class="chat-toolbar no-text-select">
-                        <li class="toggle-smiley icon-happy" title="Insert a smilery">
-                            <ul>
-                                <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
-                                <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
-                                <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
-                                <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
-                                <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
-                                <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
-                                <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
-                                <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
-                                <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
-                                <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
-                                <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
-                                <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
-                                <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
-                            </ul>
-                        </li>
-                        <li class="toggle-otr unencrypted" title="Turn on 'off-the-record' chat encryption">
-                            <span class="chat-toolbar-text">unencrypted</span>
-                            <span class="icon-unlocked"></span>
-                            <ul>
-                                <li><a href="#">Start private conversation</a></li>
-                                <li><a href="#">End private conversation</a></li>
-                                <li><a href="#">Authenticate buddy</a></li>
-                                <li><a href="http://www.cypherpunks.ca/otr/help/3.2.0/levels.php" target="_blank">What's this?</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                    <textarea type="text" class="chat-textarea" placeholder="Personal message"></textarea>
-                </form>
-            </div>
-        </div>
-    </div>
-
-    <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
-        <div class="box-flyout minimized">
-            <div class="dragresize dragresize-tm"></div>
-            <div class="chat-head chat-head-chatroom">
-                <div class="chat-head-message-count" style="display:block">42</div>
-                <a class="close-chatbox-button icon-close"></a>
-                <a class="toggle-chatbox-button icon-minus"></a>
-                <a class="configure-chatroom-button icon-wrench" style=""></a>
-                <div class="chat-title"> Chatroom </div>
-                <p class="chatroom-topic">May the force be with you</p>
-            </div>
-            <div class="chat-body" style="display: none">
-                <div class="chat-area">
-                    <div class="chat-content">
-                        <time class="chat-date" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
-                        <div class="chat-message ">
-                            <span class="chat-message-room">18:50 luke:&nbsp;</span>
-                            <span class="chat-message-content">leia: hi :)</span>
-                        </div>
-                        <div class="chat-message ">
-                            <span class="chat-message-room">19:40 leia:&nbsp;</span>
-                            <span class="chat-message-content">
-                                I'll be gone for a while, will be back in about an hour</span>
-                        </div>
-                        <div class="chat-message ">
-                            <span class="chat-message-room">19:40 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                            <span class="chat-message-content">
-                                I'll be gone for a while, will be back in about an hour</span>
-                        </div>
-                        <div class="chat-message">
-                            <span class="chat-message-me">19:42 me:&nbsp;</span>
-                            <span class="chat-message-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
-                        </div>
-                        <div class="chat-message ">
-                            <span class="chat-message-room">19:43 Obi-wan Kenobi, Jedi Master:&nbsp;</span>
-                            <span class="chat-message-content">Another message to check that scrolling works.</span>
-                        </div>
-                    </div>
-
-                    <form class="sendXMPPMessage" action="" method="post">
-                        <ul class="chat-toolbar no-text-select">
-                            <li class="toggle-smiley icon-happy" title="Insert a smilery">
-                                <ul>
-                                    <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
-                                    <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
-                                    <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>
-                                    <li><a class="icon-tongue" href="#" data-emoticon=":P"></a></li>
-                                    <li><a class="icon-cool" href="#" data-emoticon="8)"></a></li>
-                                    <li><a class="icon-evil" href="#" data-emoticon=">:)"></a></li>
-                                    <li><a class="icon-confused" href="#" data-emoticon=":S"></a></li>
-                                    <li><a class="icon-wondering" href="#" data-emoticon=":\"></a></li>
-                                    <li><a class="icon-angry" href="#" data-emoticon=">:("></a></li>
-                                    <li><a class="icon-sad" href="#" data-emoticon=":("></a></li>
-                                    <li><a class="icon-shocked" href="#" data-emoticon=":O"></a></li>
-                                    <li><a class="icon-thumbs-up" href="#" data-emoticon="(^.^)b"></a></li>
-                                    <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
-                                </ul>
-                            </li>
-                        </ul>
-                        <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
-                    </form>
-                </div>
-                <div class="participants">
-                    <ul class="participant-list">
-                        <li class="participant" title="This user can send messages in this room">Obi-wan Kenobi, Jedi Master</li>
-                        <li class="participant" title="This user can send messages in this room">jabber the hut</li>
-                        <li class="participant" title="This user can send messages in this room">leia</li>
-                        <li class="moderator" title="This user is a moderator">luke</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<script>
-$(document).ready(function () {
-    $('a[href=#chatrooms]').click(function (ev) { 
-        switchTab(ev);
-    });
-    $('a[href=#users]').click(function (ev) {
-        switchTab(ev); 
-    });
-
-    $("a.choose-xmpp-status").click(function (ev) {
-        ev.preventDefault();
-        $(ev.target).parent().parent().siblings('dd').find('ul').toggle('fast');
-    });
-
-    $("a.change-xmpp-status-message").click(function (ev) {
-        ev.preventDefault();
-        var form = ''+
-                '<form id="set-custom-xmpp-status">' +
-                    '<input type="text" class="custom-xmpp-status"I am online"'+
-                        'placeholder="I am online"/>' +
-                    '<button type="submit">Save</button>' +
-                '</form>';
-
-        $(ev.target).closest('.xmpp-status').replaceWith(form);
-        $(ev.target).closest('.custom-xmpp-status').focus().focus();
-    });
-
-    $('.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),
-            $sibling = $tab.parent().siblings('li').children('a'),
-            $tab_panel = $($tab.attr('href')),
-            $sibling_panel = $($sibling.attr('href'));
-
-        $sibling_panel.fadeOut('fast', function () {
-            $sibling.removeClass('current');
-            $tab.addClass('current');
-            $tab_panel.fadeIn('fast', function () {
-            });
-        });
-    }
-
-    $(function() {
-        $('.close-chatbox-button').click(function(ev) {
-            var $grandparent = $(ev.target).parent().parent().parent();
-            $grandparent.hide(300, function () {
-                // Webkit fix
-                document.getElementById('conversejs').style.display = 'none';
-                document.getElementById('conversejs').offsetHeight; // no need to store this anywhere, the reference is enough
-                document.getElementById('conversejs').style.display = 'block';
-            });
-        });
-
-        $('.toggle-chatbox-button').click(function(ev) {
-            var $grandparent = $(ev.target).parent().parent().parent();
-            $grandparent.find('.chat-body').slideToggle(300);
-            var flyout = $grandparent.find('.box-flyout');
-            if (flyout.hasClass('minimized')) {
-                flyout.removeClass('minimized');
-            } else {
-                flyout.addClass('minimized');
-            }
-        });
-
-        // Clickable Dropdown
-        $('.toggle-otr').click(function(e) {
-            $('.toggle-otr ul').slideToggle(200);
-            e.stopPropagation();
-        });
-
-        $('.toggle-smiley').click(function(e) {
-            $(e.target).find('ul').slideToggle(200);
-            e.stopPropagation();
-        });
-        $(document).click(function() {
-            if ($('.toggle-otr ul').is(':visible')) {
-                $('.toggle-otr ul', this).slideUp(200);
-            }
-            if ($('.toggle-smiley ul').is(':visible')) {
-                $('.toggle-smiley ul', this).slideUp(200);
-            }
-        });
-    });
-});
-</script>
-
-</html>

src/templates/chatbox.html

@@ -1,7 +1,6 @@
 <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

@@ -1,6 +1,7 @@
 <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>