From 7e24019568418a962c4c18fd91c1cc1f9c8c9f50 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Thu, 15 Nov 2018 10:25:35 +0100
Subject: [PATCH] Fixes #1288

Add CSS classes to differentiate between incoming and outgoing messages
---
 CHANGES.md                 |  1 +
 dist/converse.js           | 12 +++++++-----
 src/templates/message.html |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 0ae78aa69..b0b8108da 100644
--- a/CHANGES.md
+++ b/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
diff --git a/dist/converse.js b/dist/converse.js
index 07950eeab..dcf4df804 100644
--- a/dist/converse.js
+++ b/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) { ;
diff --git a/src/templates/message.html b/src/templates/message.html
index 628227ca6..4a789eef2 100644
--- a/src/templates/message.html
+++ b/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>