Merge pull request #81 from teetrinkers/trayicon

Show a tray icon if enabled in the config.

README.md

@@ -11,7 +11,7 @@ An application for [Mattermost](http://mattermost.org) for OS X, Windows, and Li
 First, clone down this project, and then from within that directory in your favorite terminal run:
 
 ```
->  npm install
+> npm install
 // installs packages....
 > npm link
 // creates a local symlink
@@ -23,7 +23,7 @@ you have your `config.json` setup as noted in the steps below.
 
 Matterfront can connect to multiple teams. For now, the names and urls or your teams are pulled from a json file in your home directory.
 
-Create a text file at `~/.matterfront/state.json`. (Where `~` is your home directory). Make it look like this:
+Create a text file at `~/.matterfront/config.json`. (Where `~` is your home directory). Make it look like this:
 
 ```json
 {
@@ -66,6 +66,18 @@ These values can also be specified via the developer command-line like this:
 electron . --chrome-args:remote-debugging-port=2929 --chrome-args:no-proxy-server
 ```
 
+## Enabling the tray icon
+
+Matterfront can show an icon in the tray, which is the notification area on Windows, or menu bar on OS X. To enable the tray icon, set the option `showTrayIcon` in your `config.json`, like this:
+
+```json
+{
+  "showTrayIcon": true
+}
+```
+
+If the tray icon is enabled, Matterfront will not quit when the window is closed. Quit the process using the corresponding menu item of the tray icon.
+
 ## Running in Developer Mode
 
 To launch the app from source without building a distribution:

package.json

@@ -50,7 +50,10 @@
     "less-loader": "~2.2.2",
     "lodash.once": "~3.0.1",
     "mocha": "~2.3.4",
+    "proxyquire": "^1.7.3",
     "razz": "~1.1.1",
+    "sinon": "^1.17.2",
+    "sinon-chai": "^2.8.0",
     "style-loader": "~0.13.0",
     "watch": "~0.16.0",
     "webpack": "^1.12.9",

src/browser/mattermost-observer.js

@@ -29,7 +29,10 @@ var notifyHost = function() {
   var unreadCount = getUnreadCount();
 
   ipc.sendToHost('mention', mentionCount);
+  ipc.send('mention', mentionCount);
+
   ipc.sendToHost('unread', unreadCount);
+  ipc.send('unread', unreadCount);
 };
 
 var getUnreadCount = function(){

src/main.js

@@ -5,6 +5,7 @@ var chromeArgs = require('./chrome-args.js');
 var menu = require('./menu.js');
 var settings = require('./settings.js');
 var teams = require("./teams.js");
+var tray = require("./tray.js");
 
 settings.load();
 chromeArgs.apply(settings);
@@ -56,7 +57,11 @@ app.on('ready', function() {
     }
     settings.saveState();
 
-    if (process.platform != 'darwin') { return; }
+    // Quit when the window is closed if not on OS X or if the tray icon is disabled.
+    if (process.platform != 'darwin' && !tray.isEnabled()) {
+      return;
+    }
+
     if (quitting) { return; }
 
     e.preventDefault();
@@ -72,4 +77,10 @@ app.on('ready', function() {
   });
 
   menu.load();
+
+  // Show a system tray/menu bar icon if enabled in the settings.
+  if (settings.get('showTrayIcon') === true) {
+    tray.enable(mainWindow);
+  }
+
 });

src/settings.js

@@ -25,7 +25,8 @@ var defaults = {
     width: 1024,
     height: 600
   },
-  "chrome-args": {}
+  "chrome-args": {},
+  "showTrayIcon": false
 };
 
 settings.load = function(homedir){

src/tray.js

@@ -0,0 +1,95 @@
+var electron = require('electron');
+var Menu = electron.Menu;
+var MenuItem = electron.MenuItem;
+var Tray = electron.Tray;
+var nativeImage = electron.nativeImage;
+var ipc = electron.ipcMain;
+var app = electron.app;
+var path = require('path');
+
+var defaultIcon = nativeImage.createFromPath(
+  path.join(__dirname, '../resources/tray.png'));
+var unreadMessagesIcon = nativeImage.createFromPath(
+  path.join(__dirname, '../resources/tray-unread.png'));
+var mentionsIcon = nativeImage.createFromPath(
+  path.join(__dirname, '../resources/tray-mention.png'));
+
+var tray;
+var mainWindow;
+
+var unreadCount = 0;
+var mentionsCount = 0;
+
+// Returns true if the tray icon is enabled.
+function isEnabled() {
+  return tray != undefined;
+}
+
+function createMenu() {
+  var menu = new Menu();
+
+  menu.append(new MenuItem({
+    label: 'Show',
+    click: function(item) {
+      mainWindow.restore();
+      mainWindow.show();
+    }
+  }));
+  menu.append(new MenuItem({
+    label: 'Quit',
+    click: function(item) {
+      app.quit();
+    }
+  }));
+
+  return menu;
+}
+
+function updateIcon() {
+  if (mentionsCount > 0) {
+    tray.setImage(mentionsIcon);
+  } else if (unreadCount > 0) {
+    tray.setImage(unreadMessagesIcon);
+  } else {
+    tray.setImage(defaultIcon);
+  }
+}
+
+function handleUnreadChange(event, arg) {
+  if (arg !== unreadCount) {
+    unreadCount = arg;
+    updateIcon();
+  }
+}
+
+function handleMentionsChange(event, arg) {
+  if (arg !== mentionsCount) {
+    mentionsCount = arg;
+    updateIcon();
+  }
+}
+
+// Shows the tray icon.
+function enable(mainBrowserWindow) {
+  mainWindow = mainBrowserWindow;
+
+  tray = new Tray(defaultIcon);
+  tray.setToolTip(app.getName());
+
+  var tray_menu = createMenu();
+  tray.setContextMenu(tray_menu);
+
+  tray.on('click', function() {
+    mainBrowserWindow.restore();
+    mainBrowserWindow.show();
+  });
+
+  ipc.on('mention', handleMentionsChange);
+  ipc.on('unread', handleUnreadChange);
+}
+
+
+module.exports = {
+  enable: enable,
+  isEnabled: isEnabled
+};

test/common.js

@@ -1,6 +1,8 @@
 var chai = require("chai");
 var chaiJq = require("chai-jq");
 chai.use(chaiJq);
+var sinonChai = require("sinon-chai");
+chai.use(sinonChai);
 
 global.expect = chai.expect;
 

test/electron-stub.js

@@ -0,0 +1,40 @@
+/**
+ * Returns a partial stub of the electron api.
+ */
+function create() {
+  return {
+    app: {
+      getName: function() {}
+    },
+
+    ipcMain: {
+      on: function() {}
+    },
+
+    nativeImage : {
+      'createFromPath': function() {
+        return {};
+      }
+    },
+
+    Tray: function() {
+      var Tray = function() {};
+      Tray.prototype.setToolTip = function() {};
+      Tray.prototype.setContextMenu = function() {};
+      Tray.prototype.on = function() {};
+      return Tray;
+    }(),
+
+    Menu: function() {
+      var Menu = function() {};
+      Menu.prototype.append = function() {};
+      return Menu;
+    }(),
+
+    MenuItem: function() {}
+  }
+}
+
+module.exports = {
+  create: create
+};

test/tray-spec.js

@@ -0,0 +1,38 @@
+var sinon = require("sinon");
+var proxyquire = require("proxyquire").noPreserveCache().noCallThru();
+var electronStub = require("./electron-stub.js");
+
+describe('tray', function() {
+
+  var electron;
+  var trayModule;
+
+  beforeEach(function() {
+    electron = electronStub.create();
+    electron.Tray = sinon.spy(electron.Tray);
+  });
+
+  it('is initially disabled', function() {
+    trayModule = proxyquire('../src/tray.js', {electron: electron});
+    expect(electron.Tray).to.not.have.been.called;
+    expect(trayModule.isEnabled()).to.be.false;
+  });
+
+  it('creates a tray icon on enable()', function() {
+    trayModule = proxyquire('../src/tray.js', {electron: electron});
+    trayModule.enable({});
+    expect(electron.Tray).to.have.been.calledOnce;
+    expect(trayModule.isEnabled()).to.be.true;
+  });
+
+  it('sets a tooltip for the tray icon', function() {
+    electron.app.getName = function() {return "foo";}
+    electron.Tray.prototype.setToolTip = sinon.spy();
+    trayModule = proxyquire('../src/tray.js', {electron: electron});
+
+    trayModule.enable({});
+    expect(electron.Tray.prototype.setToolTip).to.have.been.calledOnce;
+    expect(electron.Tray.prototype.setToolTip).to.have.been.calledWith("foo");
+  });
+
+});