Fixes #1288

Add CSS classes to differentiate between incoming and outgoing messages

CHANGES.md

@@ -12,6 +12,7 @@
 - #1188 Feature request: drag and drop file to HTTP Upload
 - #1268 Switch from SASS variables to CSS custom properties
 - #1278 Replace the default avatar with a SVG version
+- #1288 Add CSS classes to differentiate between incoming and outgoing messages
 - #1305 added value 'all' for 'show_desktop_notifications' to notifiy even if converse.js is open
 - #1306 added option `notification_delay`
 - #1312 Error `unrecognized expression` in Safari

dist/converse.js

@@ -102627,25 +102627,27 @@ __e(o.isodate) +
 __e(o.pretty_time) +
 '</time>';
  } ;
-__p += '\n            <span class="chat-msg__author">';
+__p += '\n            <span class="chat-msg__author chat-msg__' +
+__e(o.sender) +
+'">';
  if (o.is_me_message) { ;
 __p += '**';
  }; ;
 __p +=
 __e(o.username) +
 '</span>\n            ';
+ if (!o.is_me_message) { ;
+__p += '\n                ';
 o.roles.forEach(function (role) { ;
 __p += ' <span class="badge badge-secondary">' +
 __e(role) +
 '</span> ';
  }); ;
-__p += '\n            ';
- if (!o.is_me_message) { ;
-__p += '<time timestamp="' +
+__p += '\n                <time timestamp="' +
 __e(o.isodate) +
 '" class="chat-msg__time">' +
 __e(o.pretty_time) +
-'</time>';
+'</time>\n            ';
  } ;
 __p += '\n            ';
  if (o.is_encrypted) { ;

src/templates/message.html

@@ -6,7 +6,7 @@
     <div class="chat-msg__content {[ if (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">{[ if (o.is_me_message) { ]}**{[ }; ]}{{{o.username}}}</span>
+            <span class="chat-msg__author chat-msg__{{{o.sender}}}">{[ 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>