Display status avatars in the occupants list

CHANGES.md

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

package.json

@@ -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",

sass/_controlbox.scss

@@ -21,8 +21,7 @@
     }
 
     .set-xmpp-status,
-    .xmpp-status,
-    .roster-contacts {
+    .xmpp-status {
         .chat-status--online {
             color: var(--chat-status-online);
         }

sass/_roster.scss

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

src/converse-rosterview.js

@@ -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;
             },
 

src/templates/roster_item.html

 <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>
 {[ } ]}