Add pagination to the notifications API and make the UI only show a maximum of 5 notifications (beyond that, it shows "5+").

static/css/quay.css

@@ -745,7 +745,7 @@ i.toggle-icon:hover {
 }
 
 .user-notification.notification-animated {
-  width: 21px;
+  min-width: 21px;
 
   transform: scale(0);
   -moz-transform: scale(0);

static/directives/header-bar.html

@@ -37,15 +37,7 @@
       <a href="javascript:void(0)" class="dropdown-toggle user-dropdown user-view" data-toggle="dropdown">
         <img src="//www.gravatar.com/avatar/{{ user.gravatar }}?s=32&d=identicon" />
         {{ user.username }}
-        <span class="badge user-notification notification-animated"
-              ng-show="notificationService.notifications.length"
-              ng-class="notificationService.notificationClasses"
-              bs-tooltip=""
-              data-title="User Notifications"
-              data-placement="left"
-              data-container="body">
-          {{ notificationService.notifications.length }}
-        </span>
+        <span class="notifications-bubble"></span>
         <b class="caret"></b>
       </a>
       <ul class="dropdown-menu">
@@ -58,11 +50,7 @@
           <a href="javascript:void(0)" data-template="/static/directives/notification-bar.html"
              data-animation="am-slide-right" bs-aside="aside" data-container="body">
             Notifications
-            <span class="badge user-notification"
-                  ng-class="notificationService.notificationClasses"
-                  ng-show="notificationService.notifications.length">
-              {{ notificationService.notifications.length }}
-            </span>
+            <span class="notifications-bubble"></span>
           </a>
         </li>
         <li><a ng-href="/organizations/" target="{{ appLinkTarget() }}">Organizations</a></li>

static/directives/notification-bar.html

@@ -3,7 +3,10 @@
     <div class="aside-content">
       <div class="aside-header">
         <button type="button" class="close" ng-click="$hide()">&times;</button>
-        <h4 class="aside-title">Notifications</h4>
+        <h4 class="aside-title">
+          Notifications
+          <span class="notifications-bubble"></span>
+        </h4>
       </div>
       <div class="aside-body">
         <div ng-repeat="notification in notificationService.notifications">

static/directives/notifications-bubble.html

@@ -0,0 +1,7 @@
+<span class="notifications-bubble-element">
+  <span class="badge user-notification notification-animated"
+        ng-show="notificationService.notifications.length"
+        ng-class="notificationService.notificationClasses">
+    {{ notificationService.notifications.length }}<span ng-if="notificationService.additionalNotifications">+</span>
+  </span>
+</span>

static/js/app.js

@@ -1155,7 +1155,8 @@ quayApp = angular.module('quay', quayDependencies, function($provide, cfpLoading
         'user': null,
         'notifications': [],
         'notificationClasses': [],
-        'notificationSummaries': []
+        'notificationSummaries': [],
+        'additionalNotifications': false
       };
 
       var pollTimerHandle = null;
@@ -1251,7 +1252,9 @@ quayApp = angular.module('quay', quayDependencies, function($provide, cfpLoading
           'uuid': notification.id
         };
         
-        ApiService.updateUserNotification(notification, params);
+        ApiService.updateUserNotification(notification, params, function() {
+          notificationService.update();
+        }, ApiService.errorDisplay('Could not update notification'));
 
         var index = $.inArray(notification, notificationService.notifications);
         if (index >= 0) {
@@ -1308,6 +1311,7 @@ quayApp = angular.module('quay', quayDependencies, function($provide, cfpLoading
 
         ApiService.listUserNotifications().then(function(resp) {
           notificationService.notifications = resp['notifications'];
+          notificationService.additionalNotifications = resp['additional'];
           notificationService.notificationClasses = notificationService.getClasses(notificationService.notifications);
         });
       };
@@ -5021,6 +5025,23 @@ quayApp.directive('twitterView', function () {
 });
 
 
+quayApp.directive('notificationsBubble', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/notifications-bubble.html',
+    replace: false,
+    transclude: false,
+    restrict: 'C',
+    scope: {
+    },
+    controller: function($scope, UserService, NotificationService) {
+      $scope.notificationService = NotificationService;
+    }
+  };
+  return directiveDefinitionObject;
+});
+
+
 quayApp.directive('notificationView', function () {
   var directiveDefinitionObject = {
     priority: 0,