From 8e54aa14017d7fdc496fc61671a33bcf73e1bd5d Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Wed, 11 Mar 2015 17:49:01 -0700
Subject: [PATCH] Plumb contact avatars into conversations

---
 conversation.html              |  2 +-
 js/models/conversations.js     |  4 +++-
 js/models/messages.js          |  8 ++++++++
 js/views/message_view.js       | 14 +++++++++++++-
 stylesheets/_conversation.scss |  4 ++--
 stylesheets/manifest.css       |  8 ++++----
 6 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/conversation.html b/conversation.html
index b02b081efa..063d8d952c 100644
--- a/conversation.html
+++ b/conversation.html
@@ -48,7 +48,7 @@
         </script>
         <script type='text/x-tmpl-mustache' id='message'>
             <div class='sender'>{{ sender }}</div>
-            <img class='avatar' src='{{ contact_avatar }}'>
+            <span class='avatar'></span>
             <div class="bubble">
                 <p class="content">{{ message }}</p>
                 <div class='attachments'></div>
diff --git a/js/models/conversations.js b/js/models/conversations.js
index 2fd7902ea3..817042344f 100644
--- a/js/models/conversations.js
+++ b/js/models/conversations.js
@@ -32,8 +32,10 @@
     },
 
     initialize: function() {
-        this.messageCollection = new Whisper.MessageCollection();
         this.contactCollection = new Whisper.ConversationCollection();
+        this.messageCollection = new Whisper.MessageCollection([], {
+            conversation: this
+        });
     },
 
     validate: function(attributes, options) {
diff --git a/js/models/messages.js b/js/models/messages.js
index 40445e3225..8b6a96269b 100644
--- a/js/models/messages.js
+++ b/js/models/messages.js
@@ -42,6 +42,9 @@
         },
         isIncoming: function() {
             return this.get('type') === 'incoming';
+        },
+        getContact: function() {
+            return this.collection.conversation.contactCollection.get(this.get('source'));
         }
     });
 
@@ -50,6 +53,11 @@
         database   : Whisper.Database,
         storeName  : 'messages',
         comparator : 'received_at',
+        initialize : function(models, options) {
+            if (options) {
+                this.conversation = options.conversation;
+            }
+        },
         destroyAll : function () {
             return Promise.all(this.models.map(function(m) {
                 return new Promise(function(resolve, reject) {
diff --git a/js/views/message_view.js b/js/views/message_view.js
index a39ce787f8..e11f8545f4 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -48,14 +48,26 @@
             return text.replace(/(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi, "$1<a href='$2' target='_blank'>$2</a>");
         },
         render: function() {
+            var contact = this.model.getContact();
             this.$el.html(
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
-                    sender: this.model.get('source')
+                    sender: (contact && contact.getTitle()) || ''
                 })
             );
 
+            var avatar;
+            if (contact && contact.get('avatar')) {
+                avatar = new Whisper.AttachmentView({
+                    model: contact.get('avatar')
+                }).render().el;
+            }
+            else {
+                avatar = $('<img>').attr('src', '/images/default.png');
+            }
+            this.$el.find('.avatar').append(avatar);
+
             twemoji.parse(this.el, { base: '/components/twemoji/', size: 16 });
 
             var content = this.$el.find('.content');
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index 44cecbb48c..2cc2f0a143 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -185,11 +185,11 @@
     }
   }
 
-  .outgoing img.avatar {
+  .outgoing .avatar {
     display: none;
   }
 
-  img.avatar {
+  .avatar img {
     height: 36px;
     width: 36px;
     background: $grey_l;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index db9414df90..6a97e83e2e 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -447,11 +447,11 @@ input.new-message {
   .message-detail .attachments video,
   .message-list .attachments video {
     background: black; }
-  .message-detail .outgoing img.avatar,
-  .message-list .outgoing img.avatar {
+  .message-detail .outgoing .avatar,
+  .message-list .outgoing .avatar {
     display: none; }
-  .message-detail img.avatar,
-  .message-list img.avatar {
+  .message-detail .avatar img,
+  .message-list .avatar img {
     height: 36px;
     width: 36px;
     background: #f3f3f3;