From 19dac1f3dfee871c0ae9295cad5452bf79c4d3f1 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 22 Oct 2014 16:14:18 -0700
Subject: [PATCH] Decorate incoming group messages

with numbers and image placeholders, so you know who's saying what.
---
 index.html               |  2 ++
 js/views/message_view.js |  3 ++-
 stylesheets/index.css    | 20 ++++++++++++++++++++
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6b286fc62328..f96073ef3170 100644
--- a/index.html
+++ b/index.html
@@ -52,6 +52,8 @@
             </div>
         </script>
         <script type='text/x-tmpl-mustache' id='message'>
+            <div class='sender'>{{ sender }}</div>
+            <img class='avatar' src='{{ contact_avatar }}'>
             <div class='bubble bubble_context {{ bubble_class }}'>
             <ul class='volley'>
                 <li class='message'>
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 1d5a4f7a830a..6595c0f63dca 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -24,7 +24,8 @@ var Whisper = Whisper || {};
           message: this.model.get('body'),
           date: this.formatTimestamp(),
           attachments: this.model.get('attachments'),
-          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming'
+          bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
+          sender: this.model.thread().get('type') === 'group' ? this.model.get('person') : ''
         })
       );
 
diff --git a/stylesheets/index.css b/stylesheets/index.css
index 7b0ebf3a390f..c462deeca9d9 100644
--- a/stylesheets/index.css
+++ b/stylesheets/index.css
@@ -36,3 +36,23 @@ ul.discussion {
 .conversation .bootstrap-tagsinput {
   max-width: 40%;
 }
+
+li.entry .sender {
+  font-size: 0.75em;
+  opacity: 0.54;
+}
+
+li.entry .avatar {
+  height:32px;
+  width:32px;
+  border-radius:32px;
+  cursor:pointer;
+  display:inline-block;
+  float:left;
+  clear:both;
+  background-color:whitesmoke;
+}
+
+li.entry.outgoing .avatar {
+  display: none;
+}