Add markup for offscreen chatboxes. updates #61

README.rst

@@ -87,6 +87,7 @@ Support
 -------
 
 For support queries and discussions, please join the mailing list: conversejs@librelist.com
+
 Also take a look at the `mailing list archives <http://librelist.com/browser/conversejs>`_.
 
 Issues can be logged on the `Github issue tracker <https://github.com/jcbrand/converse.js/issues>`_.

converse.css

@@ -468,16 +468,49 @@ span.spinner.hor_centered {
 }
 
 #conversejs #toggle-controlbox {
-    float: right;
     font-size: 85%;
     border-top-right-radius: 4px;
     border-top-left-radius: 4px;
     background-color: rgba(83, 144, 200, 100);
     padding: 4px 8px;
-    margin-right: 15px;
+    margin-right: 5px;
     color: white;
 }
 
+#conversejs #offscreen-chatboxes {
+    float: left;
+    height: 25px;
+    margin-left: 5px;
+    display: block;
+}
+
+#conversejs #offscreen-chatboxes .box-flyout {
+    position: absolute;
+    display: block;
+    bottom: 1px;
+    box-shadow: none;
+    border-radius: 4px;
+    height: auto;
+}
+
+#conversejs #offscreen-chatboxes .box-flyout .chat-head {
+    margin: 0;
+    font-size: 100%;
+    border-radius: 4px;
+    padding: 3px 0 0 5px;
+    margin-bottom: 2px;
+    box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
+    height: 24px;
+}
+
+#conversejs #offscreen-chatboxes .chat-head-chatroom {
+    width: 100px;
+}
+
+#conversejs #toggle-controlbox {
+    float: right;
+}
+
 #conversejs #connecting-to-chat {
     background: url(images/spinner.gif) no-repeat left;
     padding-left: 1.4em;
@@ -664,7 +697,7 @@ input.error {
     margin-right: 6px;
 }
 
-#conversejs div.chat-title {
+#conversejs .chat-title {
     color: white;
     font-weight: bold;
     line-height: 15px;
@@ -678,7 +711,7 @@ input.error {
     height: 1em;
 }
 
-#conversejs div.chat-title a {
+#conversejs .chat-title a {
     color: white;
 }
 

mockup/index.html

@@ -19,7 +19,7 @@
 </div>
 
 <div id="conversejs">
-    <a id="toggle-controlbox" href="#" class="chat toggle-online-users">
+    <a id="toggle-controlbox" href="#" class="toggle-online-users">
         <span class="conn-feedback">Toggle Chat</span>
         <span style="display: none" id="online-count">(0)</span>
     </a>
@@ -371,6 +371,28 @@
             </div>
         </div>
     </div>
+
+    <div id="offscreen-chatboxes">
+        <div class="box-flyout">
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title"> Restricted Chatroom</div>
+            </div>
+            <div class="chat-head chat-head-chatbox">
+                <a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="http://opkode.com" target="_blank" class="user">
+                        JC Brand
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title"> My Chatroom</div>
+            </div>
+        </div>
+    </div>
+
 </div>
 
 <script>