diff options
Diffstat (limited to 'web/src/containers/config/Config.jsx')
-rw-r--r-- | web/src/containers/config/Config.jsx | 62 |
1 files changed, 60 insertions, 2 deletions
diff --git a/web/src/containers/config/Config.jsx b/web/src/containers/config/Config.jsx index 3d402a116..652d6702f 100644 --- a/web/src/containers/config/Config.jsx +++ b/web/src/containers/config/Config.jsx @@ -18,10 +18,14 @@ import { ButtonVariant, Modal, ModalVariant, - Switch + Switch, + Select, + SelectOption, + SelectVariant } from '@patternfly/react-core' import { CogIcon } from '@patternfly/react-icons' import { setPreference } from '../../actions/preferences' +import { resolveDarkMode, setDarkMode } from '../../Misc' class ConfigModal extends React.Component { @@ -39,6 +43,8 @@ class ConfigModal extends React.Component { this.state = { isModalOpen: false, autoReload: false, + theme: 'Auto', + isThemeOpen: false, } this.handleModalToggle = () => { this.setState(({ isModalOpen }) => ({ @@ -47,9 +53,39 @@ class ConfigModal extends React.Component { this.resetState() } + this.handleEscape = () => { + if (this.state.isThemeOpen) { + this.setState(({ isThemeOpen }) => ({ + isThemeOpen: !isThemeOpen, + })) + } else { + this.handleModalToggle() + } + } + + this.handleThemeToggle = () => { + this.setState(({ isThemeOpen }) => ({ + isThemeOpen: !isThemeOpen, + })) + } + + this.handleThemeSelect = (event, selection) => { + this.setState({ + theme: selection, + isThemeOpen: false + }) + } + + this.handleTheme = () => { + let darkMode = resolveDarkMode(this.state.theme) + setDarkMode(darkMode) + } + this.handleSave = () => { this.handleModalToggle() this.props.dispatch(setPreference('autoReload', this.state.autoReload)) + this.props.dispatch(setPreference('theme', this.state.theme)) + this.handleTheme() } this.handleAutoReload = () => { @@ -62,11 +98,12 @@ class ConfigModal extends React.Component { resetState() { this.setState({ autoReload: this.props.preferences.autoReload, + theme: this.props.preferences.theme, }) } render() { - const { isModalOpen, autoReload } = this.state + const { isModalOpen, autoReload, theme, isThemeOpen } = this.state return ( <React.Fragment> <Button @@ -80,6 +117,7 @@ class ConfigModal extends React.Component { title="Preferences" isOpen={isModalOpen} onClose={this.handleModalToggle} + onEscapePress={this.handleEscape} actions={[ <Button key="confirm" variant="primary" onClick={this.handleSave}> Confirm @@ -91,6 +129,8 @@ class ConfigModal extends React.Component { > <div> <p key="info">Application settings are saved in browser local storage only. They are applied whether authenticated or not.</p> + </div> + <div> <Switch key="autoreload" id="autoreload" @@ -99,6 +139,24 @@ class ConfigModal extends React.Component { onChange={this.handleAutoReload} /> </div> + <div style={{'paddingTop': '25px'}}> + <p key="theme-info">Select your preferred theme, auto will base it on your system preference.</p> + </div> + <div> + <Select + variant={SelectVariant.single} + label="Select Input" + onToggle={this.handleThemeToggle} + onSelect={this.handleThemeSelect} + selections={theme} + isOpen={isThemeOpen} + menuAppendTo="parent" + > + <SelectOption key="auto" value="Auto"/> + <SelectOption key="light" value="Light"/> + <SelectOption key="dark" value="Dark"/> + </Select> + </div> </Modal> </React.Fragment> ) |