React bootstrap upgrade to v1, migrate to react-beautiful-dnd (#1639)
* Upgrade packages, fix errors, still WIP * WIP * Bootstrap v4 upgrade * Switch to react-beautiful-dnd * Fixed some issues * Added to generate signed Mac build for UX * PR feedback * Missed one * PR feedback
This commit is contained in:
Devin Binnie
GitHub
parent
86a3f13a6b
commit
4130c2c37d
|
|
@ -446,6 +446,7 @@ workflows:
|
|||
branches:
|
||||
only:
|
||||
- /^release-\d+(\.\d+){1,2}(-rc.*)?/
|
||||
- react_bootstrap_upgrade
|
||||
|
||||
- store_artifacts:
|
||||
# for master/PR builds
|
||||
|
|
@ -453,6 +454,7 @@ workflows:
|
|||
- build-linux
|
||||
- build-win-no-installer
|
||||
- build-mac-no-dmg
|
||||
- mac_installer
|
||||
filters:
|
||||
branches:
|
||||
ignore:
|
||||
|
|
|
|||
718
package-lock.json
generated
718
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -70,7 +70,7 @@
|
|||
"@types/electron-devtools-installer": "^2.2.0",
|
||||
"@types/hapi__joi": "^17.1.6",
|
||||
"@types/react": "^17.0.11",
|
||||
"@types/react-bootstrap": "^0.32.25",
|
||||
"@types/react-beautiful-dnd": "^13.0.0",
|
||||
"@types/react-dom": "^17.0.8",
|
||||
"@types/underscore": "^1.11.2",
|
||||
"@types/valid-url": "^1.0.3",
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
"dependencies": {
|
||||
"@hapi/joi": "^16.1.8",
|
||||
"auto-launch": "^5.0.5",
|
||||
"bootstrap": "^3.3.7",
|
||||
"bootstrap": "^4.6.0",
|
||||
"brace-expansion": "^2.0.0",
|
||||
"classnames": "^2.3.1",
|
||||
"electron-context-menu": "^2.5.0",
|
||||
|
|
@ -132,9 +132,9 @@
|
|||
"font-awesome": "^4.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "^16.14.0",
|
||||
"react-bootstrap": "~0.32.4",
|
||||
"react-beautiful-dnd": "^13.1.0",
|
||||
"react-bootstrap": "^1.6.1",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-smooth-dnd": "github:mattermost/react-smooth-dnd#af6b471295007274560a375799622c1cd52d678a",
|
||||
"react-transition-group": "^2.5.0",
|
||||
"semver": "^5.5.0",
|
||||
"underscore": "^1.9.1",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export default function AutoSaveIndicator(props: Props) {
|
|||
<Alert
|
||||
className={className}
|
||||
{...rest}
|
||||
bsStyle={savingState === 'error' ? 'danger' : 'info'}
|
||||
variant={savingState === 'error' ? 'danger' : 'info'}
|
||||
>
|
||||
{message}
|
||||
</Alert>
|
||||
|
|
|
|||
|
|
@ -14,15 +14,15 @@ storiesOf('Button', module).
|
|||
<Button onClick={action('clicked default')}>{'Default'}</Button>
|
||||
<Button
|
||||
onClick={action('clicked primary')}
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
>{'Primary'}</Button>
|
||||
<Button
|
||||
onClick={action('clicked danger')}
|
||||
bsStyle='danger'
|
||||
variant='danger'
|
||||
>{'Danger'}</Button>
|
||||
<Button
|
||||
onClick={action('clicked link')}
|
||||
bsStyle='link'
|
||||
variant='link'
|
||||
>{'Link'}</Button>
|
||||
</ButtonToolbar>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ type Props = {
|
|||
acceptLabel: string;
|
||||
cancelLabel: string;
|
||||
onHide: () => void;
|
||||
onAccept: React.MouseEventHandler<Button>;
|
||||
onCancel: React.MouseEventHandler<Button>;
|
||||
onAccept: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onCancel: React.MouseEventHandler<HTMLButtonElement>;
|
||||
};
|
||||
|
||||
export default function DestructiveConfirmationModal(props: Props) {
|
||||
|
|
@ -36,11 +36,11 @@ export default function DestructiveConfirmationModal(props: Props) {
|
|||
{body}
|
||||
<Modal.Footer>
|
||||
<Button
|
||||
bsStyle='link'
|
||||
variant='link'
|
||||
onClick={onCancel}
|
||||
>{cancelLabel}</Button>
|
||||
<Button
|
||||
bsStyle='danger'
|
||||
variant='danger'
|
||||
onClick={onAccept}
|
||||
>{acceptLabel}</Button>
|
||||
</Modal.Footer>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// ErrorCode: https://code.google.com/p/chromium/codesearch#chromium/src/net/base/net_error_list.h
|
||||
|
||||
import React from 'react';
|
||||
import {Grid, Row, Col} from 'react-bootstrap';
|
||||
import {Container, Row, Col} from 'react-bootstrap';
|
||||
|
||||
type Props = {
|
||||
errorInfo?: string;
|
||||
|
|
@ -22,9 +22,8 @@ export default function ErrorView(props: Props) {
|
|||
}
|
||||
|
||||
return (
|
||||
<Grid
|
||||
<Container
|
||||
id={props.id}
|
||||
bsClass={classNames.join(' ')}
|
||||
>
|
||||
<div className='ErrorView-table'>
|
||||
<div className='ErrorView-cell'>
|
||||
|
|
@ -82,6 +81,6 @@ export default function ErrorView(props: Props) {
|
|||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@ export default class ExtraBar extends React.PureComponent<Props> {
|
|||
onClick={this.handleBack}
|
||||
>
|
||||
<Button
|
||||
bsStyle={'link'}
|
||||
bsSize={'xsmall'}
|
||||
variant={'link'}
|
||||
size={'sm'}
|
||||
>
|
||||
<span className={'backIcon fa fa-1x fa-angle-left'}/>
|
||||
<span className={'backLabel'}>
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
// See LICENSE.txt for license information.
|
||||
|
||||
import React, {Fragment} from 'react';
|
||||
import {Grid, Row} from 'react-bootstrap';
|
||||
import {Container, Row} from 'react-bootstrap';
|
||||
import {DropResult} from 'react-beautiful-dnd';
|
||||
import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
|
||||
import {IpcRendererEvent} from 'electron/renderer';
|
||||
import {DropResult} from 'react-smooth-dnd';
|
||||
|
||||
import {Team} from 'types/config';
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ enum Status {
|
|||
type Props = {
|
||||
teams: Team[];
|
||||
showAddServerButton: boolean;
|
||||
moveTabs: (originalOrder: number, newOrder: number) => Promise<number | undefined>;
|
||||
moveTabs: (originalOrder: number, newOrder: number) => number | undefined;
|
||||
openMenu: () => void;
|
||||
darkMode: boolean;
|
||||
appName: string;
|
||||
|
|
@ -256,18 +256,17 @@ export default class MainPage extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
handleDragAndDrop = async (dropResult: DropResult) => {
|
||||
const {removedIndex, addedIndex} = dropResult;
|
||||
if (removedIndex === null || addedIndex === null) {
|
||||
const removedIndex = dropResult.source.index;
|
||||
const addedIndex = dropResult.destination?.index;
|
||||
if (addedIndex === undefined || removedIndex === addedIndex) {
|
||||
return;
|
||||
}
|
||||
if (removedIndex !== addedIndex) {
|
||||
const teamIndex = await this.props.moveTabs(removedIndex, addedIndex < this.props.teams.length ? addedIndex : this.props.teams.length - 1);
|
||||
if (!teamIndex) {
|
||||
return;
|
||||
}
|
||||
const name = this.props.teams[teamIndex].name;
|
||||
this.handleSelect(name, teamIndex);
|
||||
const teamIndex = this.props.moveTabs(removedIndex, addedIndex < this.props.teams.length ? addedIndex : this.props.teams.length - 1);
|
||||
if (!teamIndex) {
|
||||
return;
|
||||
}
|
||||
const name = this.props.teams[teamIndex].name;
|
||||
this.handleSelect(name, teamIndex);
|
||||
}
|
||||
|
||||
handleClose = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
|
|
@ -471,10 +470,10 @@ export default class MainPage extends React.PureComponent<Props, State> {
|
|||
className='MainPage'
|
||||
onClick={this.focusOnWebView}
|
||||
>
|
||||
<Grid fluid={true}>
|
||||
<Container fluid={true}>
|
||||
{topRow}
|
||||
{viewsRow}
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} from 'react-bootstrap';
|
||||
import {Modal, Button, FormGroup, FormControl, FormLabel, FormText} from 'react-bootstrap';
|
||||
|
||||
import {TeamWithIndex} from 'types/config';
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
|
|||
return this.getTeamNameValidationError() === null ? null : 'error';
|
||||
}
|
||||
|
||||
handleTeamNameChange = (e: React.ChangeEvent<FormControl & HTMLInputElement>) => {
|
||||
handleTeamNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({
|
||||
teamName: e.target.value,
|
||||
});
|
||||
|
|
@ -95,7 +95,7 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
|
|||
return this.getTeamUrlValidationError() === null ? null : 'error';
|
||||
}
|
||||
|
||||
handleTeamUrlChange = (e: React.ChangeEvent<FormControl & HTMLInputElement>) => {
|
||||
handleTeamUrlChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({
|
||||
teamUrl: e.target.value,
|
||||
});
|
||||
|
|
@ -165,7 +165,7 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
|
|||
onEntered={() => this.teamNameInputRef?.focus()}
|
||||
onHide={this.props.onClose}
|
||||
restoreFocus={this.props.restoreFocus}
|
||||
onKeyDown={(e) => {
|
||||
onKeyDown={(e: React.KeyboardEvent) => {
|
||||
switch (e.key) {
|
||||
case 'Enter':
|
||||
this.save();
|
||||
|
|
@ -186,47 +186,46 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
|
|||
|
||||
<Modal.Body>
|
||||
<form>
|
||||
<FormGroup
|
||||
validationState={this.getTeamNameValidationState()}
|
||||
>
|
||||
<ControlLabel>{'Server Display Name'}</ControlLabel>
|
||||
<FormGroup>
|
||||
<FormLabel>{'Server Display Name'}</FormLabel>
|
||||
<FormControl
|
||||
id='teamNameInput'
|
||||
type='text'
|
||||
value={this.state.teamName}
|
||||
placeholder='Server Name'
|
||||
onChange={this.handleTeamNameChange}
|
||||
inputRef={(ref) => {
|
||||
ref={(ref: HTMLInputElement) => {
|
||||
this.teamNameInputRef = ref;
|
||||
if (this.props.setInputRef) {
|
||||
this.props.setInputRef(ref);
|
||||
}
|
||||
}}
|
||||
onClick={(e) => {
|
||||
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
autoFocus={true}
|
||||
isInvalid={Boolean(this.getTeamNameValidationState())}
|
||||
/>
|
||||
<FormControl.Feedback/>
|
||||
<HelpBlock>{'The name of the server displayed on your desktop app tab bar.'}</HelpBlock>
|
||||
<FormText>{'The name of the server displayed on your desktop app tab bar.'}</FormText>
|
||||
</FormGroup>
|
||||
<FormGroup
|
||||
className='NewTeamModal-noBottomSpace'
|
||||
validationState={this.getTeamUrlValidationState()}
|
||||
>
|
||||
<ControlLabel>{'Server URL'}</ControlLabel>
|
||||
<FormLabel>{'Server URL'}</FormLabel>
|
||||
<FormControl
|
||||
id='teamUrlInput'
|
||||
type='text'
|
||||
value={this.state.teamUrl}
|
||||
placeholder='https://example.com'
|
||||
onChange={this.handleTeamUrlChange}
|
||||
onClick={(e) => {
|
||||
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
isInvalid={Boolean(this.getTeamUrlValidationState())}
|
||||
/>
|
||||
<FormControl.Feedback/>
|
||||
<HelpBlock className='NewTeamModal-noBottomSpace'>{'The URL of your Mattermost server. Must start with http:// or https://.'}</HelpBlock>
|
||||
<FormText className='NewTeamModal-noBottomSpace'>{'The URL of your Mattermost server. Must start with http:// or https://.'}</FormText>
|
||||
</FormGroup>
|
||||
</form>
|
||||
</Modal.Body>
|
||||
|
|
@ -241,12 +240,13 @@ export default class NewTeamModal extends React.PureComponent<Props, State> {
|
|||
<Button
|
||||
id='cancelNewServerModal'
|
||||
onClick={this.props.onClose}
|
||||
variant='link'
|
||||
>{'Cancel'}</Button>
|
||||
<Button
|
||||
id='saveNewServerModal'
|
||||
onClick={this.save}
|
||||
disabled={!this.validateForm()}
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
>{this.getSaveButtonLabel()}</Button>
|
||||
</Modal.Footer>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {Button, Modal} from 'react-bootstrap';
|
||||
import {Modal} from 'react-bootstrap';
|
||||
|
||||
import DestructiveConfirmationModal from './DestructiveConfirmModal';
|
||||
|
||||
|
|
@ -11,8 +11,8 @@ type Props = {
|
|||
show: boolean;
|
||||
serverName: string;
|
||||
onHide: () => void;
|
||||
onAccept: React.MouseEventHandler<Button>;
|
||||
onCancel: React.MouseEventHandler<Button>;
|
||||
onAccept: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onCancel: React.MouseEventHandler<HTMLButtonElement>;
|
||||
}
|
||||
|
||||
export default function RemoveServerModal(props: Props) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import 'renderer/css/settings.css';
|
||||
|
||||
import React from 'react';
|
||||
import {Checkbox, Col, FormGroup, Grid, HelpBlock, Navbar, Radio, Row, Button} from 'react-bootstrap';
|
||||
import {FormCheck, Col, FormGroup, FormText, Container, Row, Button} from 'react-bootstrap';
|
||||
|
||||
import {debounce} from 'underscore';
|
||||
|
||||
|
|
@ -52,16 +52,16 @@ function backToIndex(serverName: string) {
|
|||
}
|
||||
|
||||
export default class SettingsPage extends React.PureComponent<Record<string, never>, State> {
|
||||
trayIconThemeRef: React.RefObject<FormGroup>;
|
||||
trayIconThemeRef: React.RefObject<HTMLDivElement>;
|
||||
downloadLocationRef: React.RefObject<HTMLInputElement>;
|
||||
showTrayIconRef: React.RefObject<Checkbox>;
|
||||
autostartRef: React.RefObject<Checkbox>;
|
||||
minimizeToTrayRef: React.RefObject<Checkbox>;
|
||||
flashWindowRef: React.RefObject<Checkbox>;
|
||||
bounceIconRef: React.RefObject<Checkbox>;
|
||||
showUnreadBadgeRef: React.RefObject<Checkbox>;
|
||||
useSpellCheckerRef: React.RefObject<Checkbox>;
|
||||
enableHardwareAccelerationRef: React.RefObject<Checkbox>;
|
||||
showTrayIconRef: React.RefObject<HTMLInputElement>;
|
||||
autostartRef: React.RefObject<HTMLInputElement>;
|
||||
minimizeToTrayRef: React.RefObject<HTMLInputElement>;
|
||||
flashWindowRef: React.RefObject<HTMLInputElement>;
|
||||
bounceIconRef: React.RefObject<HTMLInputElement>;
|
||||
showUnreadBadgeRef: React.RefObject<HTMLInputElement>;
|
||||
useSpellCheckerRef: React.RefObject<HTMLInputElement>;
|
||||
enableHardwareAccelerationRef: React.RefObject<HTMLInputElement>;
|
||||
|
||||
saveQueue: SaveQueueItem[];
|
||||
|
||||
|
|
@ -186,7 +186,7 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
}
|
||||
|
||||
handleChangeShowTrayIcon = () => {
|
||||
const shouldShowTrayIcon = !this.showTrayIconRef.current?.props.checked;
|
||||
const shouldShowTrayIcon = this.showTrayIconRef.current?.checked;
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'showTrayIcon', data: shouldShowTrayIcon});
|
||||
this.setState({
|
||||
showTrayIcon: shouldShowTrayIcon,
|
||||
|
|
@ -207,14 +207,14 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
}
|
||||
|
||||
handleChangeAutoStart = () => {
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'autostart', data: !this.autostartRef.current?.props.checked});
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'autostart', data: this.autostartRef.current?.checked});
|
||||
this.setState({
|
||||
autostart: !this.autostartRef.current?.props.checked,
|
||||
autostart: this.autostartRef.current?.checked,
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeMinimizeToTray = () => {
|
||||
const shouldMinimizeToTray = this.state.showTrayIcon && !this.minimizeToTrayRef.current?.props.checked;
|
||||
const shouldMinimizeToTray = this.state.showTrayIcon && !this.minimizeToTrayRef.current?.checked;
|
||||
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'minimizeToTray', data: shouldMinimizeToTray});
|
||||
this.setState({
|
||||
|
|
@ -240,13 +240,13 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
key: 'notifications',
|
||||
data: {
|
||||
...this.state.notifications,
|
||||
flashWindow: this.flashWindowRef.current?.props.checked ? 0 : 2,
|
||||
flashWindow: this.flashWindowRef.current?.checked ? 0 : 2,
|
||||
},
|
||||
});
|
||||
this.setState({
|
||||
notifications: {
|
||||
...this.state.notifications,
|
||||
flashWindow: this.flashWindowRef.current?.props.checked ? 0 : 2,
|
||||
flashWindow: this.flashWindowRef.current?.checked ? 0 : 2,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
@ -256,18 +256,18 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
key: 'notifications',
|
||||
data: {
|
||||
...this.state.notifications,
|
||||
bounceIcon: !this.bounceIconRef.current?.props.checked,
|
||||
bounceIcon: this.bounceIconRef.current?.checked,
|
||||
},
|
||||
});
|
||||
this.setState({
|
||||
notifications: {
|
||||
...this.state.notifications,
|
||||
bounceIcon: !this.bounceIconRef.current?.props.checked,
|
||||
bounceIcon: this.bounceIconRef.current?.checked,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
handleBounceIconType = (event: React.ChangeEvent<Radio & HTMLInputElement>) => {
|
||||
handleBounceIconType = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {
|
||||
key: 'notifications',
|
||||
data: {
|
||||
|
|
@ -284,23 +284,23 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
}
|
||||
|
||||
handleShowUnreadBadge = () => {
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'showUnreadBadge', data: !this.showUnreadBadgeRef.current?.props.checked});
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'showUnreadBadge', data: this.showUnreadBadgeRef.current?.checked});
|
||||
this.setState({
|
||||
showUnreadBadge: !this.showUnreadBadgeRef.current?.props.checked,
|
||||
showUnreadBadge: this.showUnreadBadgeRef.current?.checked,
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeUseSpellChecker = () => {
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'useSpellChecker', data: !this.useSpellCheckerRef.current?.props.checked});
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'useSpellChecker', data: this.useSpellCheckerRef.current?.checked});
|
||||
this.setState({
|
||||
useSpellChecker: !this.useSpellCheckerRef.current?.props.checked,
|
||||
useSpellChecker: this.useSpellCheckerRef.current?.checked,
|
||||
});
|
||||
}
|
||||
|
||||
handleChangeEnableHardwareAcceleration = () => {
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'enableHardwareAcceleration', data: !this.enableHardwareAccelerationRef.current?.props.checked});
|
||||
window.timers.setImmediate(this.saveSetting, CONFIG_TYPE_APP_OPTIONS, {key: 'enableHardwareAcceleration', data: this.enableHardwareAccelerationRef.current?.checked});
|
||||
this.setState({
|
||||
enableHardwareAcceleration: !this.enableHardwareAccelerationRef.current?.props.checked,
|
||||
enableHardwareAcceleration: this.enableHardwareAccelerationRef.current?.checked,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -350,10 +350,6 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
|
||||
render() {
|
||||
const settingsPage = {
|
||||
navbar: {
|
||||
backgroundColor: '#fff',
|
||||
position: 'relative' as const,
|
||||
},
|
||||
close: {
|
||||
textDecoration: 'none',
|
||||
position: 'absolute',
|
||||
|
|
@ -424,7 +420,6 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
const serversRow = (
|
||||
<Row>
|
||||
<Col
|
||||
md={10}
|
||||
xs={8}
|
||||
>
|
||||
<h2 style={settingsPage.sectionHeading}>{'Server Management'}</h2>
|
||||
|
|
@ -437,7 +432,6 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
</div>
|
||||
</Col>
|
||||
<Col
|
||||
md={2}
|
||||
xs={4}
|
||||
>
|
||||
<p className='text-right'>
|
||||
|
|
@ -468,66 +462,74 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
// MacOS has an option in the Dock, to set the app to autostart, so we choose to not support this option for OSX
|
||||
if (window.process.platform === 'win32' || window.process.platform === 'linux') {
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='inputAutoStart'
|
||||
id='inputAutoStart'
|
||||
ref={this.autostartRef}
|
||||
checked={this.state.autostart}
|
||||
onChange={this.handleChangeAutoStart}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='inputAutoStart'
|
||||
id='inputAutoStart'
|
||||
ref={this.autostartRef}
|
||||
checked={this.state.autostart}
|
||||
onChange={this.handleChangeAutoStart}
|
||||
/>
|
||||
{'Start app on login'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'If enabled, the app starts automatically when you log in to your machine.'}
|
||||
</HelpBlock>
|
||||
</Checkbox>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
}
|
||||
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='inputSpellChecker'
|
||||
id='inputSpellChecker'
|
||||
ref={this.useSpellCheckerRef}
|
||||
checked={this.state.useSpellChecker}
|
||||
onChange={this.handleChangeUseSpellChecker}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='inputSpellChecker'
|
||||
id='inputSpellChecker'
|
||||
ref={this.useSpellCheckerRef}
|
||||
checked={this.state.useSpellChecker}
|
||||
onChange={this.handleChangeUseSpellChecker}
|
||||
/>
|
||||
{'Check spelling'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'Highlight misspelled words in your messages based on your system language configuration. '}
|
||||
{'Setting takes effect after restarting the app.'}
|
||||
</HelpBlock>
|
||||
</Checkbox>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
|
||||
if (window.process.platform === 'darwin' || window.process.platform === 'win32') {
|
||||
const TASKBAR = window.process.platform === 'win32' ? 'taskbar' : 'Dock';
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='inputShowUnreadBadge'
|
||||
id='inputShowUnreadBadge'
|
||||
ref={this.showUnreadBadgeRef}
|
||||
checked={this.state.showUnreadBadge}
|
||||
onChange={this.handleShowUnreadBadge}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='inputShowUnreadBadge'
|
||||
id='inputShowUnreadBadge'
|
||||
ref={this.showUnreadBadgeRef}
|
||||
checked={this.state.showUnreadBadge}
|
||||
onChange={this.handleShowUnreadBadge}
|
||||
/>
|
||||
{`Show red badge on ${TASKBAR} icon to indicate unread messages`}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{`Regardless of this setting, mentions are always indicated with a red badge and item count on the ${TASKBAR} icon.`}
|
||||
</HelpBlock>
|
||||
</Checkbox>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
}
|
||||
|
||||
if (window.process.platform === 'win32' || window.process.platform === 'linux') {
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='flashWindow'
|
||||
id='inputflashWindow'
|
||||
ref={this.flashWindowRef}
|
||||
checked={!this.state.notifications || this.state.notifications.flashWindow === 2}
|
||||
onChange={this.handleFlashWindow}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='flashWindow'
|
||||
id='inputflashWindow'
|
||||
ref={this.flashWindowRef}
|
||||
checked={!this.state.notifications || this.state.notifications.flashWindow === 2}
|
||||
onChange={this.handleFlashWindow}
|
||||
/>
|
||||
{'Flash app window and taskbar icon when a new message is received'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'If enabled, app window and taskbar icon flash for a few seconds when a new message is received.'}
|
||||
</HelpBlock>
|
||||
</Checkbox>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
}
|
||||
|
||||
if (window.process.platform === 'darwin') {
|
||||
|
|
@ -535,7 +537,8 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
<FormGroup
|
||||
key='OptionsForm'
|
||||
>
|
||||
<Checkbox
|
||||
<FormCheck
|
||||
type='checkbox'
|
||||
inline={true}
|
||||
key='bounceIcon'
|
||||
id='inputBounceIcon'
|
||||
|
|
@ -543,10 +546,10 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
checked={this.state.notifications ? this.state.notifications.bounceIcon : false}
|
||||
onChange={this.handleBounceIcon}
|
||||
style={{marginRight: '10px'}}
|
||||
>
|
||||
{'Bounce the Dock icon'}
|
||||
</Checkbox>
|
||||
<Radio
|
||||
label='Bounce the Dock icon'
|
||||
/>
|
||||
<FormCheck
|
||||
type='radio'
|
||||
inline={true}
|
||||
name='bounceIconType'
|
||||
value='informational'
|
||||
|
|
@ -557,43 +560,44 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
this.state.notifications.bounceIconType === 'informational'
|
||||
}
|
||||
onChange={this.handleBounceIconType}
|
||||
>
|
||||
{'once'}
|
||||
</Radio>
|
||||
label='once'
|
||||
/>
|
||||
{' '}
|
||||
<Radio
|
||||
<FormCheck
|
||||
type='radio'
|
||||
inline={true}
|
||||
name='bounceIconType'
|
||||
value='critical'
|
||||
disabled={!this.state.notifications || !this.state.notifications.bounceIcon}
|
||||
defaultChecked={this.state.notifications && this.state.notifications.bounceIconType === 'critical'}
|
||||
onChange={this.handleBounceIconType}
|
||||
>
|
||||
{'until I open the app'}
|
||||
</Radio>
|
||||
<HelpBlock
|
||||
label={'until I open the app'}
|
||||
/>
|
||||
<FormText
|
||||
style={{marginLeft: '20px'}}
|
||||
>
|
||||
{'If enabled, the Dock icon bounces once or until the user opens the app when a new notification is received.'}
|
||||
</HelpBlock>
|
||||
</FormText>
|
||||
</FormGroup>,
|
||||
);
|
||||
}
|
||||
|
||||
if (window.process.platform === 'darwin' || window.process.platform === 'linux') {
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='inputShowTrayIcon'
|
||||
id='inputShowTrayIcon'
|
||||
ref={this.showTrayIconRef}
|
||||
checked={this.state.showTrayIcon}
|
||||
onChange={this.handleChangeShowTrayIcon}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='inputShowTrayIcon'
|
||||
id='inputShowTrayIcon'
|
||||
ref={this.showTrayIconRef}
|
||||
checked={this.state.showTrayIcon}
|
||||
onChange={this.handleChangeShowTrayIcon}
|
||||
/>
|
||||
{window.process.platform === 'darwin' ? `Show ${this.state.appName} icon in the menu bar` : 'Show icon in the notification area'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'Setting takes effect after restarting the app.'}
|
||||
</HelpBlock>
|
||||
</Checkbox>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
}
|
||||
|
||||
if (window.process.platform === 'linux') {
|
||||
|
|
@ -604,30 +608,33 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
style={{marginLeft: '20px'}}
|
||||
>
|
||||
{'Icon theme: '}
|
||||
<Radio
|
||||
<FormCheck
|
||||
type='radio'
|
||||
inline={true}
|
||||
name='trayIconTheme'
|
||||
value='light'
|
||||
defaultChecked={this.state.trayIconTheme === 'light' || !this.state.trayIconTheme}
|
||||
onChange={() => this.handleChangeTrayIconTheme('light')}
|
||||
>
|
||||
{'Light'}
|
||||
</Radio>
|
||||
label={'Light'}
|
||||
/>
|
||||
{' '}
|
||||
<Radio
|
||||
<FormCheck
|
||||
type='radio'
|
||||
inline={true}
|
||||
name='trayIconTheme'
|
||||
value='dark'
|
||||
defaultChecked={this.state.trayIconTheme === 'dark'}
|
||||
onChange={() => this.handleChangeTrayIconTheme('dark')}
|
||||
>{'Dark'}</Radio>
|
||||
label={'Dark'}
|
||||
/>
|
||||
</FormGroup>,
|
||||
);
|
||||
}
|
||||
|
||||
if (window.process.platform === 'linux') {
|
||||
options.push(
|
||||
<Checkbox
|
||||
<FormCheck
|
||||
type='radio'
|
||||
key='inputMinimizeToTray'
|
||||
id='inputMinimizeToTray'
|
||||
ref={this.minimizeToTrayRef}
|
||||
|
|
@ -636,27 +643,29 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
onChange={this.handleChangeMinimizeToTray}
|
||||
>
|
||||
{'Leave app running in notification area when application window is closed'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'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>);
|
||||
</FormText>
|
||||
</FormCheck>);
|
||||
}
|
||||
|
||||
options.push(
|
||||
<Checkbox
|
||||
key='inputEnableHardwareAcceleration'
|
||||
id='inputEnableHardwareAcceleration'
|
||||
ref={this.enableHardwareAccelerationRef}
|
||||
checked={this.state.enableHardwareAcceleration}
|
||||
onChange={this.handleChangeEnableHardwareAcceleration}
|
||||
>
|
||||
<FormCheck>
|
||||
<FormCheck.Input
|
||||
type='checkbox'
|
||||
key='inputEnableHardwareAcceleration'
|
||||
id='inputEnableHardwareAcceleration'
|
||||
ref={this.enableHardwareAccelerationRef}
|
||||
checked={this.state.enableHardwareAcceleration}
|
||||
onChange={this.handleChangeEnableHardwareAcceleration}
|
||||
/>
|
||||
{'Use GPU hardware acceleration'}
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'If enabled, Mattermost UI is rendered more efficiently but can lead to decreased stability for some systems.'}
|
||||
{' Setting takes effect after restarting the app.'}
|
||||
</HelpBlock>
|
||||
</Checkbox>,
|
||||
</FormText>
|
||||
</FormCheck>,
|
||||
);
|
||||
|
||||
options.push(
|
||||
|
|
@ -679,9 +688,9 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
>
|
||||
<span>{'Change'}</span>
|
||||
</Button>
|
||||
<HelpBlock>
|
||||
<FormText>
|
||||
{'Specify the folder where files will download.'}
|
||||
</HelpBlock>
|
||||
</FormText>
|
||||
</div>,
|
||||
);
|
||||
|
||||
|
|
@ -734,19 +743,15 @@ export default class SettingsPage extends React.PureComponent<Record<string, nev
|
|||
margin: '0 -15px',
|
||||
}}
|
||||
>
|
||||
<Navbar
|
||||
className='navbar-fixed-top'
|
||||
style={settingsPage.navbar}
|
||||
>
|
||||
<div style={{position: 'relative'}}>
|
||||
<h1 style={settingsPage.heading}>{'Settings'}</h1>
|
||||
</div>
|
||||
</Navbar>
|
||||
<Grid
|
||||
<div style={{position: 'relative'}}>
|
||||
<h1 style={settingsPage.heading}>{'Settings'}</h1>
|
||||
<hr/>
|
||||
</div>
|
||||
<Container
|
||||
className='settingsPage'
|
||||
>
|
||||
{waitForIpc}
|
||||
</Grid>
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
// See LICENSE.txt for license information.
|
||||
|
||||
import React from 'react';
|
||||
import {Nav, NavItem} from 'react-bootstrap';
|
||||
import {Container, Draggable, OnDropCallback} from 'react-smooth-dnd';
|
||||
import {Nav, NavItem, NavLink} from 'react-bootstrap';
|
||||
import {DragDropContext, Draggable, DraggingStyle, Droppable, DropResult, NotDraggingStyle} from 'react-beautiful-dnd';
|
||||
import PlusIcon from 'mdi-react/PlusIcon';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import {Team} from 'types/config';
|
||||
|
||||
|
|
@ -22,7 +23,7 @@ type Props = {
|
|||
mentionCounts: Record<string, number>;
|
||||
showAddServerButton: boolean;
|
||||
onAddServer: () => void;
|
||||
onDrop: OnDropCallback;
|
||||
onDrop: (result: DropResult) => void;
|
||||
tabsDisabled?: boolean;
|
||||
};
|
||||
|
||||
|
|
@ -30,9 +31,18 @@ type State = {
|
|||
hasGPOTeams: boolean;
|
||||
};
|
||||
|
||||
export default class TabBar extends React.PureComponent<Props, State> { // need "this"
|
||||
container?: React.RefObject<Container>;
|
||||
function getStyle(style?: DraggingStyle | NotDraggingStyle) {
|
||||
if (style?.transform) {
|
||||
const axisLockX = `${style.transform.slice(0, style.transform.indexOf(','))}, 0px)`;
|
||||
return {
|
||||
...style,
|
||||
transform: axisLockX,
|
||||
};
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
export default class TabBar extends React.PureComponent<Props, State> { // need "this"
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
|
|
@ -48,7 +58,7 @@ export default class TabBar extends React.PureComponent<Props, State> { // need
|
|||
|
||||
render() {
|
||||
const orderedTabs = this.props.teams.concat().sort((a, b) => a.order - b.order);
|
||||
const tabs = orderedTabs.map((team) => {
|
||||
const tabs = orderedTabs.map((team, orderedIndex) => {
|
||||
const index = this.props.teams.indexOf(team);
|
||||
|
||||
const sessionExpired = this.props.sessionsExpired[index];
|
||||
|
|
@ -76,83 +86,106 @@ export default class TabBar extends React.PureComponent<Props, State> { // need
|
|||
);
|
||||
}
|
||||
|
||||
const id = `teamTabItem${index}`;
|
||||
const navItem = () => (
|
||||
<NavItem
|
||||
key={index}
|
||||
id={id}
|
||||
eventKey={index}
|
||||
draggable={false}
|
||||
ref={id}
|
||||
active={this.props.activeKey === index}
|
||||
onMouseDown={() => {
|
||||
this.props.onSelect(team.name, index);
|
||||
}}
|
||||
onSelect={() => {
|
||||
this.props.onSelect(team.name, index);
|
||||
}}
|
||||
title={team.name}
|
||||
disabled={this.props.tabsDisabled}
|
||||
>
|
||||
<div className='TabBar-tabSeperator'>
|
||||
<span>
|
||||
{team.name}
|
||||
</span>
|
||||
{ badgeDiv }
|
||||
</div>
|
||||
</NavItem>
|
||||
);
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
key={id}
|
||||
render={navItem}
|
||||
className='teamTabItem'
|
||||
/>);
|
||||
key={index}
|
||||
draggableId={`teamTabItem${index}`}
|
||||
index={orderedIndex}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<NavItem
|
||||
ref={provided.innerRef}
|
||||
as='li'
|
||||
id={`teamTabItem${index}`}
|
||||
draggable={false}
|
||||
title={team.name}
|
||||
className={classNames('teamTabItem', {
|
||||
active: this.props.activeKey === index,
|
||||
dragging: snapshot.isDragging,
|
||||
})}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
style={getStyle(provided.draggableProps.style)}
|
||||
>
|
||||
<NavLink
|
||||
eventKey={index}
|
||||
draggable={false}
|
||||
active={this.props.activeKey === index}
|
||||
disabled={this.props.tabsDisabled}
|
||||
onSelect={() => {
|
||||
this.props.onSelect(team.name, index);
|
||||
}}
|
||||
>
|
||||
<div className='TabBar-tabSeperator'>
|
||||
<span>
|
||||
{team.name}
|
||||
</span>
|
||||
{ badgeDiv }
|
||||
</div>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
});
|
||||
if (this.props.showAddServerButton === true) {
|
||||
tabs.push(
|
||||
<NavItem
|
||||
className='TabBar-addServerButton'
|
||||
key='addServerButton'
|
||||
id='addServerButton'
|
||||
eventKey='addServerButton'
|
||||
draggable={false}
|
||||
title='Add new server'
|
||||
onSelect={() => {
|
||||
this.props.onAddServer();
|
||||
}}
|
||||
disabled={this.props.tabsDisabled}
|
||||
<Draggable
|
||||
draggableId={'TabBar-addServerButton'}
|
||||
index={this.props.teams.length}
|
||||
isDragDisabled={true}
|
||||
>
|
||||
<div className='TabBar-tabSeperator'>
|
||||
<PlusIcon size={20}/>
|
||||
</div>
|
||||
</NavItem>,
|
||||
{(provided) => (
|
||||
<NavItem
|
||||
ref={provided.innerRef}
|
||||
as='li'
|
||||
className='TabBar-addServerButton'
|
||||
key='addServerButton'
|
||||
id='addServerButton'
|
||||
draggable={false}
|
||||
title='Add new server'
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<NavLink
|
||||
eventKey='addServerButton'
|
||||
draggable={false}
|
||||
disabled={this.props.tabsDisabled}
|
||||
onSelect={() => {
|
||||
this.props.onAddServer();
|
||||
}}
|
||||
>
|
||||
<div className='TabBar-tabSeperator'>
|
||||
<PlusIcon size={20}/>
|
||||
</div>
|
||||
</NavLink>
|
||||
</NavItem>
|
||||
)}
|
||||
</Draggable>,
|
||||
);
|
||||
}
|
||||
|
||||
const navContainer = (ref: React.RefObject<Nav>) => (
|
||||
<Nav
|
||||
ref={ref}
|
||||
className={`smooth-dnd-container TabBar${this.props.isDarkMode ? ' darkMode' : ''}`}
|
||||
id={this.props.id}
|
||||
bsStyle='tabs'
|
||||
>
|
||||
{ tabs }
|
||||
</Nav>
|
||||
);
|
||||
return (
|
||||
<Container
|
||||
ref={this.container}
|
||||
render={navContainer}
|
||||
orientation='horizontal'
|
||||
lockAxis={'x'}
|
||||
onDrop={this.props.onDrop}
|
||||
animationDuration={300}
|
||||
shouldAcceptDrop={() => {
|
||||
return !this.state.hasGPOTeams && !this.props.tabsDisabled;
|
||||
}}
|
||||
/>
|
||||
<DragDropContext onDragEnd={this.props.onDrop}>
|
||||
<Droppable
|
||||
isDropDisabled={this.state.hasGPOTeams || this.props.tabsDisabled}
|
||||
droppableId='tabBar'
|
||||
direction='horizontal'
|
||||
>
|
||||
{(provided) => (
|
||||
<Nav
|
||||
ref={provided.innerRef}
|
||||
className={`TabBar${this.props.isDarkMode ? ' darkMode' : ''}`}
|
||||
id={this.props.id}
|
||||
variant='tabs'
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
{tabs}
|
||||
{provided.placeholder}
|
||||
</Nav>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export default class TeamListItem extends React.PureComponent<Props> {
|
|||
{ this.props.url }
|
||||
</p>
|
||||
</div>
|
||||
<div className='pull-right'>
|
||||
<div>
|
||||
<a
|
||||
href='#'
|
||||
onClick={this.handleTeamEditing}
|
||||
|
|
|
|||
|
|
@ -7,22 +7,22 @@ import {Button, Navbar, ProgressBar} from 'react-bootstrap';
|
|||
|
||||
type InstallButtonProps = {
|
||||
notifyOnly?: boolean;
|
||||
onClickInstall?: React.MouseEventHandler<Button>;
|
||||
onClickDownload?: React.MouseEventHandler<Button>;
|
||||
onClickInstall?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onClickDownload?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
};
|
||||
|
||||
function InstallButton(props: InstallButtonProps) {
|
||||
if (props.notifyOnly) {
|
||||
return (
|
||||
<Button
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
onClick={props.onClickDownload}
|
||||
>{'Download Update'}</Button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
onClick={props.onClickInstall}
|
||||
>{'Install Update'}</Button>
|
||||
);
|
||||
|
|
@ -33,12 +33,12 @@ type UpdaterPageProps = {
|
|||
notifyOnly?: boolean;
|
||||
isDownloading?: boolean;
|
||||
progress?: number;
|
||||
onClickInstall?: React.MouseEventHandler<Button>;
|
||||
onClickDownload?: React.MouseEventHandler<Button>;
|
||||
onClickInstall?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onClickDownload?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onClickReleaseNotes?: React.MouseEventHandler<HTMLAnchorElement>;
|
||||
onClickRemind?: React.MouseEventHandler<Button>;
|
||||
onClickSkip?: React.MouseEventHandler<Button>;
|
||||
onClickCancel?: React.MouseEventHandler<Button>;
|
||||
onClickRemind?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onClickSkip?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
onClickCancel?: React.MouseEventHandler<HTMLButtonElement>;
|
||||
};
|
||||
|
||||
function UpdaterPage(props: UpdaterPageProps) {
|
||||
|
|
@ -47,11 +47,10 @@ function UpdaterPage(props: UpdaterPageProps) {
|
|||
footer = (
|
||||
<Navbar
|
||||
className='UpdaterPage-footer'
|
||||
fixedBottom={true}
|
||||
fluid={true}
|
||||
fixed='bottom'
|
||||
>
|
||||
<ProgressBar
|
||||
active={true}
|
||||
animated={true}
|
||||
now={props.progress}
|
||||
label={`${props.progress}%`}
|
||||
/>
|
||||
|
|
@ -66,17 +65,16 @@ function UpdaterPage(props: UpdaterPageProps) {
|
|||
footer = (
|
||||
<Navbar
|
||||
className='UpdaterPage-footer'
|
||||
fixedBottom={true}
|
||||
fluid={true}
|
||||
fixed='bottom'
|
||||
>
|
||||
<Button
|
||||
className='UpdaterPage-skipButton'
|
||||
bsStyle='link'
|
||||
variant='link'
|
||||
onClick={props.onClickSkip}
|
||||
>{'Skip this version'}</Button>
|
||||
<div className='pull-right'>
|
||||
<Button
|
||||
bsStyle='link'
|
||||
variant='link'
|
||||
onClick={props.onClickRemind}
|
||||
>{'Remind me in 2 days'}</Button>
|
||||
<InstallButton
|
||||
|
|
@ -91,7 +89,7 @@ function UpdaterPage(props: UpdaterPageProps) {
|
|||
|
||||
return (
|
||||
<div className='UpdaterPage'>
|
||||
<Navbar fluid={true} >
|
||||
<Navbar>
|
||||
<h1 className='UpdaterPage-heading'>{'New update is available'}</h1>
|
||||
</Navbar>
|
||||
<div className='container-fluid'>
|
||||
|
|
|
|||
|
|
@ -105,6 +105,7 @@ export default class ShowCertificateModal extends React.PureComponent<Props, Sta
|
|||
<Row>
|
||||
<Col>
|
||||
<Button
|
||||
variant='primary'
|
||||
onClick={this.handleOk}
|
||||
className={'primary'}
|
||||
>{'Close'}</Button>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ label {
|
|||
outline: 0;
|
||||
}
|
||||
|
||||
.help-block {
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -173,7 +173,7 @@ button.default:focus {
|
|||
color: #a94442;
|
||||
}
|
||||
|
||||
.has-error .form-control {
|
||||
:invalid .form-control {
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
#extra-bar.hidden {
|
||||
max-height: 0px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.backLabel {
|
||||
|
|
@ -25,9 +25,8 @@ span.backLabel {
|
|||
|
||||
span.backIcon {
|
||||
margin-right: 4px;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.container-fluid button:first-child {
|
||||
padding-left: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
-webkit-user-select: none;
|
||||
min-width: 48px;
|
||||
max-width: 224px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.TabBar>li>a {
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
font-size: 14px;
|
||||
letter-spacing: -0.2px;
|
||||
transition: 0.3s;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.TabBar.darkMode>li>a {
|
||||
|
|
@ -80,7 +82,7 @@
|
|||
flex: 0 0 6px;
|
||||
}
|
||||
|
||||
.TabBar>li.teamTabItem.active:before, .TabBar>li.teamTabItem.smooth-dnd-ghost:before {
|
||||
.TabBar>li.teamTabItem.active:before, .TabBar>li.teamTabItem.dragging:before {
|
||||
left: -4px;
|
||||
border-bottom-right-radius: 6px;
|
||||
border-right: 2px solid #fff;
|
||||
|
|
@ -88,12 +90,12 @@
|
|||
z-index: 9;
|
||||
}
|
||||
|
||||
.TabBar.darkMode>li.teamTabItem.active:before, .TabBar.darkMode>li.teamTabItem.smooth-dnd-ghost:before {
|
||||
.TabBar.darkMode>li.teamTabItem.active:before, .TabBar.darkMode>li.teamTabItem.dragging:before {
|
||||
border-right: 2px solid #323639;
|
||||
border-bottom: 2px solid #323639;
|
||||
}
|
||||
|
||||
.TabBar>li.teamTabItem.active:after, .TabBar>li.teamTabItem.smooth-dnd-ghost:after {
|
||||
.TabBar>li.teamTabItem.active:after, .TabBar>li.teamTabItem.dragging:after {
|
||||
border-bottom-left-radius: 6px;
|
||||
right: -5px;
|
||||
border-left: 2px solid #fff;
|
||||
|
|
@ -101,7 +103,7 @@
|
|||
z-index: 9;
|
||||
}
|
||||
|
||||
.TabBar.darkMode>li.teamTabItem.active:after, .TabBar.darkMode>li.teamTabItem.smooth-dnd-ghost:after {
|
||||
.TabBar.darkMode>li.teamTabItem.active:after, .TabBar.darkMode>li.teamTabItem.dragging:after {
|
||||
border-left: 2px solid #323639;
|
||||
border-bottom: 2px solid #323639;
|
||||
}
|
||||
|
|
@ -113,8 +115,6 @@
|
|||
}
|
||||
|
||||
.TabBar>li.TabBar-addServerButton{
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
flex: 0 0 auto;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
|
@ -124,6 +124,10 @@
|
|||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
.TabBar>li.TabBar-addServerButton>a.active{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.TabBar>li.TabBar-addServerButton svg{
|
||||
margin: -2px;
|
||||
}
|
||||
|
|
@ -132,7 +136,7 @@
|
|||
color: rgba(243,243,243,0.7);
|
||||
}
|
||||
|
||||
.TabBar>li.teamTabItem.active>a, .TabBar>li.teamTabItem.smooth-dnd-ghost>a {
|
||||
.TabBar>li.teamTabItem.active>a, .TabBar>li.teamTabItem.dragging>a {
|
||||
border: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
color: rgba(61,60,64,1);
|
||||
|
|
@ -140,11 +144,7 @@
|
|||
z-index: 9;
|
||||
}
|
||||
|
||||
.smooth-dnd-no-user-select li.TabBar-addServerButton>a {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.TabBar.darkMode>li.teamTabItem.active>a, .TabBar.darkMode>li.teamTabItem.smooth-dnd-ghost>a {
|
||||
.TabBar.darkMode>li.teamTabItem.active>a, .TabBar.darkMode>li.teamTabItem.dragging>a {
|
||||
color: #f3f3f3;
|
||||
background-color: #323639;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,21 @@
|
|||
.TeamListItem {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.TeamListItem:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.TeamListItem-left {
|
||||
display: inline-block;
|
||||
width: calc(100% - 100px);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.TeamListItem p {
|
||||
overflow-wrap: break-word;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.TeamListItem h4 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
|
||||
html {
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
body {
|
||||
min-height: 100%;
|
||||
|
|
@ -68,8 +69,8 @@ body {
|
|||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
.has-error .control-label,
|
||||
.has-error .help-block {
|
||||
:invalid .col-form-label,
|
||||
:invalid .form-text {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
|
@ -86,6 +87,7 @@ body {
|
|||
overflow: hidden;
|
||||
height: 36px;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.topBar>.topBar-bg.unfocused {
|
||||
|
|
@ -249,4 +251,4 @@ body {
|
|||
|
||||
.topBar.darkMode .overlay-gradient {
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #202124 100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
body {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #166de0;
|
||||
border-color: #166de0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,15 +17,6 @@
|
|||
transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
||||
.TeamListItem p {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
.TeamListItem h4 {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
};
|
||||
|
||||
.checkbox > label {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -39,3 +30,8 @@ body {
|
|||
#content {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #166de0;
|
||||
border-color: #166de0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ class Root extends React.PureComponent<Record<string, never>, State> {
|
|||
this.setState({config});
|
||||
}
|
||||
|
||||
moveTabs = async (originalOrder: number, newOrder: number): Promise<number | undefined> => {
|
||||
moveTabs = (originalOrder: number, newOrder: number): number | undefined => {
|
||||
if (!this.state.config) {
|
||||
throw new Error('No config');
|
||||
}
|
||||
|
|
@ -61,20 +61,27 @@ class Root extends React.PureComponent<Record<string, never>, State> {
|
|||
const team = tabOrder.splice(originalOrder, 1);
|
||||
tabOrder.splice(newOrder, 0, team[0]);
|
||||
|
||||
let teamIndex;
|
||||
let teamIndex: number | undefined;
|
||||
tabOrder.forEach((t, order) => {
|
||||
if (order === newOrder) {
|
||||
teamIndex = t.index;
|
||||
}
|
||||
teams[t.index].order = order;
|
||||
});
|
||||
await this.teamConfigChange(teams);
|
||||
this.setState({
|
||||
config: {
|
||||
...this.state.config,
|
||||
teams,
|
||||
},
|
||||
});
|
||||
this.teamConfigChange(teams);
|
||||
return teamIndex;
|
||||
};
|
||||
|
||||
teamConfigChange = async (updatedTeams: Team[]) => {
|
||||
await window.ipcRenderer.invoke(UPDATE_TEAMS, updatedTeams);
|
||||
await this.reloadConfig();
|
||||
window.ipcRenderer.invoke(UPDATE_TEAMS, updatedTeams).then(() => {
|
||||
this.reloadConfig();
|
||||
});
|
||||
};
|
||||
|
||||
reloadConfig = async () => {
|
||||
|
|
|
|||
|
|
@ -164,6 +164,7 @@ export default class SelectCertificateModal extends React.PureComponent<Props, S
|
|||
<Row>
|
||||
<Col sm={4}>
|
||||
<Button
|
||||
variant='info'
|
||||
disabled={this.state.selectedIndex === null}
|
||||
onClick={this.handleCertificateInfo}
|
||||
className={'info'}
|
||||
|
|
@ -171,10 +172,12 @@ export default class SelectCertificateModal extends React.PureComponent<Props, S
|
|||
</Col>
|
||||
<Col sm={8}>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={this.props.onCancel}
|
||||
className={'secondary'}
|
||||
>{'Cancel'}</Button>
|
||||
<Button
|
||||
variant='primary'
|
||||
onClick={this.handleOk}
|
||||
disabled={this.state.selectedIndex === null}
|
||||
className={'primary'}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// Copyright (c) 2015-2016 Yuya Ochiai
|
||||
|
||||
import React from 'react';
|
||||
import {Button, Col, ControlLabel, Form, FormGroup, FormControl, Modal} from 'react-bootstrap';
|
||||
import {Button, Col, FormLabel, Form, FormGroup, FormControl, Modal} from 'react-bootstrap';
|
||||
|
||||
import {LoginModalData} from 'types/auth';
|
||||
import {ModalMessage} from 'types/modals';
|
||||
|
|
@ -56,7 +56,7 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
handleSubmit = (event: React.MouseEvent<Button>) => {
|
||||
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
this.props.onLogin(this.state.request!, this.state.username, this.state.password);
|
||||
this.setState({
|
||||
|
|
@ -67,7 +67,7 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
});
|
||||
}
|
||||
|
||||
handleCancel = (event: React.MouseEvent<Button>) => {
|
||||
handleCancel = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
this.props.onCancel(this.state.request!);
|
||||
this.setState({
|
||||
|
|
@ -78,11 +78,11 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
});
|
||||
}
|
||||
|
||||
setUsername = (e: React.ChangeEvent<FormControl & HTMLInputElement>) => {
|
||||
setUsername = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({username: e.target.value});
|
||||
}
|
||||
|
||||
setPassword = (e: React.ChangeEvent<FormControl & HTMLInputElement>) => {
|
||||
setPassword = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({password: e.target.value});
|
||||
}
|
||||
|
||||
|
|
@ -100,7 +100,6 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
return (
|
||||
<Modal
|
||||
show={Boolean(this.state.request && this.state.authInfo)}
|
||||
onHide={() => {}}
|
||||
>
|
||||
<Modal.Header>
|
||||
<Modal.Title>{'Authentication Required'}</Modal.Title>
|
||||
|
|
@ -110,12 +109,11 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
{ message }
|
||||
</p>
|
||||
<Form
|
||||
horizontal={true}
|
||||
onSubmit={this.handleSubmit}
|
||||
>
|
||||
<FormGroup>
|
||||
<Col
|
||||
componentClass={ControlLabel}
|
||||
as={FormLabel}
|
||||
sm={2}
|
||||
>{'User Name'}</Col>
|
||||
<Col sm={10}>
|
||||
|
|
@ -124,7 +122,7 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
placeholder='User Name'
|
||||
onChange={this.setUsername}
|
||||
value={this.state.username}
|
||||
onClick={(e) => {
|
||||
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
|
|
@ -132,7 +130,7 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Col
|
||||
componentClass={ControlLabel}
|
||||
as={FormLabel}
|
||||
sm={2}
|
||||
>{'Password'}</Col>
|
||||
<Col sm={10}>
|
||||
|
|
@ -141,7 +139,7 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
placeholder='Password'
|
||||
onChange={this.setPassword}
|
||||
value={this.state.password}
|
||||
onClick={(e) => {
|
||||
onClick={(e: React.MouseEvent<HTMLInputElement>) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
|
|
@ -152,10 +150,13 @@ export default class LoginModal extends React.PureComponent<Props, State> {
|
|||
<div className='pull-right'>
|
||||
<Button
|
||||
type='submit'
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
>{'Login'}</Button>
|
||||
{ ' ' }
|
||||
<Button onClick={this.handleCancel}>{'Cancel'}</Button>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={this.handleCancel}
|
||||
>{'Cancel'}</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</FormGroup>
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@ import {MODAL_INFO} from 'common/communication';
|
|||
import {PERMISSION_DESCRIPTION} from 'common/permissions';
|
||||
|
||||
type Props = {
|
||||
handleDeny: React.MouseEventHandler<Button>;
|
||||
handleGrant: React.MouseEventHandler<Button>;
|
||||
handleDeny: React.MouseEventHandler<HTMLButtonElement>;
|
||||
handleGrant: React.MouseEventHandler<HTMLButtonElement>;
|
||||
getPermissionInfo: () => void;
|
||||
openExternalLink: (protocol: string, url: string) => void;
|
||||
};
|
||||
|
|
@ -107,7 +107,7 @@ export default class PermissionModal extends React.PureComponent<Props, State> {
|
|||
onClick={this.props.handleDeny}
|
||||
>{'Cancel'}</Button>
|
||||
<Button
|
||||
bsStyle='primary'
|
||||
variant='primary'
|
||||
onClick={this.props.handleGrant}
|
||||
>{'Accept'}</Button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue