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(