Merge pull request #287 from lewisl9029/feature-header-notifications-…

…badge Feature header notifications badge. Closes #242
lewisl9029 · Sep 5, 2015 · 169b094 · 169b094
2 parents f3e13fe + f7df6ab
commit 169b094
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git 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
@@ -9,7 +9,11 @@
       </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"
+            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
@@ -41,6 +41,17 @@ $bar-subheader-height: 75px !default;
 @import 'views/views';
 @import 'components/components';
 
+.toc-notification-badge {
+  margin-right: 0 !important;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  text-align: center;
+  color: $light;
+  font-size: 12px;
+};
+
 form.ng-pristine button[type='submit'] {
   opacity: 1;
 }