Start updating the templates with the new markup

converse.css

@@ -359,9 +359,6 @@ span.spinner.hor_centered {
     background-color: rgba(83, 144, 200, 100);
     padding: 4px 8px;
     margin-right: 5px;
-}
-
-#toggle-controlbox a {
     color: white;
 }
 

dragresize/dragresize_commented.js

@@ -154,6 +154,7 @@ DragResize.prototype.mouseDown = function(e) {
         while (elm) {
             // Loop up the DOM looking for matching elements. Remember one if found.
             if (elm.className) {
+                if (!newHandle && (hRE.test(elm.className))) newHandle = elm;
                 if (isElement(elm)) { newElement = elm; break }
             }
             elm = elm.parentNode;

mockup.html

@@ -63,19 +63,19 @@
 </div>
 
 <div id="conversejs">
-    <div id="toggle-controlbox">
-        <a href="#" class="chat toggle-online-users conn-feedback">Toggle Chat</a>
-    </div>
+    <a id="toggle-controlbox" href="#" class="chat toggle-online-users">
+        <span class="conn-feedback">Toggle Chat</span>
+        <span style="display: none" id="online-count">(0)</span>
+    </a>
 
     <div id="controlbox" class="chatbox">
         <div class="box-flyout">
-            <div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
+            <div class="dragresize dragresize-tm"></div>
             <div class="chat-head controlbox-head">
                 <ul id="controlbox-tabs">
                     <li><a class="current" href="#login">Sign in</a></li>
                 </ul>
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="minimize-chatbox-button icon-minus"></a>
             </div>
             <div id="login-dialog">
                 <form id="converse-login">
@@ -89,14 +89,13 @@
 
     <div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
         <div class="box-flyout">
-            <div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
+            <div class="dragresize dragresize-tm"></div>
             <div class="chat-head controlbox-head">
                 <ul id="controlbox-tabs">
                     <li><a class="s current" href="#users">Contacts</a></li>
                     <li><a class="s" href="#chatrooms">Rooms</a></li>
                 </ul>
                 <a class="close-chatbox-button icon-close"></a>
-                <a class="minimize-chatbox-button icon-minus"></a>
             </div>
             <div id="users" class="controlbox-pane" style="display: block;">
                 <form class="set-xmpp-status" action="" method="post">
@@ -242,7 +241,7 @@
 
     <div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
         <div class="box-flyout">
-            <div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
+            <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>
@@ -319,7 +318,7 @@
 
     <div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
         <div class="box-flyout">
-            <div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
+            <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>
@@ -394,7 +393,7 @@
 
     <div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
         <div class="box-flyout">
-            <div class="dragresize dragresize-tm" style="visibility: inherit;"></div>
+            <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>

src/templates/chatbox.html

@@ -1,17 +1,20 @@
-<div class="chat-head chat-head-chatbox">
-    <a class="close-chatbox-button icon-close"></a>
-    <a href="{{url}}" target="_blank" class="user">
-        <div class="chat-title"> {{ fullname }} </div>
-    </a>
-    <p class="user-custom-message"><p/>
+<div class="box-flyout">
+    <div class="dragresize dragresize-tm"></div>
+    <div class="chat-head chat-head-chatbox">
+        <a class="close-chatbox-button icon-close"></a>
+        <a href="{{url}}" target="_blank" class="user">
+            <div class="chat-title"> {{ fullname }} </div>
+        </a>
+        <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>
-<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>

src/templates/controlbox.html

@@ -1,5 +1,8 @@
-<div class="chat-head oc-chat-head">
-    <ul id="controlbox-tabs"></ul>
-    <a class="close-chatbox-button icon-close"></a>
+<div class="box-flyout">
+    <div class="dragresize dragresize-tm"></div>
+    <div class="chat-head controlbox-head">
+        <ul id="controlbox-tabs"></ul>
+        <a class="close-chatbox-button icon-close"></a>
+    </div>
+    <div class="controlbox-panes"></div>
 </div>
-<div class="controlbox-panes"></div>

src/templates/controlbox_toggle.html

@@ -1,2 +1,2 @@
-<strong class="conn-feedback">{{label_toggle}}</strong>
-<strong style="display: none" id="online-count">(0)</strong>
+<span class="conn-feedback">{{label_toggle}}</span>
+<span style="display: none" id="online-count">(0)</span>