Merge pull request #428 from yuya-oc/app-options

Improve messages and options in "App Options" section
2017-02-17 19:52:14 +09:00
parent 3bc7d389b0 e1a2175bcd
commit e4d1ab2938
6 changed files with 115 additions and 119 deletions
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -1,6 +1,6 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
-const {Button, Checkbox, Col, FormGroup, FormControl, ControlLabel, Grid, Navbar, Row} = require('react-bootstrap');
+const {Button, Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row} = require('react-bootstrap');

 const {ipcRenderer, remote} = require('electron');
 const AutoLaunch = require('auto-launch');
@@ -67,13 +67,11 @@ const SettingsPage = React.createClass({
  handleSave() {
    var config = {
      teams: this.state.teams,
-      hideMenuBar: this.state.hideMenuBar,
      showTrayIcon: this.state.showTrayIcon,
      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
      },
@@ -81,10 +79,6 @@ const SettingsPage = React.createClass({
    };
    settings.writeFileSync(this.props.configFile, config);
    if (process.platform === 'win32' || process.platform === 'linux') {
-      var currentWindow = remote.getCurrentWindow();
-      currentWindow.setAutoHideMenuBar(config.hideMenuBar);
-      currentWindow.setMenuBarVisibility(!config.hideMenuBar);
-
      var autostart = this.state.autostart;
      appLauncher.isEnabled().then((enabled) => {
        if (enabled && !autostart) {
@@ -105,12 +99,7 @@ const SettingsPage = React.createClass({
  },
  handleChangeDisableWebSecurity() {
    this.setState({
-      disablewebsecurity: !this.refs.disablewebsecurity.props.checked
-    });
-  },
-  handleChangeHideMenuBar() {
-    this.setState({
-      hideMenuBar: !this.refs.hideMenuBar.props.checked
+      disablewebsecurity: this.refs.disablewebsecurity.props.checked
    });
  },
  handleChangeShowTrayIcon() {
@@ -142,11 +131,6 @@ const SettingsPage = React.createClass({
      minimizeToTray: shouldMinimizeToTray
    });
  },
-  handleChangeToggleWindowOnTrayIconClick() {
-    this.setState({
-      toggleWindowOnTrayIconClick: !this.refs.toggleWindowOnTrayIconClick.props.checked
-    });
-  },
  toggleShowTeamForm() {
    this.setState({
      showAddTeamForm: !this.state.showAddTeamForm
@@ -204,54 +188,8 @@ const SettingsPage = React.createClass({
    );

    var options = [];
-    if (process.platform === 'win32' || process.platform === 'linux') {
-      options.push(
-        <Checkbox
-          key='inputHideMenuBar'
-          id='inputHideMenuBar'
-          ref='hideMenuBar'
-          checked={this.state.hideMenuBar}
-          onChange={this.handleChangeHideMenuBar}
-        >{'Hide menu bar (Press Alt to show menu bar)'}</Checkbox>);
-    }
-    if (process.platform === 'darwin' || process.platform === 'linux') {
-      options.push(
-        <Checkbox
-          key='inputShowTrayIcon'
-          id='inputShowTrayIcon'
-          ref='showTrayIcon'
-          checked={this.state.showTrayIcon}
-          onChange={this.handleChangeShowTrayIcon}
-        >{process.platform === 'darwin' ?
-          'Show icon on menu bar (need to restart the application)' :
-          'Show icon in notification area (need to restart the application)'}</Checkbox>);
-    }
-    if (process.platform === 'linux') {
-      options.push(
-        <FormGroup>
-          <ControlLabel>{'Icon theme (Need to restart the application)'}</ControlLabel>
-          <FormControl
-            componentClass='select'
-            key='inputTrayIconTheme'
-            ref='trayIconTheme'
-            value={this.state.trayIconTheme}
-            onChange={this.handleChangeTrayIconTheme}
-          >
-            <option value='light'>{'Light'}</option>
-            <option value='dark'>{'Dark'}</option>
-          </FormControl>
-        </FormGroup>);
-    }
-    options.push(
-      <Checkbox
-        key='inputDisableWebSecurity'
-        id='inputDisableWebSecurity'
-        ref='disablewebsecurity'
-        checked={this.state.disablewebsecurity}
-        onChange={this.handleChangeDisableWebSecurity}
-      >{'Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)'}</Checkbox>);

-    //OSX has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
+    // MacOS has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
    if (process.platform === 'win32' || process.platform === 'linux') {
      options.push(
        <Checkbox
@@ -260,31 +198,29 @@ const SettingsPage = React.createClass({
          ref='autostart'
          checked={this.state.autostart}
          onChange={this.handleChangeAutoStart}
-        >{'Start app on login.'}</Checkbox>);
+        >{'Start app on login'}
+          <HelpBlock>
+            {'If enabled, the app starts automatically when you log in to your machine.'}
+            {' '}
+            {'The app will initially start minimized and appear on the taskbar.'}
+          </HelpBlock>
+        </Checkbox>);
    }

-    if (process.platform === 'darwin' || process.platform === 'linux') {
-      options.push(
-        <Checkbox
-          key='inputMinimizeToTray'
-          id='inputMinimizeToTray'
-          ref='minimizeToTray'
-          disabled={!this.state.showTrayIcon || !this.state.trayWasVisible}
-          checked={this.state.minimizeToTray}
-          onChange={this.handleChangeMinimizeToTray}
-        >{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)'}</Checkbox>);
-    }
-
-    if (process.platform === 'win32') {
-      options.push(
-        <Checkbox
-          key='inputToggleWindowOnTrayIconClick'
-          id='inputToggleWindowOnTrayIconClick'
-          ref='toggleWindowOnTrayIconClick'
-          checked={this.state.toggleWindowOnTrayIconClick}
-          onChange={this.handleChangeToggleWindowOnTrayIconClick}
-        >{'Toggle window visibility when clicking on the tray icon.'}</Checkbox>);
-    }
+    options.push(
+      <Checkbox
+        key='inputDisableWebSecurity'
+        id='inputDisableWebSecurity'
+        ref='disablewebsecurity'
+        checked={!this.state.disablewebsecurity}
+        onChange={this.handleChangeDisableWebSecurity}
+      >{'Display secure content only'}
+        <HelpBlock>
+          {'If enabled, the app only displays secure (HTTPS/SSL) content.'}
+          {' '}
+          {'If disabled, the app displays secure and non-secure (HTTP) content such as images.'}
+        </HelpBlock>
+      </Checkbox>);

    if (process.platform === 'darwin' || process.platform === 'win32') {
      options.push(
@@ -294,7 +230,11 @@ const SettingsPage = React.createClass({
          ref='showUnreadBadge'
          checked={this.state.showUnreadBadge}
          onChange={this.handleShowUnreadBadge}
-        >{'Show red badge on taskbar icon to indicate unread messages. Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon.'}</Checkbox>);
+        >{'Show red badge on taskbar icon to indicate unread messages'}
+          <HelpBlock>
+            {'Regardless of this setting, mentions are always indicated with a red badge and item count on the taskbar icon.'}
+          </HelpBlock>
+        </Checkbox>);
    }

    if (process.platform === 'win32' || process.platform === 'linux') {
@@ -305,7 +245,75 @@ const SettingsPage = React.createClass({
          ref='flashWindow'
          checked={this.state.notifications.flashWindow === 2}
          onChange={this.handleFlashWindow}
-        >{'Flash the taskbar icon when a new message is received.'}</Checkbox>);
+        >{'Flash taskbar icon when a new message is received'}
+          <HelpBlock>
+            {'If enabled, taskbar icon flashes for a few seconds when a new message is received.'}
+          </HelpBlock>
+        </Checkbox>);
+    }
+
+    if (process.platform === 'darwin' || process.platform === 'linux') {
+      options.push(
+        <Checkbox
+          key='inputShowTrayIcon'
+          id='inputShowTrayIcon'
+          ref='showTrayIcon'
+          checked={this.state.showTrayIcon}
+          onChange={this.handleChangeShowTrayIcon}
+        >{process.platform === 'darwin' ?
+          'Show Mattermost icon in the menu bar' :
+          'Show icon in the notification area'}
+          <HelpBlock>
+            {'Setting takes effect after restarting the app.'}
+          </HelpBlock>
+        </Checkbox>);
+    }
+    if (process.platform === 'linux') {
+      options.push(
+        <FormGroup
+          key='trayIconTheme'
+          style={{marginLeft: '20px'}}
+        >
+          {'Icon theme: '}
+          <Radio
+            inline={true}
+            name='trayIconTheme'
+            value='light'
+            defaultChecked={this.state.trayIconTheme === 'light' || this.state.trayIconTheme === ''}
+            onChange={() => {
+              this.setState({trayIconTheme: 'light'});
+            }}
+          >{'Light'}</Radio>
+          {' '}
+          <Radio
+            inline={true}
+            name='trayIconTheme'
+            value='dark'
+            defaultChecked={this.state.trayIconTheme === 'dark'}
+            onChange={() => {
+              this.setState({trayIconTheme: 'dark'});
+            }}
+          >{'Dark'}</Radio>
+        </FormGroup>
+      );
+    }
+
+    if (process.platform === 'linux') {
+      options.push(
+        <Checkbox
+          key='inputMinimizeToTray'
+          id='inputMinimizeToTray'
+          ref='minimizeToTray'
+          disabled={!this.state.showTrayIcon || !this.state.trayWasVisible}
+          checked={this.state.minimizeToTray}
+          onChange={this.handleChangeMinimizeToTray}
+        >
+          {'Leave app running in notification area when application window is closed'}
+          <HelpBlock>
+            {'If enabled, the app stays running in the notification area after app window is closed.'}
+            {this.state.trayWasVisible || !this.state.showTrayIcon ? '' : ' Setting takes effect after restarting the app.'}
+          </HelpBlock>
+        </Checkbox>);
    }

    const settingsPage = {
@@ -345,7 +353,7 @@ const SettingsPage = React.createClass({
    var optionsRow = (options.length > 0) ? (
      <Row>
        <Col md={12}>
-          <h2 style={settingsPage.sectionHeading}>{'App options'}</h2>
+          <h2 style={settingsPage.sectionHeading}>{'App Options'}</h2>
          { options.map((opt, i) => (
            <FormGroup key={`fromGroup${i}`}>
              {opt}
--- a/src/browser/css/settings.css
+++ b/src/browser/css/settings.css
@@ -0,0 +1,4 @@
+
+.checkbox > label {
+  width: 100%;
+}
--- a/src/browser/settings.html
+++ b/src/browser/settings.html
@@ -6,6 +6,7 @@
  <title>Settings</title>
  <link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/index.css">
+  <link rel="stylesheet" href="css/settings.css">
 </head>

 <body>
--- a/src/common/settings.js
+++ b/src/common/settings.js
@@ -16,12 +16,10 @@ function loadDefault(version) {
  case 1:
    return {
      teams: [],
-      hideMenuBar: false,
      showTrayIcon: false,
      trayIconTheme: 'light',
      disablewebsecurity: true,
      minimizeToTray: false,
-      toggleWindowOnTrayIconClick: false,
      version: 1,
      notifications: {
        flashWindow: 0 // 0 = flash never, 1 = only when idle (after 10 seconds), 2 = always
--- a/src/main.js
+++ b/src/main.js
@@ -254,16 +254,6 @@ app.on('window-all-closed', () => {
  }
 });

-// For win32, auto-hide menu bar.
-app.on('browser-window-created', (event, window) => {
-  if (process.platform === 'win32' || process.platform === 'linux') {
-    if (config.hideMenuBar) {
-      window.setAutoHideMenuBar(true);
-      window.setMenuBarVisibility(false);
-    }
-  }
-});
-
 // For OSX, show hidden mainWindow when clicking dock icon.
 app.on('activate', () => {
  mainWindow.show();
@@ -366,8 +356,6 @@ app.on('ready', () => {
        if (process.platform === 'darwin') {
          app.dock.show();
        }
-      } else if ((process.platform === 'win32') && config.toggleWindowOnTrayIconClick) {
-        mainWindow.minimize();
      } else {
        mainWindow.focus();
      }
@@ -561,9 +549,6 @@ app.on('ready', () => {
        break;
      case 'darwin':
        hideWindow(mainWindow);
-        if (config.minimizeToTray) {
-          app.dock.hide();
-        }
        break;
      default:
      }
--- a/test/specs/browser/settings_test.js
+++ b/test/specs/browser/settings_test.js
@@ -66,7 +66,7 @@ describe('browser/settings.html', function desc() {
  });

  describe('Options', () => {
-    describe('Hide Menu Bar', () => {
+    describe.skip('Hide Menu Bar', () => {
      it('should appear on win32 or linux', () => {
        const expected = (process.platform === 'win32' || process.platform === 'linux');
        env.addClientCommands(this.app.client);
@@ -105,10 +105,10 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Allow mixed content', () => {
+    describe('Display secure content only', () => {
      [true, false].forEach((v) => {
        it(`should be saved and loaded: ${v}`, () => {
-          const webPreferences = v ? 'allowDisplayingInsecureContent' : '';
+          const webPreferences = v ? '' : 'allowDisplayingInsecureContent';
          env.addClientCommands(this.app.client);

          return this.app.client.
@@ -123,7 +123,7 @@ describe('browser/settings.html', function desc() {
            click('#btnSave').
            pause(1000).then(() => {
              const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
-              savedConfig.disablewebsecurity.should.equal(v);
+              savedConfig.disablewebsecurity.should.equal(!v);
            }).
            getAttribute('.mattermostView', 'webpreferences').then((disablewebsecurity) => { // confirm actual behavior
              // disablewebsecurity is an array of String
@@ -157,7 +157,7 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Show tray icon', () => {
+    describe('Show icon in menu bar / notification area', () => {
      it('should appear on darwin or linux', () => {
        const expected = (process.platform === 'darwin' || process.platform === 'linux');
        env.addClientCommands(this.app.client);
@@ -167,9 +167,9 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Minimize to tray', () => {
-      it('should appear on darwin or linux', () => {
-        const expected = (process.platform === 'darwin' || process.platform === 'linux');
+    describe('Leave app running in notification area when application window is closed', () => {
+      it('should appear on linux', () => {
+        const expected = (process.platform === 'linux');
        env.addClientCommands(this.app.client);
        return this.app.client.
          loadSettingsPage().
@@ -177,7 +177,7 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Toggle window visibility when clicking on the tray icon', () => {
+    describe.skip('Toggle window visibility when clicking on the tray icon', () => {
      it('should appear on win32', () => {
        const expected = (process.platform === 'win32');
        env.addClientCommands(this.app.client);
@@ -187,7 +187,7 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Flash taskbar icon on new messages', () => {
+    describe('Flash taskbar icon when a new message is received', () => {
      it('should appear on win32 and linux', () => {
        const expected = (process.platform === 'win32' || process.platform === 'linux');
        env.addClientCommands(this.app.client);
@@ -197,7 +197,7 @@ describe('browser/settings.html', function desc() {
      });
    });

-    describe('Show red icon for unread', () => {
+    describe('Show red badge on taskbar icon to indicate unread messages', () => {
      it('should appear on darwin or win32', () => {
        const expected = (process.platform === 'darwin' || process.platform === 'win32');
        env.addClientCommands(this.app.client);