Add logic to dismiss unread announcements, styling fixes.

services/web/app/views/project/list.jade

@@ -28,21 +28,21 @@ block content
 			)
 				.announcements-backdrop(
 					ng-if="ui.isOpen"
-					ng-click="ui.isOpen = false;"
+					ng-click="toggleAnnouncementsUI();"
 				)
 				a.announcements-btn(
 					href
 					ng-if="announcements.length"
-					ng-click="ui.isOpen = !ui.isOpen"
-					ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.hasNew }"
+					ng-click="toggleAnnouncementsUI();"
+					ng-class="{ 'announcements-btn-open': ui.isOpen, 'announcements-btn-has-new': ui.newItems }"
 				)
-					span.announcements-badge(ng-if="ui.hasNew") {{ announcements.length }}
+					span.announcements-badge(ng-if="ui.newItems") {{ ui.newItems }}
 				.announcements-body(
 					ng-if="ui.isOpen"
 				)
 					.announcements-scroller
 						.announcement(
-							ng-repeat="announcement in announcements"
+							ng-repeat="announcement in announcements | filter:(ui.newItems ? { read: false } : '') track by announcement.id"
 						)
 							h2.announcement-header {{ announcement.title }}
 							p.announcement-description {{ announcement.excerpt }}

services/web/public/coffee/main/announcements.coffee

@@ -1,23 +1,27 @@
 define [
 	"base"
 ], (App) ->
-	App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window) ->
+	App.controller "AnnouncementsController", ($scope, $http, event_tracking, $window, _) ->
 		$scope.announcements = []
 		$scope.ui =
 			isOpen: false
-			hasNew: false
+			newItems: 0
 		
 		refreshAnnouncements = ->
 			$http.get("/announcements").success (announcements) ->
 				$scope.announcements = announcements
+				$scope.ui.newItems = _.filter(announcements, (announcement) -> !announcement.read).length
 				
-		dismissCurrentAnnouncement = ->
-			event_tracking.sendMB "announcement-alert-dismissed", { blogPostId:announcement.id }
+		markAnnouncementsAsRead = ->
+			event_tracking.sendMB "announcement-alert-dismissed", { blogPostId: $scope.announcements[0].id }
 
 		refreshAnnouncements()
 
-		$scope.openLink = ->
-			dismissCurrentAnnouncement()
-				.then(refreshAnnouncements)
+		$scope.toggleAnnouncementsUI = ->
+			$scope.ui.isOpen = !$scope.ui.isOpen
+
+			if !$scope.ui.isOpen and $scope.ui.newItems
+				$scope.ui.newItems = 0
+				markAnnouncementsAsRead()
+
 
-			$window.open = announcement.url

services/web/public/stylesheets/app/project-list.less

@@ -394,6 +394,7 @@ ul.project-list {
 
 .announcements-body {
 	display: flex;
+	flex-direction: column;
 	align-items: stretch;
 	position: absolute;
 	right: 3%;