Various changes, see below:

- disable drag resizing when chatboxes are minimized.
- refactored chat box and chat room markup so that they are more similar.
- don't make the chat box title clickable if no vcard URL is available
- make only the title text clickable, not the whitespace
- fixed toggling of resized chats

converse.css

@@ -386,16 +386,25 @@ span.spinner.hor_centered {
     background-color: #2D617A;
 }
 
-.chatroom .chat-body {
-    height: -moz-calc(100% - 38px);
-    height: -o-calc(100% - 38px);
-    height: calc(100% - 38px);
+.chat-body {
     background-color: white;
     border-bottom-right-radius: 4px;
     border-bottom-left-radius: 4px;
     border-top: 0;
 }
 
+.chatbox .chat-body {
+    height: -moz-calc(100% - 38px);
+    height: -o-calc(100% - 38px);
+    height: calc(100% - 38px);
+}
+
+.chatroom .chat-body {
+    height: -moz-calc(100% - 38px);
+    height: -o-calc(100% - 38px);
+    height: calc(100% - 38px);
+}
+
 .chatroom .chat-area {
     float: left;
     width: 200px;
@@ -450,16 +459,10 @@ ul.participant-list li.moderator {
     -moz-box-sizing: border-box;
 }
 
-.chatbox .chat-content {
-    height: -moz-calc(100% - 114px);
-    height: -o-calc(100% - 114px);
-    height: calc(100% - 114px);
-}
-
-.chatroom .chat-content {
-    height: -moz-calc(100% - 75px);
-    height: -o-calc(100% - 75px);
-    height: calc(100% - 75px);
+.chat-content {
+    height: -moz-calc(100% - 76px);
+    height: -o-calc(100% - 76px);
+    height: calc(100% - 76px);
 }
 
 .chat-info {
@@ -558,6 +561,10 @@ div.chat-title {
     height: 1em;
 }
 
+div.chat-title a {
+    color: white;
+}
+
 .chat-head-chatbox,
 .chat-head-chatroom {
     background: linear-gradient(top, rgba(206,220,231,1) 0%,rgba(79,106,114,1) 100%);
@@ -576,6 +583,9 @@ p.chatroom-topic {
     margin: 0;
 }
 
+div.chat-head-chatbox a.user-custom-message {
+    color: white;
+}
 .activated{
     display: block !important;
 }

converse.js

@@ -1149,19 +1149,21 @@
                 }
             },
 
-            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) {
+                // FIXME: Restore chat box to original resized height.
+                // Requires that we save the custom height.
+                this.$el.children('.box-flyout').attr('style', '');
+
                 this.saveToggleState();
-                this.$el.find('form.sendXMPPMessage').toggle();
-                this.$el.find('div.chat-content').slideToggle('fast');
-                this.swapToggleIcon($(ev.target));
+                this.$el.find('div.chat-body').slideToggle('fast');
+                var $target = $(ev.target);
+                if ($target.hasClass('icon-minus')) {
+                    $target.removeClass('icon-minus').addClass('icon-plus');
+                } else {
+                    $target.removeClass('icon-plus').addClass('icon-minus');
+                }
+                // Toggle drag resize ability
+                this.$el.find('.dragresize-tm').toggle();
             },
 
             updateVCard: function () {
@@ -1746,12 +1748,6 @@
             },
             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;

src/dragresize.js

@@ -14,7 +14,7 @@ Simplified and modified for Converse.js by JC Brand https://opkode.com
     if (typeof define === 'function' && define.amd) {
         define("dragresize", [], function() { return factory(); });
     } else {
-        root.dragresize = factory();
+        root.DragResize = factory();
     }
 }(this, function () {
 

src/templates/chatbox.html

@@ -3,19 +3,27 @@
     <div class="chat-head chat-head-chatbox">
         <a class="close-chatbox-button icon-close"></a>
         <a class="toggle-chatbox-button icon-minus"></a>
-        <a href="{{url}}" target="_blank" class="user">
-            <div class="chat-title"> {{ fullname }} </div>
-        </a>
+        <div class="chat-title"> 
+            {[ if (url) { ]}
+                <a href="{{url}}" target="_blank" class="user">
+            {[ } ]}
+                    {{ fullname }}
+            {[ if (url) { ]}
+                </a>
+            {[ } ]}
+        </div>
         <p class="user-custom-message"><p/>
     </div>
-    <div class="chat-content"></div>
-    <form class="sendXMPPMessage" action="" method="post">
-        {[ if (show_toolbar) { ]}
-            <ul class="chat-toolbar no-text-select"></ul>
-        {[ } ]}
-    <textarea
-        type="text"
-        class="chat-textarea"
-        placeholder="{{label_personal_message}}"/>
-    </form>
+    <div class="chat-body">
+        <div class="chat-content"></div>
+        <form class="sendXMPPMessage" action="" method="post">
+            {[ if (show_toolbar) { ]}
+                <ul class="chat-toolbar no-text-select"></ul>
+            {[ } ]}
+        <textarea
+            type="text"
+            class="chat-textarea"
+            placeholder="{{label_personal_message}}"/>
+        </form>
+    </div>
 </div>