From 2919a60403981336b5df8c8ce76f960477dba419 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Mon, 19 Sep 2016 21:22:41 -0500
Subject: [PATCH] Adds blue badges to contact list and chat.

---
 css/_chat.scss                                |  5 ---
 css/_toolbars.scss                            | 44 +++++++++++++++----
 css/_variables.scss                           |  3 ++
 index.html                                    |  8 +++-
 modules/UI/side_pannels/chat/Chat.js          |  3 ++
 .../side_pannels/contactlist/ContactList.js   |  4 +-
 6 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/css/_chat.scss b/css/_chat.scss
index 888f41ac2..0a37e59c2 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -104,11 +104,6 @@
     color: #a7a7a7;
 }
 
-#unreadMessages {
-    font-size: 8px;
-    position: absolute;
-}
-
 #chat_container .username {
     float: left;
     padding-left: 5px;
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 23489bb73..eca733a16 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -83,14 +83,6 @@
     display: none;
 }
 
-#numberOfParticipants {
-  position: absolute;
-  top: 5px;
-  line-height: 13px;
-  font-weight: bold;
-  font-size: 11px;
-}
-
 #mainToolbar a.button:last-child::after {
     content: none;
 }
@@ -149,6 +141,42 @@ a.button>#avatar {
     margin-top: auto;
 }
 
+/**
+ * Round badge.
+ */
+.badge-round {
+    background-color: $toolbarBadgeBackground;
+    color: $toolbarBadgeColor;
+    font-size: 9px;
+    line-height: 13px;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 50%;
+    min-width: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    vertical-align: middle;
+}
+
+/**
+ * Badge-round element text span.
+ */
+.badge-round>span {
+    display: inline-block;
+    line-height: 11px;
+    padding: 0 0 2px 0;
+}
+
+/**
+ * Toolbar specific round badge.
+ */
+.toolbar .badge-round {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+}
+
 /**
  * START of slide in animation for extended toolbar.
  */
diff --git a/css/_variables.scss b/css/_variables.scss
index c51afb354..719c410fe 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -29,6 +29,9 @@ $tooltipBg: rgba(0,0,0, 0.7);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarButtonToggled: #44A5FF;
 
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+
 // Main controls
 $inputBackground: rgba(132, 132, 132, .5);
 $inputSemiBackground: rgba(132, 132, 132, .8);
diff --git a/index.html b/index.html
index 082c3aa48..e2023c0af 100644
--- a/index.html
+++ b/index.html
@@ -121,11 +121,15 @@
                 </ul>
             </span>
             <a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
-                <span id="numberOfParticipants"></span>
+                <span class="badge-round">
+                    <span id="numberOfParticipants"></span>
+                </span>
             </a>
             <!--a class="button icon-link" id="toolbar_button_link"></a-->
             <a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
-                <span id="unreadMessages"></span>
+                <span class="badge-round">
+                    <span id="unreadMessages"></span>
+                </span>
             </a>
             <a class="button" id="toolbar_button_record" style="display: none"></a>
             <a class="button icon-security" id="toolbar_button_security"></a>
diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js
index 605070b41..6e976a818 100644
--- a/modules/UI/side_pannels/chat/Chat.js
+++ b/modules/UI/side_pannels/chat/Chat.js
@@ -45,6 +45,8 @@ function updateVisualNotification() {
     else {
         unreadMsgElement.innerHTML = '';
     }
+
+    $(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide']();
 }
 
 
@@ -196,6 +198,7 @@ var Chat = {
             });
 
         addSmileys();
+        updateVisualNotification();
     },
 
     /**
diff --git a/modules/UI/side_pannels/contactlist/ContactList.js b/modules/UI/side_pannels/contactlist/ContactList.js
index e9577ef89..c114706bb 100644
--- a/modules/UI/side_pannels/contactlist/ContactList.js
+++ b/modules/UI/side_pannels/contactlist/ContactList.js
@@ -21,7 +21,9 @@ function updateNumberOfParticipants(delta) {
     }
 
     let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
-    $("#numberOfParticipants").text(buttonIndicatorText);
+    $("#numberOfParticipants")
+        .text(buttonIndicatorText)
+        .parent()[numberOfContacts > 1 ? 'show' : 'hide']();
 
     $("#contacts_container>div.title").text(
         APP.translation.translateString(