Merge pull request #892 from m-voloshin/blue-badges

Blue badges

css/_chat.scss

@@ -104,11 +104,6 @@
     color: #a7a7a7;
 }
 
-#unreadMessages {
-    font-size: 8px;
-    position: absolute;
-}
-
 #chat_container .username {
     float: left;
     padding-left: 5px;

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,36 @@ 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;
+    // Do not inherit the font-family from the toolbar button, because it's an
+    // icon style.
+    font-family: $baseFontFamily;
+}
+
+/**
+ * Toolbar specific round badge.
+ */
+.toolbar .badge-round {
+    position: absolute;
+    right: 9px;
+    bottom: 9px;
+}
+
 /**
  * START of slide in animation for extended toolbar.
  */

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);
@@ -38,7 +41,7 @@ $buttonBackground: #44A5FF;
 
 // Video layout.
 $videoThumbnailHovered: #44A5FF;
-$videoThumbnailSelected: #165ecc;
+$videoThumbnailSelected: #165ECC;
 $participantNameColor: #fff;
 $thumbnailPictogramColor: #fff;
 $dominantSpeakerBg: #165ecc;

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>

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();
     },
 
     /**

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(