Message display improvements

* Checkmark and edit modal button are now on the right
* Instead of showing checkmarks for MUC messages,
  we now show them as light grey before MUC reflection
* Simplify message markup by requiring less `if` statements

sass/_messages.scss

@@ -130,7 +130,21 @@
                 margin-left: 0.5rem;
                 width: calc(100% - var(--message-avatar-width));
             }
+
+            .chat-msg__content--me {
+                .chat-msg__body--groupchat {
+                    .chat-msg__text {
+                        color: var(--subdued-color);
+                    }
+                    &.chat-msg__body--delayed .chat-msg__text,
+                    &.chat-msg__body--received .chat-msg__text {
+                        color: var(--message-text-color);
+                    }
+                }
+            }
+
             .chat-msg__content--action {
+                width: 100%;
                 margin-left: 0;
             }
 
@@ -164,8 +178,8 @@
             }
 
             .chat-msg__text {
-                padding: 0;
                 color: var(--message-text-color);
+                padding: 0;
                 width: 100%;
                 white-space: pre-wrap;
                 a {
@@ -255,7 +269,7 @@
             }
             &.chat-msg--action {
                 .chat-msg__content {
-                    flex-wrap: wrap;
+                    flex-wrap: nowrap;
                     flex-direction: row;
                     justify-content: flex-start;
                 }
@@ -286,6 +300,7 @@
                 }
                 .chat-msg__content {
                     margin-left: 2.75rem;
+                    width: 100%;
                 }
             }
 

spec/messages.js

@@ -2301,7 +2301,7 @@
             expect(view.model.messages.last().get('affiliation')).toBe('owner');
             expect(view.model.messages.last().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 chat-msg__me moderator');
+            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
 
             let presence = $pres({
                     to:'romeo@montague.lit/orchard',
@@ -2328,7 +2328,7 @@
             expect(view.model.messages.last().get('affiliation')).toBe('member');
             expect(view.model.messages.last().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 chat-msg__me participant');
+            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author participant');
 
             presence = $pres({
                     to:'romeo@montague.lit/orchard',
@@ -2348,7 +2348,7 @@
             expect(view.model.messages.last().get('affiliation')).toBe('owner');
             expect(view.model.messages.last().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 chat-msg__me moderator');
+            expect(sizzle('.chat-msg__author', view.el).pop().classList.value.trim()).toBe('chat-msg__author moderator');
             done();
         }));
 
@@ -2562,21 +2562,24 @@
                 keyCode: 13 // Enter
             });
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
+            expect(view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length).toBe(0);
+
             const msg_obj = view.model.messages.at(0);
             const stanza = u.toStanza(`
                 <message xmlns="jabber:client"
                          from="${msg_obj.get('from')}"
                          to="${_converse.connection.jid}"
                          type="groupchat">
-                    <body>${msg_obj.get('message')}</body>
+                    <msg_body>${msg_obj.get('message')}</msg_body>
                     <stanza-id xmlns="urn:xmpp:sid:0"
                                id="5f3dbc5e-e1d3-4077-a492-693f3769c7ad"
                                by="lounge@montague.lit"/>
                     <origin-id xmlns="urn:xmpp:sid:0" id="${msg_obj.get('origin_id')}"/>
                 </message>`);
             await view.model.onMessage(stanza);
-            await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-msg__receipt').length, 500);
+            await test_utils.waitUntil(() => view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length, 500);
-            expect(view.el.querySelectorAll('.chat-msg__receipt').length).toBe(1);
+            expect(view.el.querySelectorAll('.chat-msg__receipt').length).toBe(0);
+            expect(view.el.querySelectorAll('.chat-msg__body.chat-msg__body--received').length).toBe(1);
             expect(view.model.messages.length).toBe(1);
 
             const message = view.model.messages.at(0);

src/converse-message-view.js

@@ -164,6 +164,7 @@ converse.plugins.add('converse-message-view', {
                     Object.assign(
                         this.model.toJSON(), {
                         '__': __,
+                        'is_groupchat_message': this.model.get('type') === 'groupchat',
                         'is_me_message': is_me_message,
                         'roles': roles,
                         'pretty_time': time.format(_converse.time_format),

src/headless/converse-chatboxes.js

@@ -397,7 +397,7 @@ converse.plugins.add('converse-chatboxes', {
                 // Overridden in converse-muc and converse-mam
                 const attrs = this.getUpdatedMessageAttributes(message, stanza);
                 if (attrs) {
-                    message.save(attrs, {'patch': true});
+                    message.save(attrs);
                 }
             },
 

src/headless/converse-muc.js

@@ -1308,9 +1308,8 @@ converse.plugins.add('converse-muc', {
              */
             async onMessage (stanza) {
                 this.fetchFeaturesIfConfigurationChanged(stanza);
-
+                const original_stanza = stanza;
-                const original_stanza = stanza,
+                const forwarded = sizzle(`forwarded[xmlns="${Strophe.NS.FORWARD}"]`, stanza).pop();
-                      forwarded = sizzle(`forwarded[xmlns="${Strophe.NS.FORWARD}"]`, stanza).pop();
                 if (forwarded) {
                     stanza = forwarded.querySelector('message');
                 }

src/templates/message.html

@@ -3,20 +3,19 @@
     {[ if (o.type !== 'headline' && !o.is_me_message) { ]}
     <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
     {[ } ]}
-    <div class="chat-msg__content {[ if (o.is_me_message) { ]}chat-msg__content--action{[ } ]}">
+    <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 chat-msg__{{{o.sender}}} {{{o.type === 'groupchat' && o.role ? o.role : ''}}}">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
+            <span class="chat-msg__author {{{o.is_groupchat_message && o.role ? o.role : ''}}}">{[ 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>
             {[ } ]}
             {[ if (o.is_encrypted) { ]}<span class="fa fa-lock"></span>{[ } ]}
         </span>
-        {[ if (!o.is_me_message) { ]}<div class="chat-msg__body">{[ } ]}
+        <div class="chat-msg__body chat-msg__body--{{{o.type}}} {{{o.received ? 'chat-msg__body--received' : '' }}} {{{o.is_delayed ? 'chat-msg__body--delayed' : '' }}}">
-            {[ if (o.received && !o.is_me_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
+
-            {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
+            <div class="chat-msg__message">
-            {[ if (!o.is_me_message) { ]}<div class="chat-msg__message">{[ } ]}
                 {[ if (o.is_spoiler) { ]}
                     <div class="chat-msg__spoiler-hint">
                         <span class="spoiler-hint">{{{o.spoiler_hint}}}</span>
@@ -30,13 +29,14 @@
                     {[ if (o.is_single_emoji) { ]} chat-msg__text--larger{[ } ]}
                     {[ if (o.is_spoiler) { ]} spoiler collapsed{[ } ]}"><!-- message gets added here via renderMessage --></div>
                 <div class="chat-msg__media"></div>
-            {[ if (!o.is_me_message) { ]}</div>{[ } ]}
-            {[ if (o.type !== 'headline' && !o.is_me_message && o.sender === 'me') { ]}
-            <div class="chat-msg__actions">
-                <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
             </div>
+            {[ if (o.received && !o.is_me_message && !o.is_groupchat_message) { ]} <span class="fa fa-check chat-msg__receipt"></span> {[ } ]}
+            {[ if (o.edited) { ]} <i title="{{{o.__('This message has been edited')}}}" class="fa fa-edit chat-msg__edit-modal"></i> {[ } ]}
+            {[ if (o.type !== 'headline' && o.sender === 'me') { ]}
+                <div class="chat-msg__actions">
+                    <button class="chat-msg__action chat-msg__action-edit fa fa-pencil-alt" title="{{{o.__('Edit this message')}}}"></button>
+                </div>
             {[ } ]}
-
+        </div>
-        {[ if (!o.is_me_message) { ]}</div>{[ } ]}
     </div>
 </div>