Improve settings UI

src/browser/settings.jsx

@@ -9,7 +9,7 @@ const settings = require('../common/settings');
 
 const React = require('react');
 const ReactDOM = require('react-dom');
-const {Grid, Row, Col, Input, Button, ListGroup, ListGroupItem, Glyphicon, HelpBlock} = require('react-bootstrap');
+const {Grid, Row, Col, Input, Button, ListGroup, ListGroupItem, Glyphicon, HelpBlock, Navbar, Nav} = require('react-bootstrap');
 var AutoLaunch = require('auto-launch');
 
 
@@ -140,10 +140,10 @@ var SettingsPage = React.createClass({
       showAddTeamForm: !this.state.showAddTeamForm
     });
   },
-  handleFlashWindowSetting: function(item) {
+  handleFlashWindow: function() {
     this.setState({
       notifications: {
-        flashWindow: item.state
+        flashWindow: this.refs.flashWindow.getChecked() ? 2 : 0
       }
     });
   },
@@ -199,78 +199,54 @@ var SettingsPage = React.createClass({
                      checked={ this.state.showUnreadBadge } onChange={ this.handleShowUnreadBadge } />);
     }
 
+    if (process.platform === 'win32' || process.platform === 'linux') {
+      options.push(<Input key="flashWindow" id="inputflashWindow" ref="flashWindow" type="checkbox" label="Flash the taskbar icon when a new message is received." checked={ this.state.notifications.flashWindow === 2 }
+                     onChange={ this.handleFlashWindow } />);
+    }
+
     var options_row = (options.length > 0) ? (
       <Row>
         <Col md={ 12 }>
-        <h2>Options</h2>
+        <h2>App options</h2>
         { options }
         </Col>
       </Row>
       ) : null;
 
-    var notifications_row = null;
-    if (process.platform === 'win32' || process.platform === 'linux') {
-      var notificationSettings = [
-        {
-          label: 'Never',
-          state: 0
-        },
-        /* ToDo: Idle isn't implemented yet
-        {
-          label: 'Only when idle (after 10 seconds)',
-          state: 1
-        },*/
-        {
-          label: 'Always',
-          state: 2
-        }
-      ];
-
-      var that = this;
-      var notificationElements = notificationSettings.map(function(item) {
-        var boundClick = that.handleFlashWindowSetting.bind(that, item);
     return (
-          <Input key={ "flashWindow" + item.state } name="handleFlashWindow" ref={ "flashWindow" + item.state } type="radio" label={ item.label } value={ item.state } onChange={ boundClick }
-            checked={ that.state.notifications.flashWindow == item.state ? "checked" : "" } />
-          );
-      });
-
-      notifications_row = (
-        <Row id="notificationsRow">
-          <Col md={ 12 }>
-          <h3>Notifications</h3> Flash the taskbar icon when a new message is received.
-          { notificationElements }
-          </Col>
-        </Row>
-      );
-    }
-
-    return (
-      <Grid className="settingsPage">
+      <div>
+        <Navbar className="navbar-fixed-top">
+          <Navbar.Header>
+            <h1>Settings</h1>
+          </Navbar.Header>
+        </Navbar>
+        <Grid className="settingsPage" style={ { 'padding-top': '70px' } }>
           <Row>
-          <Col xs={ 4 } sm={ 2 } md={ 2 } lg={ 1 }>
-          <h2>Teams</h2>
+            <Col md={ 10 } xs={ 8 }>
+            <h2>Team Management</h2>
             </Col>
-          <Col xs={ 8 } sm={ 10 } md={ 10 } lg={ 11 }>
-          <Button bsSize="small" style={ { marginTop: 20 } } onClick={ this.toggleShowTeamForm }>
-            <Glyphicon glyph="plus" />
-          </Button>
+            <Col md={ 2 } xs={ 4 }>
+            <p className="text-right"><a href="#" onClick={ this.toggleShowTeamForm }>⊞ Add new team</a></p>
             </Col>
           </Row>
           { teams_row }
           { options_row }
-        { notifications_row }
           <div>
             <hr />
           </div>
           <Row>
             <Col md={ 12 }>
-          <Button id="btnCancel" onClick={ this.handleCancel }>Cancel</Button>
-          { ' ' }
-          <Button id="btnSave" bsStyle="primary" onClick={ this.handleSave } disabled={ this.state.teams.length === 0 }>Save</Button>
             </Col>
           </Row>
         </Grid>
+        <Navbar className="navbar-fixed-bottom">
+          <Nav className="navbar-right">
+            <button id="btnCancel" className="btn navbar-btn" onClick={ this.handleCancel }>Cancel</button>
+            { ' ' }
+            <button id="btnSave" className="btn btn-primary navbar-btn" bsStyle="primary" onClick={ this.handleSave } disabled={ this.state.teams.length === 0 }>Save</button>
+          </Nav>
+        </Navbar>
+      </div>
       );
   }
 });
@@ -380,13 +356,9 @@ var TeamListItem = React.createClass({
           </p>
         </div>
         <div className="pull-right">
-          <Button bsSize="xsmall" onClick={ this.handleTeamEditing }>
-            <Glyphicon glyph="pencil" />
-          </Button>
-          { ' ' }
-          <Button bsSize="xsmall" onClick={ this.handleTeamRemove }>
-            <Glyphicon glyph="remove" />
-          </Button>
+          <small><a hre="#" onClick={ this.handleTeamEditing }>Edit</a></small>
+          { ' - ' }
+          <small><a hre="#" onClick={ this.handleTeamRemove }>Remove</a></small>
         </div>
       </div>
       );

test/specs/browser/settings_test.js

@@ -171,13 +171,13 @@ describe('browser/settings.html', function() {
       });
     });
 
-    describe('Notifications', function() {
+    describe('Flash taskbar icon on new messages', function() {
       it('should appear on win32 and linux', function() {
         const expected = (process.platform === 'win32' || process.platform === 'linux');
         env.addClientCommands(this.app.client);
         return this.app.client
           .loadSettingsPage()
-          .isExisting('#notificationsRow').should.eventually.equal(expected)
+          .isExisting('#inputflashWindow').should.eventually.equal(expected)
       });
     });