From 16dc7abe69dc92b5418583f62b1f07c68b8ee902 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 9 Nov 2015 12:07:40 -0800
Subject: [PATCH] Display unreadCount badges in conversation list

// FREEBIE
---
 background.html                         |  3 +++
 js/views/conversation_list_item_view.js |  3 ++-
 stylesheets/_global.scss                | 16 ++++++++++++++++
 stylesheets/_variables.scss             |  2 ++
 stylesheets/manifest.css                | 14 ++++++++++++++
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/background.html b/background.html
index 6b14f3db2..e92c5f486 100644
--- a/background.html
+++ b/background.html
@@ -124,6 +124,9 @@
       <div class='contact-details'>
           <span class='last-timestamp'> {{ last_message_timestamp }} </span>
           {{> contact_name_and_number }}
+          {{ #unreadCount }}
+            <span class='unread-count'>{{ unreadCount }}</span>
+          {{ /unreadCount }}
           <p class='last-message'> {{ last_message }} </p>
       </div>
   </script>
diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js
index c501625c5..c7c49bc46 100644
--- a/js/views/conversation_list_item_view.js
+++ b/js/views/conversation_list_item_view.js
@@ -38,7 +38,8 @@
                     last_message: this.model.get('lastMessage'),
                     last_message_timestamp: moment(this.model.get('timestamp')).format('MMM D'),
                     number: this.model.getNumber(),
-                    avatar: this.model.getAvatar()
+                    avatar: this.model.getAvatar(),
+                    unreadCount: this.model.get('unreadCount')
                 }, this.render_partials())
             );
 
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 3de1b2890..f00ef74dd 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -267,6 +267,22 @@ $avatar-size: 44px;
   .number {
     display: none;
   }
+
+  .unread-count {
+    float: right;
+    margin: 3px 10px 0 20px;
+    display: inline-block;
+    width: $unread-badge-size;
+    height: $unread-badge-size;
+    line-height: $unread-badge-size;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 5px;
+    background-color: $blue;
+    color: white;
+    border: solid 1px rgba(255,255,255,0.6);
+  }
 }
 .contact {
   position: relative;
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index d34d0b5e8..3b2b40c3a 100644
--- a/stylesheets/_variables.scss
+++ b/stylesheets/_variables.scss
@@ -29,3 +29,5 @@ $roboto-light: Roboto-Light, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 $header-height: 36px;
 $header-color: $blue;
 $bubble-border-radius: 20px;
+
+$unread-badge-size: 21px;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index ed7d4c8bc..3088a0573 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -220,6 +220,20 @@ img.emoji {
     background: #f8f8f8; }
   .conversation-list-item .number {
     display: none; }
+  .conversation-list-item .unread-count {
+    float: right;
+    margin: 3px 10px 0 20px;
+    display: inline-block;
+    width: 21px;
+    height: 21px;
+    line-height: 21px;
+    font-size: 12px;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 5px;
+    background-color: #2090ea;
+    color: white;
+    border: solid 1px rgba(255, 255, 255, 0.6); }
 
 .contact {
   position: relative;