closes #870

public/src/modules/notifications.js

@@ -45,20 +45,11 @@ define(function() {
 
 					notifList.appendChild(notifFrag);
 
-					if (data.unread.length > 0) {
-						notifIcon.removeClass('fa-bell-o').addClass('fa-bell');
-					} else {
-						notifIcon.removeClass('fa-bell').addClass('fa-bell-o');
-					}
+					updateNotifCount(data.unread.length);
 
 					socket.emit('modules.notifications.mark_all_read', null, function(err) {
 						if (!err) {
-							notifIcon.removeClass('fa-bell').addClass('fa-bell-o');
-							app.refreshTitle();
-
-							// Update favicon + local count
-							Tinycon.setBubble(0);
-							localStorage.setItem('notifications:count', 0);
+							updateNotifCount(0);
 						}
 					});
 				});
@@ -92,6 +83,9 @@ define(function() {
 				notifIcon.removeClass('fa-bell').addClass('fa-bell-o');
 			}
 
+			notifIcon.toggleClass('unread-count', count > 0);
+			notifIcon.attr('data-content', count > 20 ? '20+' : count);
+
 			// Update the favicon + saved local count
 			Tinycon.setBubble(count);
 			localStorage.setItem('notifications:count', count);
@@ -107,8 +101,6 @@ define(function() {
 
 		socket.on('event:new_notification', function() {
 
-			notifIcon.removeClass('fa-bell-o').addClass('fa-bell');
-
 			app.alert({
 				alert_id: 'new_notif',
 				title: 'New notification',
@@ -123,8 +115,8 @@ define(function() {
 			}
 
 			// Update the favicon + local storage
-			var	savedCount = parseInt(localStorage.getItem('notifications:count'),10) || 0;
-			updateNotifCount(savedCount+1);
+			var	savedCount = parseInt(localStorage.getItem('notifications:count'), 10) || 0;
+			updateNotifCount(savedCount + 1);
 		});
 		socket.on('event:notifications.updateCount', function(count) {
 			updateNotifCount(count);

public/templates/header.tpl

@@ -92,7 +92,7 @@
 					</li>
 
 					<li class="notifications dropdown text-center hidden-xs">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="fa fa-bell-o" title="[[global:header.notifications]]"></i></a>
+						<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="notif_dropdown"><i class="fa fa-fw fa-bell-o" data-content="0" title="[[global:header.notifications]]"></i></a>
 						<ul id="notif-list" class="dropdown-menu" aria-labelledby="notif_dropdown">
 							<li>
 								<a href="#"><i class="fa fa-refresh fa-spin"></i> [[global:notifications.loading]]</a>