Display status avatars in the occupants list
This commit is contained in:
raphaelSeguin
JC Brand
parent
0082c0ce60
commit
97b8ecbbdf
@ -19,6 +19,7 @@
|
||||
|
||||
- #129: Add support for [XEP-0156: Disovering Alternative XMPP Connection Methods](https://xmpp.org/extensions/xep-0156.html). Only XML is supported for now.
|
||||
- #1105: Support for storing persistent data in IndexedDB
|
||||
- #1322 Display occupants’ avatars in the occupants list
|
||||
- #1640: Add the ability to resize the occupants sidebar in MUCs
|
||||
- #1666: Allow scrolling of the OMEMO fingerprints list
|
||||
- #1691: Fix `collection.chatbox is undefined` errors
|
||||
|
||||
749
package-lock.json
generated
749
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -83,7 +83,7 @@
|
||||
"install": "^0.9.5",
|
||||
"jasmine-core": "2.99.1",
|
||||
"jsdoc": "^3.6.2",
|
||||
"lerna": "^3.18.1",
|
||||
"lerna": "^3.19.0",
|
||||
"lodash-template-webpack-loader": "jcbrand/lodash-template-webpack-loader",
|
||||
"mini-css-extract-plugin": "^0.7.0",
|
||||
"minimist": "^1.2.0",
|
||||
|
||||
@ -21,8 +21,7 @@
|
||||
}
|
||||
|
||||
.set-xmpp-status,
|
||||
.xmpp-status,
|
||||
.roster-contacts {
|
||||
.xmpp-status {
|
||||
.chat-status--online {
|
||||
color: var(--chat-status-online);
|
||||
}
|
||||
|
||||
@ -76,6 +76,39 @@
|
||||
}
|
||||
}
|
||||
|
||||
.current-xmpp-contact {
|
||||
margin: 0.25em 0;
|
||||
|
||||
.chat-status {
|
||||
vertical-align: middle;
|
||||
font-size: 0.6em;
|
||||
margin-right: 0;
|
||||
margin-left: -0.7em;
|
||||
margin-bottom: -1.5em;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--occupants-background-color);
|
||||
}
|
||||
.chat-status--offline {
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
.chat-status--online {
|
||||
color: var(--chat-status-online);
|
||||
}
|
||||
.chat-status--busy {
|
||||
color: var(--chat-status-busy);
|
||||
}
|
||||
.chat-status--away {
|
||||
color: var(--chat-status-away);
|
||||
}
|
||||
.chat-status--offline {
|
||||
display: none;
|
||||
}
|
||||
.far.fa-circle,
|
||||
.fa-times-circle {
|
||||
color: var(--subdued-color);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&.requesting-xmpp-contact {
|
||||
a {
|
||||
@ -117,28 +150,23 @@
|
||||
&.unread-msgs {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
&.contact-name--offline {
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
}
|
||||
&.current-xmpp-contact span {
|
||||
font-size: var(--font-size);
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.odd {
|
||||
background-color: #DCEAC5;
|
||||
/* Make this difference */
|
||||
}
|
||||
a, span {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.span {
|
||||
display: inline-block;
|
||||
}
|
||||
.decline-xmpp-request {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ const u = converse.env.utils;
|
||||
|
||||
converse.plugins.add('converse-rosterview', {
|
||||
|
||||
dependencies: ["converse-roster", "converse-modal"],
|
||||
dependencies: ["converse-roster", "converse-modal", "converse-chatboxviews"],
|
||||
|
||||
initialize () {
|
||||
/* The initialize function gets called as soon as the plugin is
|
||||
@ -326,7 +326,8 @@ converse.plugins.add('converse-rosterview', {
|
||||
}
|
||||
});
|
||||
|
||||
_converse.RosterContactView = Backbone.NativeView.extend({
|
||||
|
||||
_converse.RosterContactView = _converse.ViewWithAvatar.extend({
|
||||
tagName: 'li',
|
||||
className: 'list-item d-flex hidden controlbox-padded',
|
||||
|
||||
@ -398,7 +399,7 @@ converse.plugins.add('converse-rosterview', {
|
||||
this.el.classList.add('pending-xmpp-contact');
|
||||
this.el.innerHTML = tpl_pending_contact(
|
||||
Object.assign(this.model.toJSON(), {
|
||||
'display_name': display_name,
|
||||
display_name,
|
||||
'desc_remove': __('Click to remove %1$s as a contact', display_name),
|
||||
'allow_chat_pending_contacts': _converse.allow_chat_pending_contacts
|
||||
})
|
||||
@ -408,7 +409,7 @@ converse.plugins.add('converse-rosterview', {
|
||||
this.el.classList.add('requesting-xmpp-contact');
|
||||
this.el.innerHTML = tpl_requesting_contact(
|
||||
Object.assign(this.model.toJSON(), {
|
||||
'display_name': display_name,
|
||||
display_name,
|
||||
'desc_accept': __("Click to accept the contact request from %1$s", display_name),
|
||||
'desc_decline': __("Click to decline the contact request from %1$s", display_name),
|
||||
'allow_chat_pending_contacts': _converse.allow_chat_pending_contacts
|
||||
@ -437,29 +438,34 @@ converse.plugins.add('converse-rosterview', {
|
||||
},
|
||||
|
||||
renderRosterItem (item) {
|
||||
let status_icon = 'fa fa-times-circle';
|
||||
const show = item.presence.get('show') || 'offline';
|
||||
let status_icon;
|
||||
if (show === 'online') {
|
||||
status_icon = 'fa fa-circle chat-status chat-status--online';
|
||||
} else if (show === 'away') {
|
||||
status_icon = 'fa fa-circle chat-status chat-status--away';
|
||||
} else if (show === 'xa') {
|
||||
status_icon = 'far fa-circle chat-status';
|
||||
status_icon = 'far fa-circle chat-status chat-status-xa';
|
||||
} else if (show === 'dnd') {
|
||||
status_icon = 'fa fa-minus-circle chat-status chat-status--busy';
|
||||
} else {
|
||||
status_icon = 'fa fa-times-circle chat-status chat-status--offline';
|
||||
}
|
||||
const display_name = item.getDisplayName();
|
||||
this.el.innerHTML = tpl_roster_item(
|
||||
Object.assign(item.toJSON(), {
|
||||
'display_name': display_name,
|
||||
show,
|
||||
display_name,
|
||||
status_icon,
|
||||
'desc_status': STATUSES[show],
|
||||
'status_icon': status_icon,
|
||||
'desc_chat': __('Click to chat with %1$s (JID: %2$s)', display_name, item.get('jid')),
|
||||
'desc_remove': __('Click to remove %1$s as a contact', display_name),
|
||||
'allow_contact_removal': _converse.allow_contact_removal,
|
||||
'num_unread': item.get('num_unread') || 0
|
||||
'num_unread': item.get('num_unread') || 0,
|
||||
classes: ''
|
||||
})
|
||||
);
|
||||
this.renderAvatar();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<a class="list-item-link cbox-list-item open-chat w-100 {[ if (o.num_unread) { ]} unread-msgs {[ } ]}"
|
||||
title="{{{o.desc_chat}}}" href="#">
|
||||
|
||||
<canvas class="avatar" height="30" width="30"></canvas>
|
||||
<span class="{{{o.status_icon}}}" title="{{{o.desc_status}}}"></span>
|
||||
{[ if (o.num_unread) { ]}
|
||||
<span class="msgs-indicator">{{{ o.num_unread }}}</span>
|
||||
{[ } ]}
|
||||
<span class="contact-name {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span></a>
|
||||
{[ if (o.num_unread) { ]} <span class="msgs-indicator">{{{ o.num_unread }}}</span> {[ } ]}
|
||||
<span class="contact-name contact-name--{{{o.show}}} {[ if (o.num_unread) { ]} unread-msgs {[ } ]}">{{{o.display_name}}}</span>
|
||||
</a>
|
||||
{[ if (o.allow_contact_removal) { ]}
|
||||
<a class="list-item-action remove-xmpp-contact far fa-trash-alt" title="{{{o.desc_remove}}}" href="#"></a>
|
||||
{[ } ]}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user