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
This commit is contained in:
parent
28938be10d
commit
0520c6a6ec
@ -209,6 +209,29 @@ button {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-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 {
|
#viewport .rt:before {
|
||||||
font: 14px FontAwesome;
|
font: 14px FontAwesome;
|
||||||
content: "\f0c0";
|
content: "\f0c0";
|
||||||
|
@ -158,7 +158,7 @@ $(function() {
|
|||||||
confirmExit();
|
confirmExit();
|
||||||
|
|
||||||
if (sidebar.find(".highlight").length) {
|
if (sidebar.find(".highlight").length) {
|
||||||
toggleFaviconNotification(true);
|
toggleNotificationMarkers(true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -769,7 +769,7 @@ $(function() {
|
|||||||
.empty();
|
.empty();
|
||||||
|
|
||||||
if (sidebar.find(".highlight").length === 0) {
|
if (sidebar.find(".highlight").length === 0) {
|
||||||
toggleFaviconNotification(false);
|
toggleNotificationMarkers(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
viewport.removeClass("lt");
|
viewport.removeClass("lt");
|
||||||
@ -879,7 +879,7 @@ $(function() {
|
|||||||
if (options.notification) {
|
if (options.notification) {
|
||||||
pop.play();
|
pop.play();
|
||||||
}
|
}
|
||||||
toggleFaviconNotification(true);
|
toggleNotificationMarkers(true);
|
||||||
|
|
||||||
if (options.desktopNotifications && Notification.permission === "granted") {
|
if (options.desktopNotifications && Notification.permission === "granted") {
|
||||||
var title;
|
var title;
|
||||||
@ -1188,20 +1188,24 @@ $(function() {
|
|||||||
return array;
|
return array;
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleFaviconNotification(newState) {
|
function toggleNotificationMarkers(newState) {
|
||||||
|
// Toggles the favicon to red when there are unread notifications
|
||||||
if (favicon.data("toggled") !== newState) {
|
if (favicon.data("toggled") !== newState) {
|
||||||
var old = favicon.attr("href");
|
var old = favicon.attr("href");
|
||||||
favicon.attr("href", favicon.data("other"));
|
favicon.attr("href", favicon.data("other"));
|
||||||
favicon.data("other", old);
|
favicon.data("other", old);
|
||||||
favicon.data("toggled", newState);
|
favicon.data("toggled", newState);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Toggles a dot on the menu icon when there are unread notifications
|
||||||
|
$("#viewport .lt").toggleClass("notified", newState);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener(
|
document.addEventListener(
|
||||||
"visibilitychange",
|
"visibilitychange",
|
||||||
function() {
|
function() {
|
||||||
if (sidebar.find(".highlight").length === 0) {
|
if (sidebar.find(".highlight").length === 0) {
|
||||||
toggleFaviconNotification(false);
|
toggleNotificationMarkers(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -175,6 +175,11 @@ body {
|
|||||||
color: #99a2b4;
|
color: #99a2b4;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Notification dot on the top right corner of the menu icon */
|
||||||
|
#viewport .lt:after {
|
||||||
|
border-color: #333c4a;
|
||||||
|
}
|
||||||
|
|
||||||
#chat .unread-marker {
|
#chat .unread-marker {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -202,6 +202,11 @@ body {
|
|||||||
color: #d2d39b;
|
color: #d2d39b;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Notification dot on the top right corner of the menu icon */
|
||||||
|
#viewport .lt:after {
|
||||||
|
border-color: #3f3f3f;
|
||||||
|
}
|
||||||
|
|
||||||
#chat .unread-marker {
|
#chat .unread-marker {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user