Merge pull request #486 from thelounge/astorije/notification-menu

Add a red dot to the mobile menu icon when being notified

client/css/style.css

@@ -209,6 +209,29 @@ button {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+#viewport .lt {
+	position: relative;
+}
+
+/* Notification dot on the top right corner of the menu icon */
+#viewport .lt:after {
+	content: "";
+	position: absolute;
+	top: 9px;
+	right: 7px;
+	background-color: #e74c3c;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 2px solid white;
+	opacity: 0;
+	transition: opacity .2s;
+}
+
+#viewport .lt.notified:after {
+	opacity: 1;
+}
+
 #viewport .rt:before {
 	font: 14px FontAwesome;
 	content: "\f0c0";

client/js/lounge.js

@@ -158,7 +158,7 @@ $(function() {
 			confirmExit();
 
 			if (sidebar.find(".highlight").length) {
-				toggleFaviconNotification(true);
+				toggleNotificationMarkers(true);
 			}
 		}
 
@@ -758,7 +758,7 @@ $(function() {
 			.empty();
 
 		if (sidebar.find(".highlight").length === 0) {
-			toggleFaviconNotification(false);
+			toggleNotificationMarkers(false);
 		}
 
 		viewport.removeClass("lt");
@@ -868,7 +868,7 @@ $(function() {
 				if (options.notification) {
 					pop.play();
 				}
-				toggleFaviconNotification(true);
+				toggleNotificationMarkers(true);
 
 				if (options.desktopNotifications && Notification.permission === "granted") {
 					var title;
@@ -1177,20 +1177,24 @@ $(function() {
 		return array;
 	}
 
-	function toggleFaviconNotification(newState) {
+	function toggleNotificationMarkers(newState) {
+		// Toggles the favicon to red when there are unread notifications
 		if (favicon.data("toggled") !== newState) {
 			var old = favicon.attr("href");
 			favicon.attr("href", favicon.data("other"));
 			favicon.data("other", old);
 			favicon.data("toggled", newState);
 		}
+
+		// Toggles a dot on the menu icon when there are unread notifications
+		$("#viewport .lt").toggleClass("notified", newState);
 	}
 
 	document.addEventListener(
 		"visibilitychange",
 		function() {
 			if (sidebar.find(".highlight").length === 0) {
-				toggleFaviconNotification(false);
+				toggleNotificationMarkers(false);
 			}
 		}
 	);

client/themes/morning.css

@@ -175,6 +175,11 @@ body {
 	color: #99a2b4;
 }
 
+/* Notification dot on the top right corner of the menu icon */
+#viewport .lt:after {
+	border-color: #333c4a;
+}
+
 #chat .unread-marker {
 	opacity: 1;
 }

client/themes/zenburn.css

@@ -202,6 +202,11 @@ body {
 	color: #d2d39b;
 }
 
+/* Notification dot on the top right corner of the menu icon */
+#viewport .lt:after {
+	border-color: #3f3f3f;
+}
+
 #chat .unread-marker {
 	opacity: 1;
 }