From 0cfabb5ffa279770985927b21353452edf7ed533 Mon Sep 17 00:00:00 2001
From: Mikunj <mikunj@live.com.au>
Date: Mon, 10 Dec 2018 12:41:22 +1100
Subject: [PATCH 1/2] Added unread indicator in conversations sections.

---
 background.html                          |  7 ++++-
 js/views/inbox_view.js                   | 21 +++++++++++++-
 js/views/standalone_registration_view.js |  2 +-
 stylesheets/_index.scss                  | 35 ++++++++++++++++++++++--
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/background.html b/background.html
index 84f605bda..dcb13e8d8 100644
--- a/background.html
+++ b/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>
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 643cd135e..2f2f250e4 100644
--- a/js/views/inbox_view.js
+++ b/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);
     },
diff --git a/js/views/standalone_registration_view.js b/js/views/standalone_registration_view.js
index b2eee33c6..174d2c363 100644
--- a/js/views/standalone_registration_view.js
+++ b/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
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 344eab95b..24ee7b0e1 100644
--- a/stylesheets/_index.scss
+++ b/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;

From 4a2c6188036e3dd67368d4e8164b9ba01bf6709b Mon Sep 17 00:00:00 2001
From: sachaaaaa <40749766+sachaaaaa@users.noreply.github.com>
Date: Mon, 10 Dec 2018 14:43:28 +1100
Subject: [PATCH 2/2] Update js/views/inbox_view.js

Co-Authored-By: Mikunj <Mikunj@users.noreply.github.com>
---
 js/views/inbox_view.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 2f2f250e4..88d5e40bc 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -143,7 +143,7 @@
       this.inboxListView.listenTo(
         inboxCollection,
         'add change:unreadCount',
-        ()=> this.updateInboxSectionUnread()
+        () => this.updateInboxSectionUnread()
       );
 
       // Listen to any conversation remove