Merge pull request #651 from wvds/GH-514

Implement Mac bounce feature

CHANGELOG.md

@@ -31,6 +31,8 @@ Release date: TBD
  [#512](https://github.com/mattermost/desktop/issues/512)
  - Added the feature to open the application via `mattermost://` link.
  [#616](https://github.com/mattermost/desktop/pull/616)
+ - Added the option to bounce the Dock icon when receiving new messages.
+ [#514](https://github.com/mattermost/desktop/issues/514)
 
 ### Bug Fixes
 

src/browser/components/SettingsPage.jsx

@@ -129,7 +129,9 @@ const SettingsPage = createReactClass({
       version: settings.version,
       minimizeToTray: this.state.minimizeToTray,
       notifications: {
-        flashWindow: this.state.notifications.flashWindow
+        flashWindow: this.state.notifications.flashWindow,
+        bounceIcon: this.state.notifications.bounceIcon,
+        bounceIconType: this.state.notifications.bounceIconType
       },
       showUnreadBadge: this.state.showUnreadBadge,
       useSpellChecker: this.state.useSpellChecker,
@@ -219,11 +221,30 @@ const SettingsPage = createReactClass({
   handleFlashWindow() {
     this.setState({
       notifications: {
+        ...this.state.notifications,
         flashWindow: this.refs.flashWindow.props.checked ? 0 : 2
       }
     });
     setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
   },
+  handleBounceIcon() {
+    this.setState({
+      notifications: {
+        ...this.state.notifications,
+        bounceIcon: !this.refs.bounceIcon.props.checked
+      }
+    });
+    setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
+  },
+  handleBounceIconType(event) {
+    this.setState({
+      notifications: {
+        ...this.state.notifications,
+        bounceIconType: event.target.value
+      }
+    });
+    setImmediate(this.startSaveConfig, CONFIG_TYPE_APP_OPTIONS);
+  },
   handleShowUnreadBadge() {
     this.setState({
       showUnreadBadge: !this.refs.showUnreadBadge.props.checked
@@ -419,6 +440,48 @@ const SettingsPage = createReactClass({
         </Checkbox>);
     }
 
+    if (process.platform === 'darwin') {
+      options.push(
+        <FormGroup>
+          <Checkbox
+            inline={true}
+            key='bounceIcon'
+            id='inputBounceIcon'
+            ref='bounceIcon'
+            checked={this.state.notifications.bounceIcon}
+            onChange={this.handleBounceIcon}
+            style={{marginRight: '10px'}}
+          >{'Bounce the Dock icon'}
+          </Checkbox>
+          <Radio
+            inline={true}
+            name='bounceIconType'
+            value='informational'
+            disabled={!this.state.notifications.bounceIcon}
+            defaultChecked={
+              !this.state.notifications.bounceIconType ||
+              this.state.notifications.bounceIconType === 'informational'
+            }
+            onChange={this.handleBounceIconType}
+          >{'once'}</Radio>
+          {' '}
+          <Radio
+            inline={true}
+            name='bounceIconType'
+            value='critical'
+            disabled={!this.state.notifications.bounceIcon}
+            defaultChecked={this.state.notifications.bounceIconType === 'critical'}
+            onChange={this.handleBounceIconType}
+          >{'until I open the app'}</Radio>
+          <HelpBlock
+            style={{marginLeft: '20px'}}
+          >
+            {'If enabled, the Dock icon bounces once or until the user opens the app when a new message is received.'}
+          </HelpBlock>
+        </FormGroup>
+      );
+    }
+
     if (process.platform === 'darwin' || process.platform === 'linux') {
       options.push(
         <Checkbox

src/common/config/defaultPreferences.js

@@ -9,7 +9,9 @@ const defaultPreferences = {
   trayIconTheme: 'light',
   minimizeToTray: false,
   notifications: {
-    flashWindow: 0
+    flashWindow: 0,
+    bounceIcon: false,
+    bounceIconType: 'informational'
   },
   showUnreadBadge: true,
   useSpellChecker: true,

src/common/settings.js

@@ -14,7 +14,7 @@ const upgradePreferences = require('./config/upgradePreferences');
 function loadDefault(spellCheckerLocale) {
   const config = JSON.parse(JSON.stringify(defaultPreferences));
   return Object.assign({}, config, {
-    spellCheckerLocale: spellCheckerLocale || defaultPreferences.pellCheckerLocale || 'en-US'
+    spellCheckerLocale: spellCheckerLocale || defaultPreferences.spellCheckerLocale || 'en-US'
   });
 }
 

src/main.js

@@ -409,6 +409,10 @@ app.on('ready', () => {
         mainWindow.flashFrame(true);
       }
     }
+
+    if (process.platform === 'darwin' && config.notifications.bounceIcon) {
+      app.dock.bounce(config.notifications.bounceIconType);
+    }
   });
 
   ipcMain.on('update-title', (event, arg) => {