phlux/mattermostest
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Use latest react-bootstrap

Browse Source
This commit is contained in:
Yuya Ochiai
2016-11-03 00:35:07 +09:00
parent fd05a9d258
commit 1752cec20d
4 changed files with 51 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/browser/components/SettingsPage.jsx
View File

@@ -1,5 +1,5 @@
const React = require('react'); const React = require('react');
const {Col, Grid, Navbar, Input, Row} = require('react-bootstrap'); const {Button, Checkbox, Col, FormGroup, Grid, Navbar, Row} = require('react-bootstrap');
const {ipcRenderer, remote} = require('electron'); const {ipcRenderer, remote} = require('electron');
const AutoLaunch = require('auto-launch'); const AutoLaunch = require('auto-launch');
@@ -92,16 +92,16 @@ const SettingsPage = React.createClass({
}, },
handleChangeDisableWebSecurity() { handleChangeDisableWebSecurity() {
this.setState({ this.setState({
disablewebsecurity: this.refs.disablewebsecurity.getChecked() disablewebsecurity: !this.refs.disablewebsecurity.props.checked
}); });
}, },
handleChangeHideMenuBar() { handleChangeHideMenuBar() {
this.setState({ this.setState({
hideMenuBar: this.refs.hideMenuBar.getChecked() hideMenuBar: !this.refs.hideMenuBar.props.checked
}); });
}, },
handleChangeShowTrayIcon() { handleChangeShowTrayIcon() {
var shouldShowTrayIcon = this.refs.showTrayIcon.getChecked(); var shouldShowTrayIcon = !this.refs.showTrayIcon.props.checked;
this.setState({ this.setState({
showTrayIcon: shouldShowTrayIcon showTrayIcon: shouldShowTrayIcon
}); });
@@ -114,18 +114,18 @@ const SettingsPage = React.createClass({
}, },
handleChangeTrayIconTheme() { handleChangeTrayIconTheme() {
this.setState({ this.setState({
trayIconTheme: this.refs.trayIconTheme.getValue() trayIconTheme: !this.refs.trayIconTheme.props.checked
}); });
}, },
handleChangeAutoStart() { handleChangeAutoStart() {
this.setState({ this.setState({
autostart: this.refs.autostart.getChecked() autostart: !this.refs.autostart.props.checked
}); });
}, },
handleChangeMinimizeToTray() { handleChangeMinimizeToTray() {
var shouldMinimizeToTray = var shouldMinimizeToTray =
(process.platform !== 'darwin' || this.refs.showTrayIcon.getChecked()) && (process.platform !== 'darwin' || !this.refs.showTrayIcon.props.checked) &&
this.refs.minimizeToTray.getChecked(); !this.refs.minimizeToTray.props.checked;
this.setState({ this.setState({
minimizeToTray: shouldMinimizeToTray minimizeToTray: shouldMinimizeToTray
@@ -133,7 +133,7 @@ const SettingsPage = React.createClass({
}, },
handleChangeToggleWindowOnTrayIconClick() { handleChangeToggleWindowOnTrayIconClick() {
this.setState({ this.setState({
toggleWindowOnTrayIconClick: this.refs.toggleWindowOnTrayIconClick.getChecked() toggleWindowOnTrayIconClick: !this.refs.toggleWindowOnTrayIconClick.props.checked
}); });
}, },
toggleShowTeamForm() { toggleShowTeamForm() {
@@ -144,13 +144,13 @@ const SettingsPage = React.createClass({
handleFlashWindow() { handleFlashWindow() {
this.setState({ this.setState({
notifications: { notifications: {
flashWindow: this.refs.flashWindow.getChecked() ? 2 : 0 flashWindow: this.refs.flashWindow.props.checked ? 0 : 2
} }
}); });
}, },
handleShowUnreadBadge() { handleShowUnreadBadge() {
this.setState({ this.setState({
showUnreadBadge: this.refs.showUnreadBadge.getChecked() showUnreadBadge: !this.refs.showUnreadBadge.props.checked
}); });
}, },
render() { render() {
@@ -169,120 +169,103 @@ const SettingsPage = React.createClass({
var options = []; var options = [];
if (process.platform === 'win32' || process.platform === 'linux') { if (process.platform === 'win32' || process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='inputHideMenuBar' key='inputHideMenuBar'
id='inputHideMenuBar' id='inputHideMenuBar'
ref='hideMenuBar' ref='hideMenuBar'
type='checkbox'
label='Hide menu bar (Press Alt to show menu bar)'
checked={this.state.hideMenuBar} checked={this.state.hideMenuBar}
onChange={this.handleChangeHideMenuBar} onChange={this.handleChangeHideMenuBar}
/>); >{'Hide menu bar (Press Alt to show menu bar)'}</Checkbox>);
} }
if (process.platform === 'darwin' || process.platform === 'linux') { if (process.platform === 'darwin' || process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='inputShowTrayIcon' key='inputShowTrayIcon'
id='inputShowTrayIcon' id='inputShowTrayIcon'
ref='showTrayIcon' ref='showTrayIcon'
type='checkbox'
label={process.platform === 'darwin' ?
'Show icon on menu bar (need to restart the application)' :
'Show icon in notification area (need to restart the application)'}
checked={this.state.showTrayIcon} checked={this.state.showTrayIcon}
onChange={this.handleChangeShowTrayIcon} 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') { if (process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='inputTrayIconTheme' key='inputTrayIconTheme'
ref='trayIconTheme' ref='trayIconTheme'
type='select' type='select'
label='Icon theme (Need to restart the application)'
value={this.state.trayIconTheme} value={this.state.trayIconTheme}
onChange={this.handleChangeTrayIconTheme} onChange={this.handleChangeTrayIconTheme}
> >{'Icon theme (Need to restart the application)'}
<option value='light'>{'Light'}</option> <option value='light'>{'Light'}</option>
<option value='dark'>{'Dark'}</option> <option value='dark'>{'Dark'}</option>
</Input>); </Checkbox>);
} }
options.push( options.push(
<Input <Checkbox
key='inputDisableWebSecurity' key='inputDisableWebSecurity'
id='inputDisableWebSecurity' id='inputDisableWebSecurity'
ref='disablewebsecurity' ref='disablewebsecurity'
type='checkbox'
label='Allow mixed content (Enabling allows both secure and insecure content, images and scripts to render and execute. Disabling allows only secure content.)'
checked={this.state.disablewebsecurity} checked={this.state.disablewebsecurity}
onChange={this.handleChangeDisableWebSecurity} 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 //OSX 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') { if (process.platform === 'win32' || process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='inputAutoStart' key='inputAutoStart'
id='inputAutoStart' id='inputAutoStart'
ref='autostart' ref='autostart'
type='checkbox'
label='Start app on login.'
checked={this.state.autostart} checked={this.state.autostart}
onChange={this.handleChangeAutoStart} onChange={this.handleChangeAutoStart}
/>); >{'Start app on login.'}</Checkbox>);
} }
if (process.platform === 'darwin' || process.platform === 'linux') { if (process.platform === 'darwin' || process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='inputMinimizeToTray' key='inputMinimizeToTray'
id='inputMinimizeToTray' id='inputMinimizeToTray'
ref='minimizeToTray' 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} disabled={!this.state.showTrayIcon || !this.state.trayWasVisible}
checked={this.state.minimizeToTray} checked={this.state.minimizeToTray}
onChange={this.handleChangeMinimizeToTray} 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') { if (process.platform === 'win32') {
options.push( options.push(
<Input <Checkbox
key='inputToggleWindowOnTrayIconClick' key='inputToggleWindowOnTrayIconClick'
id='inputToggleWindowOnTrayIconClick' id='inputToggleWindowOnTrayIconClick'
ref='toggleWindowOnTrayIconClick' ref='toggleWindowOnTrayIconClick'
type='checkbox'
label='Toggle window visibility when clicking on the tray icon.'
checked={this.state.toggleWindowOnTrayIconClick} checked={this.state.toggleWindowOnTrayIconClick}
onChange={this.handleChangeToggleWindowOnTrayIconClick} onChange={this.handleChangeToggleWindowOnTrayIconClick}
/>); >{'Toggle window visibility when clicking on the tray icon.'}</Checkbox>);
} }
if (process.platform === 'darwin' || process.platform === 'win32') { if (process.platform === 'darwin' || process.platform === 'win32') {
options.push( options.push(
<Input <Checkbox
key='inputShowUnreadBadge' key='inputShowUnreadBadge'
id='inputShowUnreadBadge' id='inputShowUnreadBadge'
ref='showUnreadBadge' ref='showUnreadBadge'
type='checkbox'
label='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.'
checked={this.state.showUnreadBadge} checked={this.state.showUnreadBadge}
onChange={this.handleShowUnreadBadge} 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>);
} }
if (process.platform === 'win32' || process.platform === 'linux') { if (process.platform === 'win32' || process.platform === 'linux') {
options.push( options.push(
<Input <Checkbox
key='flashWindow' key='flashWindow'
id='inputflashWindow' id='inputflashWindow'
ref='flashWindow' ref='flashWindow'
type='checkbox'
label='Flash the taskbar icon when a new message is received.'
checked={this.state.notifications.flashWindow === 2} checked={this.state.notifications.flashWindow === 2}
onChange={this.handleFlashWindow} onChange={this.handleFlashWindow}
/>); >{'Flash the taskbar icon when a new message is received.'}</Checkbox>);
} }
const settingsPage = { const settingsPage = {
@@ -323,7 +306,11 @@ const SettingsPage = React.createClass({
<Row> <Row>
<Col md={12}> <Col md={12}>
<h2 style={settingsPage.sectionHeading}>{'App options'}</h2> <h2 style={settingsPage.sectionHeading}>{'App options'}</h2>
{ options } { options.map((opt, i) => (
<FormGroup key={`fromGroup${i}`}>
{opt}
</FormGroup>
)) }
</Col> </Col>
</Row> </Row>
) : null; ) : null;
@@ -377,19 +364,19 @@ const SettingsPage = React.createClass({
className='text-right' className='text-right'
style={settingsPage.footer} style={settingsPage.footer}
> >
<button <Button
id='btnCancel' id='btnCancel'
className='btn btn-link' className='btn-link'
onClick={this.handleCancel} onClick={this.handleCancel}
>{'Cancel'}</button> >{'Cancel'}</Button>
{ ' ' } { ' ' }
<button <Button
id='btnSave' id='btnSave'
className='btn btn-primary navbar-btn' className='navbar-btn'
bsStyle='primary' bsStyle='primary'
onClick={this.handleSave} onClick={this.handleSave}
disabled={this.state.teams.length === 0} disabled={this.state.teams.length === 0}
>{'Save'}</button> >{'Save'}</Button>
</div> </div>
</Navbar> </Navbar>
</div> </div>

2
src/browser/components/TeamList.jsx
View File

@@ -96,7 +96,7 @@ const TeamList = React.createClass({
} }
return ( return (
<ListGroup class='teamList'> <ListGroup className='teamList'>
{ teamNodes } { teamNodes }
{ addTeamForm } { addTeamForm }
</ListGroup> </ListGroup>

2
src/package.json
View File

@@ -21,7 +21,7 @@
"electron-squirrel-startup": "^1.0.0", "electron-squirrel-startup": "^1.0.0",
"os-locale": "^1.4.0", "os-locale": "^1.4.0",
"react": "^15.3.0", "react": "^15.3.0",
"react-bootstrap": "~0.29.0", "react-bootstrap": "~0.30.6",
"react-dom": "^15.3.0", "react-dom": "^15.3.0",
"yargs": "^3.32.0" "yargs": "^3.32.0"
} }

12
test/specs/browser/settings_test.js
View File

@@ -65,9 +65,9 @@ describe('browser/settings.html', function desc() {
return this.app.client. return this.app.client.
loadSettingsPage(). loadSettingsPage().
scroll('#inputHideMenuBar'). scroll('#inputHideMenuBar').
isSelected('#inputHideMenuBar input').then((isSelected) => { isSelected('#inputHideMenuBar').then((isSelected) => {
if (isSelected !== v) { if (isSelected !== v) {
return this.app.client.click('#inputHideMenuBar input'); return this.app.client.click('#inputHideMenuBar');
} }
return true; return true;
}). }).
@@ -83,7 +83,7 @@ describe('browser/settings.html', function desc() {
return this.app.client. // confirm actual behavior return this.app.client. // confirm actual behavior
browserWindow.isMenuBarAutoHide().should.eventually.equal(v). browserWindow.isMenuBarAutoHide().should.eventually.equal(v).
loadSettingsPage(). loadSettingsPage().
isSelected('#inputHideMenuBar input').should.eventually.equal(v); isSelected('#inputHideMenuBar').should.eventually.equal(v);
}); });
}); });
}); });
@@ -98,9 +98,9 @@ describe('browser/settings.html', function desc() {
return this.app.client. return this.app.client.
loadSettingsPage(). loadSettingsPage().
scroll('#inputDisableWebSecurity'). scroll('#inputDisableWebSecurity').
isSelected('#inputDisableWebSecurity input').then((isSelected) => { isSelected('#inputDisableWebSecurity').then((isSelected) => {
if (isSelected !== v) { if (isSelected !== v) {
return this.app.client.click('#inputDisableWebSecurity input'); return this.app.client.click('#inputDisableWebSecurity');
} }
return true; return true;
}). }).
@@ -125,7 +125,7 @@ describe('browser/settings.html', function desc() {
}); });
}). }).
loadSettingsPage(). loadSettingsPage().
isSelected('#inputDisableWebSecurity input').should.eventually.equal(v); isSelected('#inputDisableWebSecurity').should.eventually.equal(v);
}); });
}); });
}); });