Jelajahi Sumber

Minor improvements on the minimized chat toggle.

JC Brand 7 tahun lalu
induk
melakukan
5a9fd6c28d
5 mengubah file dengan 52 tambahan dan 48 penghapusan
  1. 17 13
      css/converse.css
  2. 0 12
      css/inverse.css
  3. 13 8
      mockup/converse.html
  4. 0 14
      sass/_core.scss
  5. 22 1
      sass/converse/_minimized_chats.scss

+ 17 - 13
css/converse.css

@@ -5035,18 +5035,6 @@
     display: block;
     text-align: center;
     width: 100%; }
-  #converse-embedded-chat a.restore-chat,
-  #conversejs a.restore-chat {
-    padding: 1px 0 1px 5px;
-    color: white;
-    line-height: 15px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
-  #converse-embedded-chat a.restore-chat:visited,
-  #conversejs a.restore-chat:visited {
-    color: white; }
   #converse-embedded-chat .activated,
   #conversejs .activated {
     display: block !important; }
@@ -6522,8 +6510,24 @@
     border-top-right-radius: 4px;
     background-color: #578EA9;
     border: 1px solid white;
-    padding: 10px 0 0 0;
+    padding: 0.5em 0;
     text-align: center;
+    color: white;
+    white-space: nowrap;
+    overflow-y: hidden;
+    text-overflow: ellipsis;
+    display: block; }
+  #conversejs:not(.fullscreen) #minimized-chats a.restore-chat {
+    padding: 1px 0 1px 5px;
+    color: white;
+    line-height: 15px;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; }
+    #conversejs:not(.fullscreen) #minimized-chats a.restore-chat:hover {
+      text-decoration: none; }
+  #conversejs:not(.fullscreen) #minimized-chats a.restore-chat:visited {
     color: white; }
   #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout {
     flex-direction: column-reverse;

+ 0 - 12
css/inverse.css

@@ -5035,18 +5035,6 @@
     display: block;
     text-align: center;
     width: 100%; }
-  #converse-embedded-chat a.restore-chat,
-  #conversejs a.restore-chat {
-    padding: 1px 0 1px 5px;
-    color: white;
-    line-height: 15px;
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap; }
-  #converse-embedded-chat a.restore-chat:visited,
-  #conversejs a.restore-chat:visited {
-    color: white; }
   #converse-embedded-chat .activated,
   #conversejs .activated {
     display: block !important; }

+ 13 - 8
mockup/converse.html

@@ -219,17 +219,20 @@
             <div id="minimized-chats" class="col col-1 w-100">
                 <div class="flyout minimized-chats-flyout row">
                     <a id="toggle-minimized-chats" href="#" class="row no-gutters">
-                        <span class="badge badge-light">322</span>
-                        <div class="col"> Minimized</div>
+                        <span class="badge badge-light">322</span> Minimized
                     </a>
                     <div class="chat-head chat-head-chatroom row no-gutters">
-                        <span class="badge badge-light">42</span>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Restricted Chatroom</a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
+                            <span class="badge badge-light">42</span>
+                            Restricted Chatroom
+                        </a>
                         <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <span class="badge badge-light">4</span>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">JC Brand</a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
+                            <span class="badge badge-light">4</span>
+                            JC Brand
+                        </a>
                         <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatroom row no-gutters">
@@ -241,8 +244,10 @@
                         <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">
-                        <span class="badge badge-light">842</span>
-                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">Asmaa Haakman</a>
+                        <a href="#" class="restore-chat w-100 align-self-center" title="Click to maximize this chat">
+                            <span class="badge badge-light">842</span>
+                            Asmaa Haakman
+                        </a>
                         <a class="chatbox-btn close-chatbox-button fa fa-times col col-1"></a>
                     </div>
                     <div class="chat-head chat-head-chatbox row no-gutters">

+ 0 - 14
sass/_core.scss

@@ -245,20 +245,6 @@
         width: 100%;
     }
 
-    a.restore-chat {
-        padding: 1px 0 1px 5px;
-        color: $chat-head-text-color;
-        line-height: 15px;
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    a.restore-chat:visited {
-        color: $chat-head-text-color;
-    }
-
     .activated {
         display: block !important;
     }

+ 22 - 1
sass/converse/_minimized_chats.scss

@@ -17,9 +17,30 @@
             border-top-right-radius: $chatbox-border-radius;
             background-color: $link-color;
             border: 1px solid white;
-            padding: 10px 0 0 0;
+            padding: 0.5em 0;
             text-align: center;
             color: white;
+            white-space: nowrap;
+            overflow-y: hidden;
+            text-overflow: ellipsis;
+            display: block;
+        }
+
+        a.restore-chat {
+            padding: 1px 0 1px 5px;
+            color: $chat-head-text-color;
+            line-height: 15px;
+            display: block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
+        a.restore-chat:visited {
+            color: $chat-head-text-color;
         }
 
         .minimized-chats-flyout {