Add role and affiliation classes to message DOM element

spec/messages.js

@@ -2381,7 +2381,7 @@
             expect(view.model.messages.last().occupant.get('affiliation')).toBe('owner');
             expect(view.model.messages.last().occupant.get('role')).toBe('moderator');
             expect(view.el.querySelectorAll('.chat-msg').length).toBe(1);
-            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
+            expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat moderator owner');
 
             let presence = $pres({
                     to:'romeo@montague.lit/orchard',
@@ -2408,7 +2408,7 @@
             expect(view.model.messages.last().occupant.get('affiliation')).toBe('member');
             expect(view.model.messages.last().occupant.get('role')).toBe('participant');
             expect(view.el.querySelectorAll('.chat-msg').length).toBe(2);
-            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author participant');
+            expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat participant member');
 
             presence = $pres({
                     to:'romeo@montague.lit/orchard',
@@ -2429,7 +2429,7 @@
             expect(view.model.messages.last().occupant.get('affiliation')).toBe('owner');
             expect(view.model.messages.last().occupant.get('role')).toBe('moderator');
             expect(view.el.querySelectorAll('.chat-msg').length).toBe(3);
-            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
+            expect(sizzle('.chat-msg', view.el).pop().classList.value.trim()).toBe('message chat-msg groupchat moderator owner');
             done();
         }));
 

src/converse-message-view.js

@@ -335,8 +335,12 @@ converse.plugins.add('converse-message-view', {
 
             getExtraMessageClasses () {
                 let extra_classes = this.model.get('is_delayed') && 'delayed' || '';
-                if (this.model.get('type') === 'groupchat' && this.model.get('sender') === 'them') {
-                    if (this.model.collection.chatbox.isUserMentioned(this.model)) {
+
+                if (this.model.get('type') === 'groupchat') {
+                    if (this.model.occupant) {
+                        extra_classes += ` ${this.model.occupant.get('role') || ''} ${this.model.occupant.get('affiliation') || ''}`;
+                    }
+                    if (this.model.get('sender') === 'them' && this.model.collection.chatbox.isUserMentioned(this.model)) {
                         // Add special class to mark groupchat messages
                         // in which we are mentioned.
                         extra_classes += ' mentioned';

src/headless/converse-muc.js

@@ -1866,13 +1866,13 @@ converse.plugins.add('converse-muc', {
 
             async fetchMembers () {
                 const new_members = await this.chatroom.getJidsWithAffiliations(['member', 'owner', 'admin']);
-                const new_jids = new_members.map(m => m.jid).filter(m => !_.isUndefined(m)),
-                      new_nicks = new_members.map(m => !m.jid && m.nick || undefined).filter(m => !_.isUndefined(m)),
-                      removed_members = this.filter(m => {
-                          return ['admin', 'member', 'owner'].includes(m.get('affiliation')) &&
-                                !new_nicks.includes(m.get('nick')) &&
-                                !new_jids.includes(m.get('jid'));
-                      });
+                const new_jids = new_members.map(m => m.jid).filter(m => !_.isUndefined(m));
+                const new_nicks = new_members.map(m => !m.jid && m.nick || undefined).filter(m => !_.isUndefined(m));
+                const removed_members = this.filter(m => {
+                        return ['admin', 'member', 'owner'].includes(m.get('affiliation')) &&
+                            !new_nicks.includes(m.get('nick')) &&
+                            !new_jids.includes(m.get('jid'));
+                    });
 
                 removed_members.forEach(occupant => {
                     if (occupant.get('jid') === _converse.bare_jid) { return; }

src/templates/message.html

@@ -1,4 +1,4 @@
-<div class="message chat-msg {{{o.type}}} {[ if (o.is_me_message) { ]} chat-msg--action {[ } ]} {{{o.extra_classes}}}"
+<div class="message chat-msg {{{o.type}}}{[ if (o.is_me_message) { ]} chat-msg--action {[ } ]}{{{o.extra_classes}}}"
         data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}" data-from="{{{o.from}}}" data-encrypted="{{{o.is_encrypted}}}">
     {[ if (o.type !== 'headline' && !o.is_me_message) { ]}
     <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
@@ -6,7 +6,7 @@
     <div class="chat-msg__content chat-msg__content--{{{o.sender}}} {{{o.is_me_message ? 'chat-msg__content--action' : ''}}}">
         <span class="chat-msg__heading">
             {[ if (o.is_me_message) { ]}<time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>{[ } ]}
-            <span class="chat-msg__author {{{o.is_groupchat_message && o.occupant && o.occupant.get('role') ? o.occupant.get('role') : ''}}}">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
+            <span class="chat-msg__author">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
             {[ if (!o.is_me_message) { ]}
                 {[o.roles.forEach(function (role) { ]} <span class="badge badge-secondary">{{{role}}}</span> {[ }); ]}
                 <time timestamp="{{{o.isodate}}}" class="chat-msg__time">{{{o.pretty_time}}}</time>
@@ -14,7 +14,6 @@
             {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
         </span>
         <div class="chat-msg__body chat-msg__body--{{{o.type}}} {{{o.received ? 'chat-msg__body--received' : '' }}} {{{o.is_delayed ? 'chat-msg__body--delayed' : '' }}}">
-
             <div class="chat-msg__message">
                 {[ if (o.is_spoiler) { ]}
                     <div class="chat-msg__spoiler-hint">