From f860278b894622b138589eca9203635a0782a9cf Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 9 Nov 2015 11:29:51 -0800
Subject: [PATCH] Add avatars to conversation headers

So as not to look repetitive, hide the per-message avatars in one-on-one
conversations.

// FREEBIE
---
 background.html                | 1 +
 js/views/conversation_view.js  | 5 +++--
 stylesheets/_conversation.scss | 3 ++-
 stylesheets/_index.scss        | 7 +++++++
 stylesheets/manifest.css       | 9 ++++++++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/background.html b/background.html
index c323c65f..6b14f3db 100644
--- a/background.html
+++ b/background.html
@@ -42,6 +42,7 @@
                 <li><a class='destroy'>Delete messages</a></li>
             </ul>
           </div>
+          {{> avatar }}
           <span class='conversation-title'>{{ title }}</span>
       </div>
 
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index b1eb29a5..443142da 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -17,7 +17,8 @@
         render_attributes: function() {
             return {
                 group: this.model.get('type') === 'group',
-                title: this.model.getTitle()
+                title: this.model.getTitle(),
+                avatar: this.model.getAvatar()
             };
         },
         initialize: function(options) {
@@ -246,7 +247,7 @@
             $discussionContainer.outerHeight(
                     this.$el.outerHeight() -
                     $bottomBarNewHeight -
-                    $conversationHeader.outerHeight() - 20);
+                    $conversationHeader.outerHeight() - 40);
 
             this.view.scrollToBottomIfNeeded();
         },
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index ce250d14..937ce701 100644
--- a/stylesheets/_conversation.scss
+++ b/stylesheets/_conversation.scss
@@ -1,7 +1,7 @@
 .conversation {
   background-color: #ffffff;
   margin: 10px;
-  padding: 10px;
+  padding: 20px;
   border-radius: 10px;
 
   .panel {
@@ -176,6 +176,7 @@
   .container { height: calc(100% - #{$header-height} - 85px); }
 }
 
+.private .entry .avatar,
 .private .sender,
 .outgoing .sender {
   display: none;
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 1f6ae296..4d6a0322 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -67,6 +67,13 @@
 .conversation-header {
   border-bottom: solid 1px darken($grey_l, 10%);
   margin-bottom: 4px;
+  .avatar {
+    float: left;
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    font-size: x-large;
+  }
 }
 .menu.conversation-menu {
   button.drop-down {
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index b2aeb889..ed7d4c8b 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -454,6 +454,12 @@ img.emoji {
 .conversation-header {
   border-bottom: solid 1px #d9d9d9;
   margin-bottom: 4px; }
+  .conversation-header .avatar {
+    float: left;
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    font-size: x-large; }
 
 .menu.conversation-menu button.drop-down {
   background: url("/images/arrow_drop_down.png") no-repeat center; }
@@ -539,7 +545,7 @@ input.search {
 .conversation {
   background-color: #ffffff;
   margin: 10px;
-  padding: 10px;
+  padding: 20px;
   border-radius: 10px; }
   .conversation .panel {
     height: 100%; }
@@ -661,6 +667,7 @@ input.search {
 .new-group-update .container {
   height: calc(100% - 36px - 85px); }
 
+.private .entry .avatar,
 .private .sender,
 .outgoing .sender {
   display: none; }