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

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

Browse Source 
Improve messages and options in "App Options" section
This commit is contained in:
Yuya Ochiai
2017-02-17 19:52:14 +09:00
committed by GitHub
parent 3bc7d389b0 e1a2175bcd
commit e4d1ab2938
6 changed files with 115 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}

4
src/browser/css/settings.css Normal file
View File

@@ -0,0 +1,4 @@
.checkbox > label {
width: 100%;
}

1
src/browser/settings.html
View File

@@ -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>

2
src/common/settings.js
View File

@@ -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

15
src/main.js
View File

@@ -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:
}

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

@@ -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);