Merge pull request #81 from Mikunj/ui/unread-icon

Added unread indicator in conversation section.

background.html

@@ -58,7 +58,12 @@
       </div>
       <div class='content'>
         <div class='conversations-list'>
-          <h4 class='section-toggle section-toggle-visible'>Conversations</h4>
+          <div class='section-toggle section-toggle-visible'>
+            <div class='section-conversations-container'>
+              <h4>Conversations</h4>
+              <div class='section-conversations-unread-counter'>0</div>
+            </div>
+          </div>
           <div class='conversations inbox'></div>
           <h4 class='section-toggle section-toggle-visible'>Contacts</h4>
           <div class='conversations friends'></div>

js/views/inbox_view.js

@@ -140,6 +140,12 @@
         this.inboxListView.updateLocation
       );
 
+      this.inboxListView.listenTo(
+        inboxCollection,
+        'add change:unreadCount',
+        () => this.updateInboxSectionUnread()
+      );
+
       // Listen to any conversation remove
       this.listenTo(
         inboxCollection,
@@ -202,6 +208,8 @@
         banner.$el.prependTo(this.$el);
         this.$el.addClass('expired');
       }
+
+      this.updateInboxSectionUnread();
     },
     render_attributes() {
       return {
@@ -292,7 +300,7 @@
     },
     toggleSection(e) {
       // Expand or collapse this panel
-      const $target = this.$(e.target);
+      const $target = this.$(e.currentTarget);
       const $next = $target.next();
 
       // Toggle section visibility
@@ -322,6 +330,17 @@
       }
       this.$('.conversation:first .recorder').trigger('close');
     },
+    updateInboxSectionUnread() {
+      const $section = this.$('.section-conversations-unread-counter');
+      const models = (this.inboxListView.collection && this.inboxListView.collection.models) || [];
+      const unreadCount = models.reduce((count, m) => count + Math.max(0, m.get('unreadCount')), 0);
+      $section.text(unreadCount);
+      if (unreadCount > 0) {
+        $section.show();
+      } else {
+        $section.hide();
+      }
+    },
     onClick(e) {
       this.closeRecording(e);
     },

js/views/standalone_registration_view.js

@@ -147,7 +147,7 @@
     },
     toggleSection(e) {
       // Expand or collapse this panel
-      const $target = this.$(e.target);
+      const $target = this.$(e.currentTarget);
       const $next = $target.next();
 
       // Toggle section visibility

stylesheets/_index.scss

@@ -87,12 +87,15 @@
   font-weight: bold;
   line-height: 3;
   cursor: pointer;
-  margin-top: 1px;
-  margin-bottom: 1px;
   overflow: hidden;
   user-select: none;
 }
 
+h4.section-toggle, .section-toggle h4 {
+  margin-top: 1px;
+  margin-bottom: 1px;
+}
+
 .section-toggle::after {
   position: absolute;
   right: 0;
@@ -112,6 +115,34 @@
   transform: rotate(315deg);
 }
 
+.section-conversations-container {
+  display: flex;
+  flex-direction: row;
+  margin-right: 3em;
+  align-items: center;
+
+  h4 {
+    flex: 1,
+  }
+
+  .section-conversations-unread-counter {
+    color: #ffffff;
+    background-color: #2090ea;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 3px;
+    padding-right: 3px;
+    font-weight: 300;
+    font-size: 11px;
+    letter-spacing: 0.25px;
+    height: 16px;
+    min-width: 16px;
+    line-height: 16px;
+    border-radius: 8px;
+    box-shadow: 0px 0px 0px 1px #1a1c20;
+  }
+}
+
 .network-status-container {
   .network-status {
     background: url('../images/error_red.svg') no-repeat left 10px center;