Chat boxes can now be minimized. Updates #71

converse.css

@@ -653,7 +653,7 @@ form.search-xmpp-contact input {
 }
 
 a.configure-chatroom-button,
-a.minimize-chatbox-button,
+a.toggle-chatbox-button,
 a.close-chatbox-button {
     font-size: 10px;
     padding: 3px 3px 2px 3px;
@@ -677,7 +677,7 @@ a.close-chatbox-button {
 }
 
 a.configure-chatroom-button:active,
-a.minimize-chatbox-button:active,
+a.toggle-chatbox-button:active,
 a.close-chatbox-button:active {
     position:relative;
     top:1px;

converse.js

@@ -729,6 +729,7 @@
 
             events: {
                 'click .close-chatbox-button': 'closeChat',
+                'click .toggle-chatbox-button': 'toggleChat',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
@@ -1116,6 +1117,32 @@
                 }
             },
 
+            saveToggleState: function () {
+                var flyout = this.$el.find('.box-flyout');
+                if (flyout.hasClass('minimized')) {
+                    flyout.removeClass('minimized');
+                    this.model.save({'minimized': false});
+                } else {
+                    flyout.addClass('minimized');
+                    this.model.save({'minimized': true});
+                }
+            },
+
+            swapToggleIcon: function ($el) {
+                if ($el.hasClass('icon-minus')) {
+                    $el.removeClass('icon-minus').addClass('icon-plus');
+                } else {
+                    $el.removeClass('icon-plus').addClass('icon-minus');
+                }
+            },
+
+            toggleChat: function (ev) {
+                this.saveToggleState();
+                this.$el.find('form.sendXMPPMessage').toggle();
+                this.$el.find('div.chat-content').slideToggle('fast');
+                this.swapToggleIcon($(ev.target));
+            },
+
             updateVCard: function () {
                 var jid = this.model.get('jid'),
                     rosteritem = converse.roster.get(jid);
@@ -1692,14 +1719,21 @@
             tagName: 'div',
             className: 'chatroom',
             events: {
-                'click a.close-chatbox-button': 'closeChat',
-                'click a.configure-chatroom-button': 'configureChatRoom',
+                'click .close-chatbox-button': 'closeChat',
+                'click .toggle-chatbox-button': 'toggleChat',
+                'click .configure-chatroom-button': 'configureChatRoom',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
                 'keypress textarea.chat-textarea': 'keyPressed'
             },
             is_chatroom: true,
 
+            toggleChat: function (ev) {
+                this.saveToggleState();
+                this.$el.find('div.chat-body').slideToggle('fast');
+                this.swapToggleIcon($(ev.target));
+            },
+
             sendChatRoomMessage: function (body) {
                 var match = body.replace(/^\s*/, "").match(/^\/(.*?)(?: (.*))?$/) || [false],
                     $chat_content;

mockup.html

@@ -244,7 +244,7 @@
             <div class="dragresize dragresize-tm"></div>
             <div class="chat-head chat-head-chatbox">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="minimize-chatbox-button icon-minus"></a>
+                <a class="toggle-chatbox-button icon-minus"></a>
 
                 <a href="http://opkode.com" target="_blank" class="user">
                     <canvas height="33px" width="33px" class="avatar" style="background-color: black"></canvas>
@@ -321,7 +321,7 @@
             <div class="dragresize dragresize-tm"></div>
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="minimize-chatbox-button icon-minus"></a>
+                <a class="toggle-chatbox-button icon-minus"></a>
                 <a class="configure-chatroom-button icon-wrench" style=""></a>
 
                 <div class="chat-title"> Chatroom </div>
@@ -396,7 +396,7 @@
             <div class="dragresize dragresize-tm"></div>
             <div class="chat-head chat-head-chatroom">
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="minimize-chatbox-button icon-minus"></a>
+                <a class="toggle-chatbox-button icon-minus"></a>
                 <a class="configure-chatroom-button" style="display:none">&nbsp;</a>
                 <div class="chat-title"> Restricted Chatroom</div>
                 <p class="chatroom-topic"></p>
@@ -477,11 +477,9 @@ $(document).ready(function () {
             });
         });
 
-        $('.minimize-chatbox-button').click(function(ev) {
+        $('.toggle-chatbox-button').click(function(ev) {
             var $grandparent = $(ev.target).parent().parent().parent();
-            if ($grandparent.attr('id') == 'controlbox') {
-                $grandparent.find('.controlbox-panes').slideToggle(300);
-            } else if ($grandparent.attr('class') == 'chatroom') {
+            if ($grandparent.attr('class') == 'chatroom') {
                 $grandparent.find('.chat-body').slideToggle(300);
             } else {
                 $grandparent.find('div.chat-content').slideToggle(300);