Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

roster: render unread messages in tab upon reload

Browse Source 
Also including css fixes around the unread messages indicator.
This commit is contained in:
JC Brand 2017-06-15 18:38:38 +02:00
parent 336dc7408f
commit be28e04c57
5 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/inverse.css
View File

@ -2036,7 +2036,7 @@ body {
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
max-width: 50%; max-width: 55%;
width: auto; width: auto;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
@ -2405,16 +2405,22 @@ body {
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; } width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
background-color: #E7A151;
opacity: 1; opacity: 1;
border-radius: 10%; border-radius: 10%;
padding: 0 0.2em; padding: 0 0.2em;
font-size: 14px; } font-size: 14px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name { #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0; padding: 0;
margin: 0; margin: 0;
max-width: 80%; max-width: 80%;
float: none; float: none;
height: 30px; } height: 30px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar { #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
float: left; float: left;
display: inline-block; display: inline-block;

2
sass/_controlbox.scss
View File

@ -163,7 +163,7 @@
} }
&.unread-msgs { &.unread-msgs {
.open-room { .open-room {
max-width: 50%; max-width: 55%;
width: auto; width: auto;
font-weight: bold; font-weight: bold;
} }

7
sass/_roster.scss
View File

@ -130,6 +130,7 @@
} }
.msgs-indicator { .msgs-indicator {
background-color: $chat-head-color;
opacity: 1; opacity: 1;
border-radius: 10%; border-radius: 10%;
padding: 0 0.2em; padding: 0 0.2em;
@ -137,11 +138,17 @@
} }
.contact-name { .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0; padding: 0;
margin: 0; margin: 0;
max-width: 80%; max-width: 80%;
float: none; float: none;
height: $roster-item-height; height: $roster-item-height;
&.unread-msgs {
max-width: 60%;
}
} }
.avatar { .avatar {

1
src/converse-controlbox.js
View File

@ -597,6 +597,7 @@
this.parent_el = cfg.$parent[0]; this.parent_el = cfg.$parent[0];
this.tab_el = document.createElement('li'); this.tab_el = document.createElement('li');
_converse.chatboxes.on('change:num_unread', this.renderTab, this); _converse.chatboxes.on('change:num_unread', this.renderTab, this);
_converse.chatboxes.on('add', _.debounce(this.renderTab, 100), this);
}, },
render: function () { render: function () {

2
src/templates/roster_item.html
View File

@ -4,10 +4,10 @@
<div class="avatar avatar-{{{chat_status}}}"> <div class="avatar avatar-{{{chat_status}}}">
<span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span> <span class="status-icon icon-{{{chat_status}}}" title="{{{desc_status}}}"></span>
</div> </div>
<span class="contact-name unread-msgs">{{{fullname}}}</span>
{[ if (num_unread) { ]} {[ if (num_unread) { ]}
<span class="msgs-indicator">{{{ num_unread }}}</span> <span class="msgs-indicator">{{{ num_unread }}}</span>
{[ } ]} {[ } ]}
<span class="contact-name {[ if (num_unread) { ]} unread-msgs {[ } ]}">{{{fullname}}}</span>
</a> </a>
{[ if (allow_contact_removal) { ]} {[ if (allow_contact_removal) { ]}
<a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a> <a class="remove-xmpp-contact icon-remove" title="{{{desc_remove}}}" href="#"></a>