Implement the participants show/hide feature.

converse.js

@@ -218,7 +218,8 @@
         this.visible_toolbar_buttons = {
             'emoticons': true,
             'call': false,
-            'clear': true
+            'clear': true,
+            'toggle-participants': true
         };
         this.xhr_custom_status = false;
         this.xhr_custom_status_url = '';
@@ -1006,6 +1007,26 @@
                 this.scrollDown();
             },
 
+            toggleParticipants: function (ev) {
+                if (ev) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                }
+                var $el = $(ev.target);
+                if ($el.hasClass("icon-hide-users")) {
+                    $el.removeClass('icon-hide-users').addClass('icon-show-users');
+                    this.$('div.participants').animate({width: 0}).hide();
+                    this.$('.chat-area').animate({width: '100%'});
+                    this.$('form.sendXMPPMessage').animate({width: '100%'});
+                } else {
+                    $el.removeClass('icon-show-users').addClass('icon-hide-users');
+                    this.$('.chat-area').animate({width: '200px'}, $.proxy(function () {
+                        this.$('div.participants').css({width: '100px'}).show();
+                    }, this));
+                    this.$('form.sendXMPPMessage').animate({width: '200px'});
+                }
+            },
+
             clearChatRoomMessages: function (ev) {
                 ev.stopPropagation();
                 var result = confirm(__("Are you sure you want to clear the messages from this room?"));
@@ -1447,8 +1468,11 @@
                                 UNVERIFIED: UNVERIFIED,
                                 VERIFIED: VERIFIED,
                                 allow_otr: converse.allow_otr && !this.is_chatroom,
+                                label_clear: __('Clear all messages'),
                                 label_end_encrypted_conversation: __('End encrypted conversation'),
+                                label_hide_participants: __('Hide the list of participants'),
                                 label_refresh_encrypted_conversation: __('Refresh encrypted conversation'),
+                                label_start_call: __('Start a call'),
                                 label_start_encrypted_conversation: __('Start encrypted conversation'),
                                 label_verify_with_fingerprints: __('Verify with fingerprints'),
                                 label_verify_with_smp: __('Verify with SMP'),
@@ -1457,7 +1481,8 @@
                                 otr_translated_status: OTR_TRANSLATED_MAPPING[data.otr_status],
                                 show_call_button: converse.visible_toolbar_buttons.call,
                                 show_clear_button: converse.visible_toolbar_buttons.clear,
-                                show_emoticons: converse.visible_toolbar_buttons.emoticons
+                                show_emoticons: converse.visible_toolbar_buttons.emoticons,
+                                show_participants_toggle: this.is_chatroom && converse.visible_toolbar_buttons['toggle-participants']
                             })
                         )
                     );
@@ -1948,6 +1973,7 @@
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
                 'click .toggle-clear': 'clearChatRoomMessages',
+                'click .toggle-participants a': 'toggleParticipants',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'mousedown .dragresize-tm': 'onDragResizeStart'
             },

src/templates/toolbar.html

@@ -18,10 +18,13 @@
     </li>
 {[ } ]}
 {[ if (show_call_button)  { ]}
-    <li class="toggle-call"><a class="icon-phone" title="Start a call"></a></li>
+<li class="toggle-call"><a class="icon-phone" title="{{label_start_call}}"></a></li>
+{[ } ]}
+{[ if (show_participants_toggle)  { ]}
+<li class="toggle-participants"><a class="icon-hide-users" title="{{label_hide_participants}}"></a></li>
 {[ } ]}
 {[ if (show_clear_button)  { ]}
-    <li class="toggle-clear"><a class="icon-remove" title="Clear all messages"></a></li>
+<li class="toggle-clear"><a class="icon-remove" title="{{label_clear}}"></a></li>
 {[ } ]}
 {[ if (allow_otr)  { ]}
     <li class="toggle-otr {{otr_status_class}}" title="{{otr_tooltip}}">