Adds blue badges to contact list and chat.
This commit is contained in:
parent
a07858cc72
commit
2919a60403
|
@ -104,11 +104,6 @@
|
|||
color: #a7a7a7;
|
||||
}
|
||||
|
||||
#unreadMessages {
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#chat_container .username {
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
|
|
|
@ -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.
|
||||
*/
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -45,6 +45,8 @@ function updateVisualNotification() {
|
|||
else {
|
||||
unreadMsgElement.innerHTML = '';
|
||||
}
|
||||
|
||||
$(unreadMsgElement).parent()[unreadMessages > 0 ? 'show' : 'hide']();
|
||||
}
|
||||
|
||||
|
||||
|
@ -196,6 +198,7 @@ var Chat = {
|
|||
});
|
||||
|
||||
addSmileys();
|
||||
updateVisualNotification();
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue