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 @@
-
+
+
+
-
+
+
+
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(