From 7d84831adc0dd3d5ff7ea33618a547a94f7a2bd7 Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sat, 5 Sep 2015 06:52:26 -0700
Subject: [PATCH 1/2] Added notification badge styling

---
 app/app-menu.html |  3 ++-
 app/app.scss      | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/app-menu.html b/app/app-menu.html
index f054cccd..c8a68173 100644
--- a/app/app-menu.html
+++ b/app/app-menu.html
@@ -9,7 +9,8 @@
       </ion-nav-back-button>
       <ion-nav-buttons side="left">
         <button menu-toggle="left"
-          class="button button-icon button-clear ion-ios-chatboxes-outline">
+          class="button button-icon button-clear ion-ios-chatbubble-outline">
+          <span class="toc-notification-badge">20</span>
         </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="right">
diff --git a/app/app.scss b/app/app.scss
index c91889de..42323b8e 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -41,6 +41,18 @@ $bar-subheader-height: 75px !default;
 @import 'views/views';
 @import 'components/components';
 
+.toc-notification-badge {
+  margin-right: 0 !important;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  text-align: center;
+  color: $light;
+  font-size: 12px;
+};
+
 form.ng-pristine button[type='submit'] {
   opacity: 1;
 }

From f7df6abb58eaea61a597291ed780f19f19bd5caa Mon Sep 17 00:00:00 2001
From: Lewis Liu <develop@lewisl.net>
Date: Sat, 5 Sep 2015 07:05:40 -0700
Subject: [PATCH 2/2] Added notification count display logic

Adjusted positioning of notification badge
---
 app/app-controller.js | 15 ++++++++++++++-
 app/app-menu.html     |  5 ++++-
 app/app.scss          |  7 +++----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/app/app-controller.js b/app/app-controller.js
index 740e47e5..1f5f30b5 100644
--- a/app/app-controller.js
+++ b/app/app-controller.js
@@ -1,7 +1,20 @@
 export let controllerName = 'AppController';
 export default /*@ngInject*/ function AppController(
-  $ionicPopover
+  $scope,
+  $ionicPopover,
+  state,
+  R
 ) {
+  let notificationsCursor = state.cloud.notifications;
+  let updateNotificationCount = () => {
+    this.notificationCount = R.pipe(
+      R.values,
+      R.reject(R.prop('dismissed'))
+    )(notificationsCursor.get()).length;
+  };
+
+  state.addListener(notificationsCursor, updateNotificationCount, $scope);
+
   this.optionsMenuPopover = $ionicPopover.fromTemplate(
     `
     <ion-popover-view>
diff --git a/app/app-menu.html b/app/app-menu.html
index c8a68173..ae6968c9 100644
--- a/app/app-menu.html
+++ b/app/app-menu.html
@@ -10,7 +10,10 @@
       <ion-nav-buttons side="left">
         <button menu-toggle="left"
           class="button button-icon button-clear ion-ios-chatbubble-outline">
-          <span class="toc-notification-badge">20</span>
+          <span class="toc-notification-badge"
+            ng-if="appView.notificationCount !== 0">
+            {{appView.notificationCount}}
+          </span>
         </button>
       </ion-nav-buttons>
       <ion-nav-buttons side="right">
diff --git a/app/app.scss b/app/app.scss
index 42323b8e..a84e4c45 100644
--- a/app/app.scss
+++ b/app/app.scss
@@ -44,10 +44,9 @@ $bar-subheader-height: 75px !default;
 .toc-notification-badge {
   margin-right: 0 !important;
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
   text-align: center;
   color: $light;
   font-size: 12px;