From 0b4e2730042e0ec7179f73aeab4492c21b7720e8 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Sat, 7 Jun 2014 00:10:34 +0200
Subject: [PATCH] Style minimized chats toggle

---
 css/converse.css    |  40 ++++++++------
 less/converse.less  |  41 ++++++++------
 mockup/minimal.html | 130 ++++++++++++++++++++++----------------------
 3 files changed, 111 insertions(+), 100 deletions(-)

diff --git a/css/converse.css b/css/converse.css
index 7dd77f1b9..a0e2521ab 100644
--- a/css/converse.css
+++ b/css/converse.css
@@ -394,7 +394,7 @@ you can use the generic selector below, but it's slower:
   user-select: none;
 }
 #conversejs {
-  bottom: 1px;
+  bottom: 0;
   direction: ltr;
   height: 25px;
   left: 0;
@@ -562,16 +562,15 @@ span.spinner.hor_centered {
 #conversejs #trimmed-chatboxes .box-flyout {
   position: absolute;
   display: block;
-  bottom: 1px;
-  box-shadow: none;
-  border-radius: 4px;
   height: auto;
+  bottom: 25px;
+  margin-left: -8px;
 }
 #conversejs #trimmed-chatboxes .box-flyout .chat-head {
   font-size: 100%;
   border-radius: 4px;
   padding: 3px 0 0 5px;
-  margin: 0 0 2px 2px;
+  margin: 0 0 1px 0;
   box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
   height: 24px;
   width: 130px;
@@ -579,16 +578,23 @@ span.spinner.hor_centered {
 #conversejs #trimmed-chatboxes .chat-head-chatroom {
   width: 100px;
 }
-#conversejs .toggle-controlbox,
-#conversejs .toggle-minimized-chats {
+#conversejs #trimmed-chatboxes,
+#conversejs .toggle-controlbox {
   float: right;
-  font-size: 85%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  background-color: #5390c8;
+  font-size: 90%;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  background-color: #F4F4F4;
   padding: 4px 8px;
   margin-right: 5px;
-  color: white;
+  color: #080808;
+  height: 100%;
+}
+#conversejs .toggle-minimized-chats {
+  display: block;
+  width: 100%;
+  height: 100%;
+  color: #080808;
 }
 #conversejs .chat-head {
   color: #ffffff;
@@ -743,7 +749,8 @@ input.error {
 #conversejs .chat-title a {
   color: white;
   width: 100%;
-  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 #conversejs .chat-head-chatbox,
 #conversejs .chat-head-chatroom {
@@ -830,9 +837,6 @@ dl.add-converse-contact {
 }
 #conversejs .chat-head-message-count {
   font-weight: bold;
-  position: absolute;
-  left: -5px;
-  top: 2px;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, #808080));
   background: -moz-linear-gradient(center top, #ffff00 5%, #f6f6f6 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
@@ -844,6 +848,9 @@ dl.add-converse-contact {
   font-size: 15px;
   text-align: center;
   display: none;
+  position: absolute;
+  right: 22px;
+  bottom: 1px;
 }
 #conversejs a.configure-chatroom-button,
 #conversejs a.toggle-chatbox-button,
@@ -1032,7 +1039,6 @@ dl.add-converse-contact {
 #conversejs #converse-roster dd.pending-xmpp-contact:hover span {
   width: 70%;
 }
-#conversejs #trimmed-chatboxes,
 #conversejs .chatbox,
 #conversejs .chatroom {
   height: 25px;
diff --git a/less/converse.less b/less/converse.less
index 17a9685bf..36aa99c40 100644
--- a/less/converse.less
+++ b/less/converse.less
@@ -403,7 +403,7 @@ you can use the generic selector below, but it's slower:
 }
 
 #conversejs {
-    bottom: 1px;
+    bottom: 0;
     direction: ltr;
     height: 25px;
     left: 0;
@@ -591,17 +591,16 @@ span.spinner.hor_centered {
 #conversejs #trimmed-chatboxes .box-flyout {
     position: absolute;
     display: block;
-    bottom: 1px;
-    box-shadow: none;
-    border-radius: 4px;
     height: auto;
+    bottom: 25px;
+    margin-left: -8px;
 }
 
 #conversejs #trimmed-chatboxes .box-flyout .chat-head {
     font-size: 100%;
     border-radius: 4px;
     padding: 3px 0 0 5px;
-    margin: 0 0 2px 2px;
+    margin: 0 0 1px 0;
     box-shadow: 1px 3px 5px 3px rgba(0,0,0,0.4);
     height: 24px;
     width: 130px;
@@ -611,16 +610,24 @@ span.spinner.hor_centered {
     width: 100px;
 }
 
-#conversejs .toggle-controlbox,
-#conversejs .toggle-minimized-chats {
+#conversejs #trimmed-chatboxes,
+#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);
+    font-size: 90%;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    background-color: #F4F4F4;
     padding: 4px 8px;
     margin-right: 5px;
-    color: white;
+    color: #080808;
+    height: 100%;
+}
+
+#conversejs .toggle-minimized-chats {
+    display: block;
+    width: 100%;
+    height: 100%;
+    color: #080808;
 }
 
 #conversejs .chat-head {
@@ -805,7 +812,8 @@ input.error {
 #conversejs .chat-title a {
     color: white;
     width: 100%;
-    display: block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 #conversejs .chat-head-chatbox,
@@ -908,9 +916,6 @@ dl.add-converse-contact {
 
 #conversejs .chat-head-message-count {
     font-weight: bold;
-    position: absolute;
-    left: -5px;
-    top: 2px;
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.35, #f6f6f6), color-stop(1, grey) );
     background: -moz-linear-gradient(center top, yellow 5%, #f6f6f6 100%);
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='yellow', endColorstr='#f6f6f6');
@@ -922,6 +927,9 @@ dl.add-converse-contact {
     font-size: 15px;
     text-align: center;
     display: none;
+    position: absolute;
+    right: 22px;
+    bottom: 1px;
 }
 
 #conversejs a.configure-chatroom-button,
@@ -1141,7 +1149,6 @@ dl.add-converse-contact {
     width: 70%;
 }
 
-#conversejs #trimmed-chatboxes,
 #conversejs .chatbox,
 #conversejs .chatroom {
     height: 25px;
diff --git a/mockup/minimal.html b/mockup/minimal.html
index 8f11cf773..b3df17698 100644
--- a/mockup/minimal.html
+++ b/mockup/minimal.html
@@ -46,74 +46,72 @@
 
 
     <div id="trimmed-chatboxes">
-        <div class="box-flyout">
-            <div class="minimized-chats">
-                <div class="chat-head chat-head-chatroom">
-                    <a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            <div class="chat-head-message-count" style="display:block">3</div>
-                            Restricted Chatroom
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox">
-                    <a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            <div class="chat-head-message-count" style="display:block">42</div>
-                            JC Brand
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatroom">
-                    <a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            My Chatroom
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            Annegreet Gomez
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            <div class="chat-head-message-count" style="display:block">842</div>
-                            Asmaa Haakman
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            Candice van der Knijff
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat" title="Click to maximize this chat">
-                            Laura Grunewald
-                        </a>
-                    </div>
-                </div>
-                <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
-                    <div class="chat-title">
-                        <a href="#" class="restore-chat">
-                            Lena Grunewald
-                        </a>
-                    </div>
+        <a class="toggle-minimized-chats" href="#">
+            <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
+        </a>
+        <div class="box-flyout minimized-chats">
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">3</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Restricted Chatroom
+                    </a>
                 </div>
             </div>
-            <div href="#" class="toggle-minimized-chats">
-                <span class="conn-feedback">Minimized</span> <span id="online-count">(0)</span>
-                    <a class="icon-close"></a>
+            <div class="chat-head chat-head-chatbox">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">42</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        JC Brand
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatroom">
+                <a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        My Chatroom
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Annegreet Gomez
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox">
+                <a class="close-chatbox-button icon-close"></a>
+                <a class="chat-head-message-count" href="#" style="display:block">842</a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Asmaa Haakman
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Candice van der Knijff
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat" title="Click to maximize this chat">
+                        Laura Grunewald
+                    </a>
+                </div>
+            </div>
+            <div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
+                <div class="chat-title">
+                    <a href="#" class="restore-chat">
+                        Lena Grunewald
+                    </a>
+                </div>
             </div>
         </div>
     </div>