Merge pull request #179 from magicmonty/HideWindowOnMinimize

Hide window to system tray on minimize/close in Windows/OSX

CHANGELOG.md

@@ -11,9 +11,12 @@
 - Fixed the pixelated app icon on the top left of the window.
 - Fixed the blurred tray icon.
 - Fixed that the redundant description appears in the pinned start menu on Windows 7.
+- The main window is now minimized to system tray on close
+- Added Option to toggle minimize/restore on click on system tray icon
 
 #### OS X
 - Fixed that two icons appear on a notification.
+- Added Option to hide Window from dock on close
 
 ### Improvements
 - Added shortcuts

docs/setup.md

@@ -124,6 +124,10 @@ The Settings Page is available from the **File** menu under **Settings** (Click
         This option allows such images to be rendered, but please be careful for security.
    - **Start app on login** (Windows, Linux)
       - This option starts the application when you login.
+   - **Leave app running in notification area when the window is closed** (OS X)
+      - This option hides the window from the dock, if the window is closed
+   - **Toggle window visibility when clicking on the tray icon** (Windows)
+      - If checked, then a click on the system tray icon leads to a toggling of the minimized/maximized state of the window
 
 
 ## Menu Bar

src/browser/settings.jsx

@@ -47,6 +47,13 @@ var SettingsPage = React.createClass({
         });
       });
     }
+
+    if (process.platform === 'darwin') {
+      var currentWindow = remote.getCurrentWindow();
+      this.setState({
+        trayWasVisible: currentWindow.trayWasVisible
+      });
+    }
   },
   handleTeamsChange: function(teams) {
     this.setState({
@@ -62,6 +69,8 @@ var SettingsPage = React.createClass({
       trayIconTheme: this.state.trayIconTheme,
       disablewebsecurity: this.state.disablewebsecurity,
       version: settings.version,
+      minimizeToTray: this.state.minimizeToTray,
+      toggleWindowOnTrayIconClick: this.state.toggleWindowOnTrayIconClick,
       notifications: {
         flashWindow: this.state.notifications.flashWindow
       }
@@ -101,9 +110,16 @@ var SettingsPage = React.createClass({
     });
   },
   handleChangeShowTrayIcon: function() {
+    var shouldShowTrayIcon = this.refs.showTrayIcon.getChecked();
     this.setState({
-      showTrayIcon: this.refs.showTrayIcon.getChecked()
+      showTrayIcon: shouldShowTrayIcon
     });
+
+    if (process.platform === 'darwin' && !shouldShowTrayIcon) {
+      this.setState({
+        minimizeToTray: false
+      });
+    }
   },
   handleChangeTrayIconTheme: function() {
     this.setState({
@@ -115,6 +131,19 @@ var SettingsPage = React.createClass({
       autostart: this.refs.autostart.getChecked()
     });
   },
+  handleChangeMinimizeToTray: function() {
+    var shouldMinimizeToTray = (process.platform !== 'darwin' || this.refs.showTrayIcon.getChecked())
+    && this.refs.minimizeToTray.getChecked();
+
+    this.setState({
+      minimizeToTray: shouldMinimizeToTray
+    });
+  },
+  handleChangeToggleWindowOnTrayIconClick: function() {
+    this.setState({
+      toggleWindowOnTrayIconClick: this.refs.toggleWindowOnTrayIconClick.getChecked()
+    });
+  },
   toggleShowTeamForm: function() {
     this.setState({
       showAddTeamForm: !this.state.showAddTeamForm
@@ -158,6 +187,17 @@ var SettingsPage = React.createClass({
       options.push(<Input key="inputAutoStart" id="inputAutoStart" ref="autostart" type="checkbox" label="Start app on login." checked={ this.state.autostart } onChange={ this.handleChangeAutoStart }
                    />);
     }
+
+    if (process.platform === 'darwin') {
+      options.push(<Input key="inputMinimizeToTray" id="inputMinimizeToTray" ref="minimizeToTray" type="checkbox" label={ this.state.trayWasVisible || !this.state.showTrayIcon ? "Leave app running in notification area when the window is closed" : "Leave app running in notification area when the window is closed (available on next restart)" } disabled={ !this.state.showTrayIcon || !this.state.trayWasVisible } checked={ this.state.minimizeToTray }
+                     onChange={ this.handleChangeMinimizeToTray } />);
+    }
+
+    if (process.platform === 'win32') {
+      options.push(<Input key="inputToggleWindowOnTrayIconClick" id="inputToggleWindowOnTrayIconClick" ref="toggleWindowOnTrayIconClick" type="checkbox" label="Toggle window visibility when clicking on the tray icon."
+                     checked={ this.state.toggleWindowOnTrayIconClick } onChange={ this.handleChangeToggleWindowOnTrayIconClick } />);
+    }
+
     var options_row = (options.length > 0) ? (
       <Row>
         <Col md={ 12 }>

src/common/settings.js

@@ -26,6 +26,7 @@ var loadDefault = function(version) {
         showTrayIcon: false,
         trayIconTheme: '',
         disablewebsecurity: true,
+        toggleWindowOnTrayIconClick: false,
         version: 1,
         notifications: {
           flashWindow: 0 // 0 = flash never, 1 = only when idle (after 10 seconds), 2 = always

src/main.js

@@ -156,6 +156,7 @@ app.on('browser-window-created', function(event, window) {
 // For OSX, show hidden mainWindow when clicking dock icon.
 app.on('activate', function(event) {
   mainWindow.show();
+  mainWindow.isHidden = false;
 });
 
 app.on('before-quit', function() {
@@ -227,12 +228,48 @@ app.on('ready', function() {
 
     trayIcon.setToolTip(app.getName());
     trayIcon.on('click', function() {
-      mainWindow.focus();
+      if (process.platform === 'win32') {
+        if (mainWindow.isHidden || mainWindow.isMinimized()) {
+          mainWindow.show();
+          mainWindow.isHidden = false;
+          mainWindow.focus();
+        }
+        else if (config.toggleWindowOnTrayIconClick) {
+          mainWindow.minimize();
+        }
+        else {
+          mainWindow.focus();
+        }
+      }
+      else if (process.platform === 'darwin') {
+        if (mainWindow.isHidden || mainWindow.isMinimized()) {
+          mainWindow.show();
+          mainWindow.isHidden = false;
+          mainWindow.focus();
+          app.dock.show();
+        }
+        else {
+          mainWindow.focus();
+        }
+      }
+      else {
+        mainWindow.focus();
+      }
     });
+
     trayIcon.on('right-click', () => {
       trayIcon.popUpContextMenu();
     });
     trayIcon.on('balloon-click', function() {
+      if (process.platform === 'win32' || process.platform === 'darwin') {
+        mainWindow.show();
+        mainWindow.isHidden = false;
+      }
+
+      if (process.platform === 'darwin') {
+        app.dock.show();
+      }
+
       mainWindow.focus();
     });
     ipcMain.on('notified', function(event, arg) {
@@ -321,6 +358,14 @@ app.on('ready', function() {
   if (shouldShowTrayIcon()) {
     const tray_menu = require('./main/menus/tray').createDefault(mainWindow);
     trayIcon.setContextMenu(tray_menu);
+    if (process.platform === 'darwin') {
+      // store the information, if the tray was initialized, for checking in the settings, if the application
+      // was restarted after setting "Show icon on menu bar"
+      if (trayIcon)
+        mainWindow.trayWasVisible = true;
+      else
+        mainWindow.trayWasVisible = false;
+    }
   }
 
   // Open the DevTools.
@@ -346,11 +391,18 @@ app.on('ready', function() {
       event.preventDefault();
       switch (process.platform) {
         case 'win32':
+          mainWindow.hide();
+          mainWindow.isHidden = true;
+          break;
         case 'linux':
           mainWindow.minimize();
           break;
         case 'darwin':
           mainWindow.hide();
+          if (config.minimizeToTray) {
+            app.dock.hide();
+            mainWindow.isHidden = true;
+          }
           break;
         default:
       }

src/main/menus/tray.js

@@ -11,6 +11,12 @@ function createDefault(mainWindow) {
     label: `Open ${app.getName()}`,
     click: () => {
       mainWindow.show();
+      mainWindow.isHidden = false;
+
+      if (process.platform === 'darwin') {
+        app.dock.show();
+        mainWindow.focus();
+      }
     }
   }, {
     type: 'separator'

test/specs/browser/settings_test.js

@@ -151,6 +151,26 @@ describe('browser/settings.html', function() {
       });
     });
 
+    describe('Minimize to tray', function() {
+      it('should appear on darwin', function() {
+        const expected = (process.platform === 'darwin');
+        env.addClientCommands(this.app.client);
+        return this.app.client
+          .loadSettingsPage()
+          .isExisting('#inputMinimizeToTray').should.eventually.equal(expected)
+      });
+    });
+
+    describe('Toggle window visibility when clicking on the tray icon', function() {
+      it('should appear on win32', function() {
+        const expected = (process.platform === 'win32');
+        env.addClientCommands(this.app.client);
+        return this.app.client
+          .loadSettingsPage()
+          .isExisting('#inputToggleWindowOnTrayIconClick').should.eventually.equal(expected)
+      });
+    });
+
     describe('Notifications', function() {
       it('should appear on win32', function() {
         const expected = (process.platform === 'win32');