Update the mockup with show/hide button for chat room participants.

css/converse.css

@@ -562,13 +562,14 @@ span.spinner.hor_centered {
 }
 #conversejs .chatroom .chat-area {
   float: left;
-  width: 200px;
   height: 100%;
+  width: 200px;
 }
 #conversejs .chatroom .participants {
-  float: left;
+  float: right;
   background-color: white;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   border-left: 1px solid #AAA;
   border-bottom-right-radius: 4px;
   width: 100px;
@@ -1202,11 +1203,7 @@ select#select-xmpp-status {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   width: 200px;
-  height: 84px;
-}
-#conversejs .chatroom form.sendXMPPMessage {
-  -webkit-border-bottom-right-radius: 0;
-  border-bottom-right-radius: 0;
+  height: 83px;
 }
 #conversejs .chat-textarea {
   box-sizing: border-box;
@@ -1228,8 +1225,8 @@ select#select-xmpp-status {
   padding: 0 5px 0 0;
   height: 20px;
   display: block;
-  width: 195px;
 }
+#conversejs .chat-toolbar .toggle-participants,
 #conversejs .chat-toolbar .toggle-clear,
 #conversejs .chat-toolbar .toggle-otr {
   float: right;

less/converse.less

@@ -603,14 +603,15 @@ span.spinner.hor_centered {
 
 #conversejs .chatroom .chat-area {
     float: left;
-    width: 200px;
     height: 100%;
+    width: 200px;
 }
 
 #conversejs .chatroom .participants {
-    float: left;
+    float: right;
     background-color: white;
-    overflow: auto;
+    overflow-y: auto;
+    overflow-x: hidden;
     border-left: 1px solid #AAA;
     border-bottom-right-radius: 4px;
     width: 100px;
@@ -1359,12 +1360,7 @@ select#select-xmpp-status {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     width: 200px;
-    height: 84px;
-}
-
-#conversejs .chatroom form.sendXMPPMessage {
-    -webkit-border-bottom-right-radius: 0;
-    border-bottom-right-radius: 0;
+    height: 83px;
 }
 
 #conversejs .chat-textarea {
@@ -1389,9 +1385,9 @@ select#select-xmpp-status {
     padding: 0 5px 0 0;
     height: 20px;
     display: block;
-    width: 195px;
 }
 
+#conversejs .chat-toolbar .toggle-participants,
 #conversejs .chat-toolbar .toggle-clear,
 #conversejs .chat-toolbar .toggle-otr {
     float: right;

mockup/index.html

@@ -396,6 +396,8 @@
                                     <li><a class="icon-heart" href="#" data-emoticon="<3"></a></li>
                                 </ul>
                             </li>
+                            <li class="toggle-participants"><a class="icon-hide-users" title="Hide the list of participants"></a></li>
+                            <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
                         </ul>
                         <textarea type="text" class="chat-textarea" placeholder="Message"></textarea>
                     </form>
@@ -572,6 +574,22 @@ $(document).ready(function () {
             });
         });
 
+        $('.toggle-participants a').click(function (ev) {
+            var $el = $(ev.target);
+            if ($el.hasClass("icon-hide-users")) {
+                $el.removeClass('icon-hide-users').addClass('icon-show-users');
+                $('div.participants').animate({width: 0}).hide();
+                $el.closest('.chat-area').animate({width: '100%'});
+                $el.closest('form.sendXMPPMessage').animate({width: '100%'});
+            } else {
+                $el.removeClass('icon-show-users').addClass('icon-hide-users');
+                $el.closest('.chat-area').animate({width: '200px'}, function () {
+                    $('div.participants').css({width: '100px'}).show();
+                });
+                $el.closest('form.sendXMPPMessage').animate({width: '200px'});
+            }
+        });
+
         $('.toggle-chatbox-button').click(function(ev) {
             var $grandparent = $(ev.target).parent().parent().parent();
             $grandparent.fadeOut('fast');