From 0bc40eed25f8f518f27ffc35edb2ec3630415d32 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Wed, 22 Jan 2014 19:43:47 +0200
Subject: [PATCH] Start updating the templates with the new markup

---
 converse.css                         |  3 ---
 dragresize/dragresize_commented.js   |  1 +
 mockup.html                          | 19 +++++++--------
 src/templates/chatbox.html           | 35 +++++++++++++++-------------
 src/templates/controlbox.html        | 11 +++++----
 src/templates/controlbox_toggle.html |  4 ++--
 6 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/converse.css b/converse.css
index edf0397f0..2c376b089 100644
--- a/converse.css
+++ b/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;
 }
 
diff --git a/dragresize/dragresize_commented.js b/dragresize/dragresize_commented.js
index 18b3fee29..08d8d74c1 100644
--- a/dragresize/dragresize_commented.js
+++ b/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;
diff --git a/mockup.html b/mockup.html
index 2b570637a..686cdc118 100644
--- a/mockup.html
+++ b/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>
diff --git a/src/templates/chatbox.html b/src/templates/chatbox.html
index 2937a6cbc..4eca76a4f 100644
--- a/src/templates/chatbox.html
+++ b/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>
diff --git a/src/templates/controlbox.html b/src/templates/controlbox.html
index d0c7d533f..d3ed37cff 100644
--- a/src/templates/controlbox.html
+++ b/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>
diff --git a/src/templates/controlbox_toggle.html b/src/templates/controlbox_toggle.html
index b504f2823..6abf85a25 100644
--- a/src/templates/controlbox_toggle.html
+++ b/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>