From 0520c6a6ec0218ca19ddcb985f6399eac3698899 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 10 Jul 2016 16:38:08 -0400
Subject: [PATCH] Add a red dot to the mobile menu icon when being notified

On mobile, there is no favicon to toggle, so nothing shows up when a new notification arrives.
This commit changes this by adding a marker on the burger menu icon, visible on all channels
---
 client/css/style.css      | 23 +++++++++++++++++++++++
 client/js/lounge.js       | 14 +++++++++-----
 client/themes/morning.css |  5 +++++
 client/themes/zenburn.css |  5 +++++
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index c013e6d1..495f33f5 100644
--- a/client/css/style.css
+++ b/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";
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 2e014815..6939050c 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -158,7 +158,7 @@ $(function() {
 			confirmExit();
 
 			if (sidebar.find(".highlight").length) {
-				toggleFaviconNotification(true);
+				toggleNotificationMarkers(true);
 			}
 		}
 
@@ -769,7 +769,7 @@ $(function() {
 			.empty();
 
 		if (sidebar.find(".highlight").length === 0) {
-			toggleFaviconNotification(false);
+			toggleNotificationMarkers(false);
 		}
 
 		viewport.removeClass("lt");
@@ -879,7 +879,7 @@ $(function() {
 				if (options.notification) {
 					pop.play();
 				}
-				toggleFaviconNotification(true);
+				toggleNotificationMarkers(true);
 
 				if (options.desktopNotifications && Notification.permission === "granted") {
 					var title;
@@ -1188,20 +1188,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);
 			}
 		}
 	);
diff --git a/client/themes/morning.css b/client/themes/morning.css
index c6cd63f8..77512fbc 100644
--- a/client/themes/morning.css
+++ b/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;
 }
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index 5cb3db57..00a32c2e 100644
--- a/client/themes/zenburn.css
+++ b/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;
 }