threads notification

app/styles/threads.scss

@@ -45,11 +45,25 @@ threads {
         .avatar {
           width           : $avatar-diameter;
           height          : $avatar-diameter;
-          background-color: green;
+          background-color: #eee;
           border-radius   : $avatar-diameter;
           position        : absolute;
         }
 
+        .notification {
+          position: absolute;
+          margin-left: $avatar-diameter - 10px;
+          margin-top: -4px;
+          padding: 2px 4px;
+          text-align: center;
+          display: inline-block;
+          line-height: 14px;
+          background-color: red;
+          border-radius: 10px;
+          font-size: 12px;
+          color: white;
+        }
+
         .message {
           overflow   : hidden;
           margin-left: $avatar-diameter + 6px;

app/views/threads.directive.jade

@@ -9,6 +9,8 @@ ul
       main
         img.avatar(ng-src="{{ vm.avatars[thread.messages[0].createdBy] }}")
 
+        .notification {{ thread.unreadCount }}
+
         .message
           .co-pilot {{ thread.messages[0].createdBy }}:
 

dist/main.js

@@ -6,7 +6,7 @@
 
 angular.module("appirio-tech-messaging").run(["$templateCache", function($templateCache) {$templateCache.put("views/messaging.html","<messaging thread-id=\"123\" created-by=\"Batman\"></messaging>");
 $templateCache.put("views/messaging.directive.html","<ul class=\"messages\"><li ng-repeat=\"message in vm.messaging.messages track by $index\"><img ng-src=\"{{ vm.messaging.avatars[message.createdBy] }}\" class=\"avatar\"/><div class=\"message\"><p>{{ message.body }}</p><ul class=\"attachments\"><li ng-repeat=\"attachment in message.attachments track by $index\"><a href=\"#\">{{ message.attachments.originalUrl }}</a></li></ul><time>created at: {{ message.createdAt }}</time></div></li><a id=\"messaging-bottom-{{ vm.threadId }}\"></a></ul><form ng-submit=\"vm.sendMessage()\"><textarea placeholder=\"Send a message&hellip;\" ng-model=\"vm.newMessage\"></textarea><button type=\"submit\" class=\"enter\">Enter</button><button type=\"button\" class=\"attach\"><div class=\"icon\"></div><span>Add Attachment</span></button></form>");
-$templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"thread in vm.threads track by $index\"><a ui-sref=\"messaging({id: 123})\"><header><h4>{{ thread.subject }}</h4><time>{{ thread.messages[0].createdAt }}</time></header><main><img ng-src=\"{{ vm.avatars[thread.messages[0].createdBy] }}\" class=\"avatar\"/><div class=\"message\"><div class=\"co-pilot\">{{ thread.messages[0].createdBy }}:</div><p>{{ thread.messages[0].body }}</p></div></main></a></li></ul>");}]);
+$templateCache.put("views/threads.directive.html","<ul><li ng-repeat=\"thread in vm.threads track by $index\"><a ui-sref=\"messaging({id: 123})\"><header><h4>{{ thread.subject }}</h4><time>{{ thread.messages[0].createdAt }}</time></header><main><img ng-src=\"{{ vm.avatars[thread.messages[0].createdBy] }}\" class=\"avatar\"/><div class=\"notification\">{{ thread.unreadCount }}</div><div class=\"message\"><div class=\"co-pilot\">{{ thread.messages[0].createdBy }}:</div><p>{{ thread.messages[0].body }}</p></div></main></a></li></ul>");}]);
 (function() {
   'use strict';
   var MessagingController;