Add badge for unread messages to the tray icon (#1934)

This commit adds a badge to the tray icon that displays the number of unread messages, if there is any. It is implemented by providing alternative versions of the icon, that replace the default image when a message is received. The badge is rendered graphically as a red circle containing the number of unread messages. Since a different icon file is needed for each possible number of unread messages, but this number is clearly unbounded, only the numbers from 1 to 9 are provided. If there are 10 or more unread messages, a single badge (depicted as "9+") is used. Resolves #1917
oxen-io · Jan 17, 2018 · 7034d87 · 7034d87
1 parent 9ef8228
commit 7034d87
Show file tree

Hide file tree

Showing 24 changed files with 22 additions and 5 deletions.
diff --git a/app/tray_icon.js b/app/tray_icon.js
@@ -11,11 +11,10 @@ let tray = null;
 
 function createTrayIcon(getMainWindow, messages) {
   // A smaller icon is needed on macOS
-  tray = new Tray(
-    process.platform === 'darwin' ?
-      path.join(__dirname, '..', 'images', 'icon_16.png') :
-      path.join(__dirname, '..', 'images', 'icon_256.png')
-  );
+  const iconSize = process.platform === 'darwin' ? '16' : '256';
+  const iconNoNewMessages = path.join(__dirname, '..', 'images', `icon_${iconSize}.png`);
+
+  tray = new Tray(iconNoNewMessages);
 
   tray.toggleWindowVisibility = () => {
     const mainWindow = getMainWindow();
@@ -57,6 +56,15 @@ function createTrayIcon(getMainWindow, messages) {
     tray.setContextMenu(trayContextMenu);
   };
 
+  tray.updateIcon = (unreadCount) => {
+    if (unreadCount > 0) {
+      const filename = `${String(unreadCount >= 10 ? 10 : unreadCount)}.png`;
+      tray.setImage(path.join(__dirname, '..', 'images', 'alert', iconSize, filename));
+    } else {
+      tray.setImage(iconNoNewMessages);
+    }
+  };
+
   tray.on('click', tray.toggleWindowVisibility);
 
   tray.setToolTip(messages.trayTooltip.message);

diff --git a/images/alert/16/1.png b/images/alert/16/1.png
diff --git a/images/alert/16/10.png b/images/alert/16/10.png
diff --git a/images/alert/16/2.png b/images/alert/16/2.png
diff --git a/images/alert/16/3.png b/images/alert/16/3.png
diff --git a/images/alert/16/4.png b/images/alert/16/4.png
diff --git a/images/alert/16/5.png b/images/alert/16/5.png
diff --git a/images/alert/16/6.png b/images/alert/16/6.png
diff --git a/images/alert/16/7.png b/images/alert/16/7.png
diff --git a/images/alert/16/8.png b/images/alert/16/8.png
diff --git a/images/alert/16/9.png b/images/alert/16/9.png
diff --git a/images/alert/256/1.png b/images/alert/256/1.png
diff --git a/images/alert/256/10.png b/images/alert/256/10.png
diff --git a/images/alert/256/2.png b/images/alert/256/2.png
diff --git a/images/alert/256/3.png b/images/alert/256/3.png
diff --git a/images/alert/256/4.png b/images/alert/256/4.png
diff --git a/images/alert/256/5.png b/images/alert/256/5.png
diff --git a/images/alert/256/6.png b/images/alert/256/6.png
diff --git a/images/alert/256/7.png b/images/alert/256/7.png
diff --git a/images/alert/256/8.png b/images/alert/256/8.png
diff --git a/images/alert/256/9.png b/images/alert/256/9.png
diff --git a/js/conversation_controller.js b/js/conversation_controller.js
@@ -64,6 +64,7 @@
                 window.setBadgeCount(0);
                 window.document.title = window.config.title;
             }
+            window.updateTrayIcon(newUnreadCount);
         },
         startPruning: function() {
             var halfHour = 30 * 60 * 1000;

diff --git a/main.js b/main.js
@@ -483,3 +483,8 @@ ipc.on('close-about', () => {
   }
 });
 
+ipc.on('update-tray-icon', (event, unreadCount) => {
+  if (tray) {
+    tray.updateIcon(unreadCount);
+  }
+});
diff --git a/preload.js b/preload.js
@@ -34,6 +34,9 @@
   window.closeAbout = function() {
     ipc.send('close-about');
   };
+  window.updateTrayIcon = function(unreadCount) {
+    ipc.send('update-tray-icon', unreadCount);
+  };
 
   ipc.on('debug-log', function() {
     Whisper.events.trigger('showDebugLog');