diff --git a/src/browser/index.jsx b/src/browser/index.jsx index 09d09ad7..3e4aa131 100644 --- a/src/browser/index.jsx +++ b/src/browser/index.jsx @@ -300,24 +300,45 @@ window.addEventListener('contextmenu', function(e) { menu.popup(remote.getCurrentWindow()); }, false); +var showUnreadBadgeWindows = function(unreadCount, mentionCount) { + const badge = require('./js/badge'); + const sendBadge = function(dataURL, description) { + // window.setOverlayIcon() does't work with NativeImage across remote boundaries. + // https://github.com/atom/electron/issues/4011 + electron.ipcRenderer.send('win32-overlay', { + overlayDataURL: dataURL, + description: description + }); + }; + + if (mentionCount > 0) { + const dataURL = badge.createDataURL(mentionCount.toString()); + sendBadge(dataURL, 'You have unread mention (' + mentionCount + ')'); + } else if (unreadCount > 0) { + const dataURL = badge.createDataURL('•'); + sendBadge(dataURL, 'You have unread channels'); + } else { + remote.getCurrentWindow().setOverlayIcon(null, ''); + } +} + +var showUnreadBadgeOSX = function(unreadCount, mentionCount) { + if (mentionCount > 0) { + remote.app.dock.setBadge(mentionCount.toString()); + } else if (unreadCount > 0) { + remote.app.dock.setBadge('•'); + } else { + remote.app.dock.setBadge(''); + } +} + var showUnreadBadge = function(unreadCount, mentionCount) { switch (process.platform) { case 'win32': - var window = remote.getCurrentWindow(); - if (unreadCount > 0 || mentionCount > 0) { - window.setOverlayIcon(path.join(__dirname, '../resources/badge.png'), 'You have unread channels.'); - } else { - window.setOverlayIcon(null, ''); - } + showUnreadBadgeWindows(unreadCount, mentionCount); break; case 'darwin': - if (mentionCount > 0) { - remote.app.dock.setBadge(mentionCount.toString()); - } else if (mentionCount < unreadCount) { - remote.app.dock.setBadge('•'); - } else { - remote.app.dock.setBadge(''); - } + showUnreadBadgeOSX(unreadCount, mentionCount); break; default: } diff --git a/src/browser/js/badge.js b/src/browser/js/badge.js new file mode 100644 index 00000000..b77e1f22 --- /dev/null +++ b/src/browser/js/badge.js @@ -0,0 +1,29 @@ +'use strict'; + +var createDataURL = function(text) { + const scale = 2; // should rely display dpi + const size = 16 * scale; + const canvas = document.createElement('canvas'); + canvas.setAttribute('width', size); + canvas.setAttribute('height', size); + const ctx = canvas.getContext('2d'); + + // circle + ctx.fillStyle = "#FF1744"; // Material Red A400 + ctx.beginPath(); + ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2); + ctx.fill(); + + // text + ctx.fillStyle = "#ffffff" + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.font = (11 * scale) + "px sans-serif"; + ctx.fillText(text, size / 2, size / 2, size); + + return canvas.toDataURL(); +}; + +module.exports = { + createDataURL: createDataURL +}; diff --git a/src/main.js b/src/main.js index c1681ca0..8df87f72 100644 --- a/src/main.js +++ b/src/main.js @@ -83,8 +83,8 @@ app.on('before-quit', function() { // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.on('ready', function() { - // set up tray icon to show balloon if (process.platform === 'win32') { + // set up tray icon to show balloon trayIcon = new Tray(path.resolve(__dirname, 'resources/tray.png')); trayIcon.setToolTip(app.getName()); var tray_menu = require('./main/menus/tray').createDefault(); @@ -102,6 +102,12 @@ app.on('ready', function() { content: arg.options.body }); }); + + // Set overlay icon from dataURL + ipc.on('win32-overlay', function(event, arg) { + var overlay = electron.nativeImage.createFromDataURL(arg.overlayDataURL); + mainWindow.setOverlayIcon(overlay, arg.description); + }); } // Create the browser window. diff --git a/src/resources/badge.png b/src/resources/badge.png deleted file mode 100644 index dfc56224..00000000 Binary files a/src/resources/badge.png and /dev/null differ