Display unreadCount badges in conversation list

// FREEBIE

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>

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())
             );
 

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;

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;

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;