diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/layout/AppLayout.js | 2 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 12 | ||||
-rw-r--r-- | src/components/ui/ToggleRaw.js | 74 |
3 files changed, 88 insertions, 0 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 3b732e602..a60270a6f 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -9,6 +9,7 @@ import InfoBar from '../ui/InfoBar'; | |||
9 | import { Component as BasicAuth } from '../../features/basicAuth'; | 9 | import { Component as BasicAuth } from '../../features/basicAuth'; |
10 | import { Component as ShareFranz } from '../../features/shareFranz'; | 10 | import { Component as ShareFranz } from '../../features/shareFranz'; |
11 | import { Component as QuickSwitch } from '../../features/quickSwitch'; | 11 | import { Component as QuickSwitch } from '../../features/quickSwitch'; |
12 | import { Component as NightlyBuilds } from '../../features/nightlyBuilds'; | ||
12 | import { Component as PublishDebugInfo } from '../../features/publishDebugInfo'; | 13 | import { Component as PublishDebugInfo } from '../../features/publishDebugInfo'; |
13 | import ErrorBoundary from '../util/ErrorBoundary'; | 14 | import ErrorBoundary from '../util/ErrorBoundary'; |
14 | 15 | ||
@@ -197,6 +198,7 @@ class AppLayout extends Component { | |||
197 | <BasicAuth /> | 198 | <BasicAuth /> |
198 | <ShareFranz /> | 199 | <ShareFranz /> |
199 | <QuickSwitch /> | 200 | <QuickSwitch /> |
201 | <NightlyBuilds /> | ||
200 | <PublishDebugInfo /> | 202 | <PublishDebugInfo /> |
201 | {services} | 203 | {services} |
202 | {children} | 204 | {children} |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 031203308..b6698b8e2 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -7,6 +7,7 @@ import { defineMessages, intlShape } from 'react-intl'; | |||
7 | import Form from '../../../lib/Form'; | 7 | import Form from '../../../lib/Form'; |
8 | import Button from '../../ui/Button'; | 8 | import Button from '../../ui/Button'; |
9 | import Toggle from '../../ui/Toggle'; | 9 | import Toggle from '../../ui/Toggle'; |
10 | import ToggleRaw from '../../ui/ToggleRaw'; | ||
10 | import Select from '../../ui/Select'; | 11 | import Select from '../../ui/Select'; |
11 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; | 12 | import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer'; |
12 | import Input from '../../ui/Input'; | 13 | import Input from '../../ui/Input'; |
@@ -170,6 +171,7 @@ export default @observer class EditSettingsForm extends Component { | |||
170 | hibernationEnabled: PropTypes.bool.isRequired, | 171 | hibernationEnabled: PropTypes.bool.isRequired, |
171 | isDarkmodeEnabled: PropTypes.bool.isRequired, | 172 | isDarkmodeEnabled: PropTypes.bool.isRequired, |
172 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, | 173 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, |
174 | isNightlyEnabled: PropTypes.bool.isRequired, | ||
173 | openProcessManager: PropTypes.func.isRequired, | 175 | openProcessManager: PropTypes.func.isRequired, |
174 | }; | 176 | }; |
175 | 177 | ||
@@ -224,6 +226,7 @@ export default @observer class EditSettingsForm extends Component { | |||
224 | isDarkmodeEnabled, | 226 | isDarkmodeEnabled, |
225 | openProcessManager, | 227 | openProcessManager, |
226 | isTodosActivated, | 228 | isTodosActivated, |
229 | isNightlyEnabled, | ||
227 | } = this.props; | 230 | } = this.props; |
228 | const { intl } = this.context; | 231 | const { intl } = this.context; |
229 | 232 | ||
@@ -593,6 +596,15 @@ export default @observer class EditSettingsForm extends Component { | |||
593 | {automaticUpdates && ( | 596 | {automaticUpdates && ( |
594 | <div> | 597 | <div> |
595 | <Toggle field={form.$('beta')} /> | 598 | <Toggle field={form.$('beta')} /> |
599 | <ToggleRaw | ||
600 | field={{ | ||
601 | value: isNightlyEnabled, | ||
602 | id: 'nightly', | ||
603 | label: 'Include nightly versions', | ||
604 | name: 'Nightly builds', | ||
605 | }} | ||
606 | onChange={window.ferdi.features.nightlyBuilds.toggleFeature} | ||
607 | /> | ||
596 | {updateIsReadyToInstall ? ( | 608 | {updateIsReadyToInstall ? ( |
597 | <Button | 609 | <Button |
598 | label={intl.formatMessage(messages.buttonInstallUpdate)} | 610 | label={intl.formatMessage(messages.buttonInstallUpdate)} |
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js new file mode 100644 index 000000000..ee817356b --- /dev/null +++ b/src/components/ui/ToggleRaw.js | |||
@@ -0,0 +1,74 @@ | |||
1 | /** | ||
2 | * "Raw" Toggle - for usage without a MobX Form element | ||
3 | */ | ||
4 | import React, { Component } from 'react'; | ||
5 | import PropTypes from 'prop-types'; | ||
6 | import { observer } from 'mobx-react'; | ||
7 | import classnames from 'classnames'; | ||
8 | |||
9 | export default @observer class ToggleRaw extends Component { | ||
10 | static propTypes = { | ||
11 | onChange: PropTypes.func.isRequired, | ||
12 | field: PropTypes.shape({ | ||
13 | value: PropTypes.bool.isRequired, | ||
14 | id: PropTypes.string, | ||
15 | name: PropTypes.string, | ||
16 | label: PropTypes.string, | ||
17 | }).isRequired, | ||
18 | className: PropTypes.string, | ||
19 | showLabel: PropTypes.bool, | ||
20 | disabled: PropTypes.bool, | ||
21 | }; | ||
22 | |||
23 | static defaultProps = { | ||
24 | className: '', | ||
25 | showLabel: true, | ||
26 | disabled: false, | ||
27 | }; | ||
28 | |||
29 | onChange(e) { | ||
30 | const { onChange } = this.props; | ||
31 | |||
32 | onChange(e); | ||
33 | } | ||
34 | |||
35 | render() { | ||
36 | const { | ||
37 | field, | ||
38 | className, | ||
39 | showLabel, | ||
40 | disabled, | ||
41 | } = this.props; | ||
42 | |||
43 | return ( | ||
44 | <div | ||
45 | className={classnames([ | ||
46 | 'franz-form__field', | ||
47 | 'franz-form__toggle-wrapper', | ||
48 | 'franz-form__toggle-disabled', | ||
49 | className, | ||
50 | ])} | ||
51 | > | ||
52 | <label | ||
53 | htmlFor={field.id} | ||
54 | className={classnames({ | ||
55 | 'franz-form__toggle': true, | ||
56 | 'is-active': field.value, | ||
57 | })} | ||
58 | > | ||
59 | <div className="franz-form__toggle-button" /> | ||
60 | <input | ||
61 | type="checkbox" | ||
62 | id={field.id} | ||
63 | name={field.name} | ||
64 | value={field.name} | ||
65 | checked={field.value} | ||
66 | onChange={e => (!disabled ? this.onChange(e) : null)} | ||
67 | /> | ||
68 | </label> | ||
69 | {field.error && <div className={field.error}>{field.error}</div>} | ||
70 | {field.label && showLabel && <label className="franz-form__label" htmlFor={field.id}>{field.label}</label>} | ||
71 | </div> | ||
72 | ); | ||
73 | } | ||
74 | } | ||