Adds blue badges to contact list and chat.

This commit is contained in:
yanas 2016-09-19 21:22:41 -05:00
parent a07858cc72
commit 2919a60403
6 changed files with 51 additions and 16 deletions

View File

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

View File

@ -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.
*/

View File

@ -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);

View File

@ -121,11 +121,15 @@
</ul>
</span>
<a class="button icon-contactList" id="toolbar_contact_list" shortcut="contactlistpopover">
<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 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>

View File

@ -45,6 +45,8 @@ function updateVisualNotification() {
else {
unreadMsgElement.innerHTML = '';
}
$(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide']();
}
@ -196,6 +198,7 @@ var Chat = {
});
addSmileys();
updateVisualNotification();
},
/**

View File

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