diff options
Diffstat (limited to 'src/components/settings')
5 files changed, 228 insertions, 9 deletions
diff --git a/src/components/settings/SettingsLayout.jsx b/src/components/settings/SettingsLayout.jsx index dea4bb387..989c428f2 100644 --- a/src/components/settings/SettingsLayout.jsx +++ b/src/components/settings/SettingsLayout.jsx | |||
@@ -8,6 +8,7 @@ import { Outlet } from 'react-router-dom'; | |||
8 | import ErrorBoundary from '../util/ErrorBoundary'; | 8 | import ErrorBoundary from '../util/ErrorBoundary'; |
9 | import Appear from '../ui/effects/Appear'; | 9 | import Appear from '../ui/effects/Appear'; |
10 | import Icon from '../ui/icon'; | 10 | import Icon from '../ui/icon'; |
11 | import { isEscKeyPress } from '../../jsUtils'; | ||
11 | 12 | ||
12 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
13 | closeSettings: { | 14 | closeSettings: { |
@@ -36,8 +37,7 @@ class SettingsLayout extends Component { | |||
36 | } | 37 | } |
37 | 38 | ||
38 | handleKeyDown(e) { | 39 | handleKeyDown(e) { |
39 | if (e.keyCode === 27) { | 40 | if (isEscKeyPress(e.keyCode)) { |
40 | // escape key | ||
41 | this.props.closeSettings(); | 41 | this.props.closeSettings(); |
42 | } | 42 | } |
43 | } | 43 | } |
diff --git a/src/components/settings/navigation/SettingsNavigation.jsx b/src/components/settings/navigation/SettingsNavigation.jsx index bbbe8d888..e1242a7fe 100644 --- a/src/components/settings/navigation/SettingsNavigation.jsx +++ b/src/components/settings/navigation/SettingsNavigation.jsx | |||
@@ -5,7 +5,11 @@ import { inject, observer } from 'mobx-react'; | |||
5 | import { RouterStore } from '@superwf/mobx-react-router'; | 5 | import { RouterStore } from '@superwf/mobx-react-router'; |
6 | 6 | ||
7 | import { NavLink } from 'react-router-dom'; | 7 | import { NavLink } from 'react-router-dom'; |
8 | import { LOCAL_SERVER, LIVE_FERDIUM_API, LIVE_FRANZ_API } from '../../../config'; | 8 | import { |
9 | LOCAL_SERVER, | ||
10 | LIVE_FERDIUM_API, | ||
11 | LIVE_FRANZ_API, | ||
12 | } from '../../../config'; | ||
9 | import UIStore from '../../../stores/UIStore'; | 13 | import UIStore from '../../../stores/UIStore'; |
10 | import SettingsStore from '../../../stores/SettingsStore'; | 14 | import SettingsStore from '../../../stores/SettingsStore'; |
11 | import UserStore from '../../../stores/UserStore'; | 15 | import UserStore from '../../../stores/UserStore'; |
@@ -32,6 +36,10 @@ const messages = defineMessages({ | |||
32 | id: 'settings.navigation.team', | 36 | id: 'settings.navigation.team', |
33 | defaultMessage: 'Manage Team', | 37 | defaultMessage: 'Manage Team', |
34 | }, | 38 | }, |
39 | releaseNotes: { | ||
40 | id: 'settings.navigation.releaseNotes', | ||
41 | defaultMessage: 'Release Notes', | ||
42 | }, | ||
35 | supportFerdium: { | 43 | supportFerdium: { |
36 | id: 'settings.navigation.supportFerdium', | 44 | id: 'settings.navigation.supportFerdium', |
37 | defaultMessage: 'About Ferdium', | 45 | defaultMessage: 'About Ferdium', |
@@ -165,6 +173,16 @@ class SettingsNavigation extends Component { | |||
165 | )} | 173 | )} |
166 | </NavLink> | 174 | </NavLink> |
167 | <NavLink | 175 | <NavLink |
176 | to="/settings/releasenotes" | ||
177 | className={({ isActive }) => | ||
178 | isActive | ||
179 | ? 'settings-navigation__link is-active' | ||
180 | : 'settings-navigation__link' | ||
181 | } | ||
182 | > | ||
183 | {intl.formatMessage(messages.releaseNotes)} | ||
184 | </NavLink> | ||
185 | <NavLink | ||
168 | to="/settings/support" | 186 | to="/settings/support" |
169 | className={({ isActive }) => | 187 | className={({ isActive }) => |
170 | isActive | 188 | isActive |
@@ -190,4 +208,6 @@ class SettingsNavigation extends Component { | |||
190 | } | 208 | } |
191 | } | 209 | } |
192 | 210 | ||
193 | export default injectIntl(inject('stores', 'actions')(observer(SettingsNavigation))); | 211 | export default injectIntl( |
212 | inject('stores', 'actions')(observer(SettingsNavigation)), | ||
213 | ); | ||
diff --git a/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx new file mode 100644 index 000000000..d0be82312 --- /dev/null +++ b/src/components/settings/releaseNotes/ReleaseNotesDashboard.tsx | |||
@@ -0,0 +1,99 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | import Markdown from 'markdown-to-jsx'; | ||
5 | import { openExternalUrl } from '../../../helpers/url-helpers'; | ||
6 | import { ferdiumVersion } from '../../../environment-remote'; | ||
7 | import { | ||
8 | getFerdiumVersion, | ||
9 | getUpdateInfoFromGH, | ||
10 | } from '../../../helpers/update-helpers'; | ||
11 | |||
12 | const messages = defineMessages({ | ||
13 | headline: { | ||
14 | id: 'settings.releasenotes.headline', | ||
15 | defaultMessage: 'Release Notes', | ||
16 | }, | ||
17 | connectionError: { | ||
18 | id: 'settings.releasenotes.connectionError', | ||
19 | defaultMessage: | ||
20 | 'An error occured when connecting to Github, please try again later.', | ||
21 | }, | ||
22 | connectionErrorPageMissing: { | ||
23 | id: 'settings.releasenotes.connectionErrorPageMissing', | ||
24 | defaultMessage: | ||
25 | 'An error occured when connecting to Github, the page you are looking for is missing.', | ||
26 | }, | ||
27 | }); | ||
28 | |||
29 | interface IProps { | ||
30 | intl: any; | ||
31 | } | ||
32 | |||
33 | class ReleaseNotesDashboard extends Component<IProps> { | ||
34 | state = { | ||
35 | data: '', | ||
36 | }; | ||
37 | |||
38 | constructor(props) { | ||
39 | super(props); | ||
40 | |||
41 | this.state = { data: '' }; | ||
42 | } | ||
43 | |||
44 | async componentDidMount() { | ||
45 | const { intl } = this.props; | ||
46 | |||
47 | const data = await getUpdateInfoFromGH( | ||
48 | window.location.href, | ||
49 | ferdiumVersion, | ||
50 | intl, | ||
51 | ); | ||
52 | |||
53 | this.setState({ | ||
54 | data, | ||
55 | }); | ||
56 | |||
57 | for (const link of document.querySelectorAll('.releasenotes__body a')) { | ||
58 | link.addEventListener('click', this.handleClick.bind(this), false); | ||
59 | } | ||
60 | } | ||
61 | |||
62 | handleClick(e) { | ||
63 | e.preventDefault(); | ||
64 | openExternalUrl(e.target.href); | ||
65 | } | ||
66 | |||
67 | componentWillUnmount() { | ||
68 | document.removeEventListener( | ||
69 | 'click', | ||
70 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
71 | this.handleClick.bind(this), | ||
72 | false, | ||
73 | ); | ||
74 | } | ||
75 | |||
76 | render() { | ||
77 | const { intl } = this.props; | ||
78 | |||
79 | const { data } = this.state; | ||
80 | return ( | ||
81 | <div className="settings__main"> | ||
82 | <div className="settings__header"> | ||
83 | <span className="settings__header-item"> | ||
84 | Ferdium {getFerdiumVersion(window.location.href, ferdiumVersion)}{' '} | ||
85 | {' | '} | ||
86 | </span> | ||
87 | <span className="settings__header-item__secondary"> | ||
88 | {intl.formatMessage(messages.headline)} | ||
89 | </span> | ||
90 | </div> | ||
91 | <div className="settings__body releasenotes__body"> | ||
92 | <Markdown options={{ wrapper: 'article' }}>{data}</Markdown> | ||
93 | </div> | ||
94 | </div> | ||
95 | ); | ||
96 | } | ||
97 | } | ||
98 | |||
99 | export default injectIntl(observer(ReleaseNotesDashboard)); | ||
diff --git a/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx new file mode 100644 index 000000000..ee0ba75a8 --- /dev/null +++ b/src/components/settings/releaseNotes/ReleaseNotesLayout.tsx | |||
@@ -0,0 +1,79 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import { defineMessages, injectIntl } from 'react-intl'; | ||
4 | |||
5 | import { mdiClose } from '@mdi/js'; | ||
6 | import { Outlet } from 'react-router-dom'; | ||
7 | import { StoresProps } from '../../../@types/ferdium-components.types'; | ||
8 | import ErrorBoundary from '../../util/ErrorBoundary'; | ||
9 | import Appear from '../../ui/effects/Appear'; | ||
10 | import Icon from '../../ui/icon'; | ||
11 | import { isEscKeyPress } from '../../../jsUtils'; | ||
12 | |||
13 | const messages = defineMessages({ | ||
14 | closeSettings: { | ||
15 | id: 'settings.app.closeSettings', | ||
16 | defaultMessage: 'Close settings', | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | interface IProps extends StoresProps { | ||
21 | intl: any; | ||
22 | } | ||
23 | |||
24 | class ReleaseNotesLayout extends Component<IProps> { | ||
25 | componentDidMount() { | ||
26 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | ||
27 | } | ||
28 | |||
29 | componentWillUnmount() { | ||
30 | document.removeEventListener( | ||
31 | 'keydown', | ||
32 | // eslint-disable-next-line unicorn/no-invalid-remove-event-listener | ||
33 | this.handleKeyDown.bind(this), | ||
34 | false, | ||
35 | ); | ||
36 | } | ||
37 | |||
38 | handleKeyDown(e) { | ||
39 | if (isEscKeyPress(e.keyCode)) { | ||
40 | this.props.actions.ui.closeSettings(); | ||
41 | } | ||
42 | } | ||
43 | |||
44 | render() { | ||
45 | const { closeSettings } = this.props.actions.ui; | ||
46 | |||
47 | const { intl } = this.props; | ||
48 | |||
49 | return ( | ||
50 | <Appear transitionName="fadeIn-fast"> | ||
51 | <div className="settings-wrapper"> | ||
52 | <ErrorBoundary> | ||
53 | <button | ||
54 | type="button" | ||
55 | className="settings-wrapper__action" | ||
56 | onClick={closeSettings} | ||
57 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
58 | /> | ||
59 | <div className="settings franz-form"> | ||
60 | <Outlet /> | ||
61 | <button | ||
62 | type="button" | ||
63 | className="settings__close" | ||
64 | onClick={closeSettings} | ||
65 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
66 | > | ||
67 | <Icon icon={mdiClose} size={1.35} /> | ||
68 | </button> | ||
69 | </div> | ||
70 | </ErrorBoundary> | ||
71 | </div> | ||
72 | </Appear> | ||
73 | ); | ||
74 | } | ||
75 | } | ||
76 | |||
77 | export default injectIntl<'intl', IProps>( | ||
78 | inject('stores', 'actions')(observer(ReleaseNotesLayout)), | ||
79 | ); | ||
diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx index cb1d261f8..a10d89570 100644 --- a/src/components/settings/settings/EditSettingsForm.jsx +++ b/src/components/settings/settings/EditSettingsForm.jsx | |||
@@ -15,6 +15,13 @@ import Input from '../../ui/Input'; | |||
15 | import ColorPickerInput from '../../ui/ColorPickerInput'; | 15 | import ColorPickerInput from '../../ui/ColorPickerInput'; |
16 | import Infobox from '../../ui/Infobox'; | 16 | import Infobox from '../../ui/Infobox'; |
17 | import { H1, H2, H3, H5 } from '../../ui/headline'; | 17 | import { H1, H2, H3, H5 } from '../../ui/headline'; |
18 | import { | ||
19 | ferdiumVersion, | ||
20 | userDataPath, | ||
21 | userDataRecipesPath, | ||
22 | } from '../../../environment-remote'; | ||
23 | |||
24 | import { updateVersionParse } from '../../../helpers/update-helpers'; | ||
18 | 25 | ||
19 | import { | 26 | import { |
20 | DEFAULT_ACCENT_COLOR, | 27 | DEFAULT_ACCENT_COLOR, |
@@ -25,11 +32,6 @@ import { | |||
25 | SPLIT_COLUMNS_MIN, | 32 | SPLIT_COLUMNS_MIN, |
26 | } from '../../../config'; | 33 | } from '../../../config'; |
27 | import { isMac, isWindows, lockFerdiumShortcutKey } from '../../../environment'; | 34 | import { isMac, isWindows, lockFerdiumShortcutKey } from '../../../environment'; |
28 | import { | ||
29 | ferdiumVersion, | ||
30 | userDataPath, | ||
31 | userDataRecipesPath, | ||
32 | } from '../../../environment-remote'; | ||
33 | import { openExternalUrl, openPath } from '../../../helpers/url-helpers'; | 35 | import { openExternalUrl, openPath } from '../../../helpers/url-helpers'; |
34 | import globalMessages from '../../../i18n/globalMessages'; | 36 | import globalMessages from '../../../i18n/globalMessages'; |
35 | import Icon from '../../ui/icon'; | 37 | import Icon from '../../ui/icon'; |
@@ -213,6 +215,10 @@ const messages = defineMessages({ | |||
213 | id: 'settings.app.buttonInstallUpdate', | 215 | id: 'settings.app.buttonInstallUpdate', |
214 | defaultMessage: 'Restart & install update', | 216 | defaultMessage: 'Restart & install update', |
215 | }, | 217 | }, |
218 | buttonShowChangelog: { | ||
219 | id: 'settings.app.buttonShowChangelog', | ||
220 | defaultMessage: 'Show changelog', | ||
221 | }, | ||
216 | updateStatusSearching: { | 222 | updateStatusSearching: { |
217 | id: 'settings.app.updateStatusSearching', | 223 | id: 'settings.app.updateStatusSearching', |
218 | defaultMessage: 'Searching for updates...', | 224 | defaultMessage: 'Searching for updates...', |
@@ -328,6 +334,7 @@ class EditSettingsForm extends Component { | |||
328 | checkForUpdates, | 334 | checkForUpdates, |
329 | installUpdate, | 335 | installUpdate, |
330 | form, | 336 | form, |
337 | updateVersion, | ||
331 | isCheckingForUpdates, | 338 | isCheckingForUpdates, |
332 | isAdaptableDarkModeEnabled, | 339 | isAdaptableDarkModeEnabled, |
333 | isUseGrayscaleServicesEnabled, | 340 | isUseGrayscaleServicesEnabled, |
@@ -1002,6 +1009,20 @@ class EditSettingsForm extends Component { | |||
1002 | loaded={!isCheckingForUpdates || !isUpdateAvailable} | 1009 | loaded={!isCheckingForUpdates || !isUpdateAvailable} |
1003 | /> | 1010 | /> |
1004 | )} | 1011 | )} |
1012 | {(isUpdateAvailable || updateIsReadyToInstall) && ( | ||
1013 | <Button | ||
1014 | className="settings__updates__changelog-button" | ||
1015 | label={intl.formatMessage( | ||
1016 | messages.buttonShowChangelog, | ||
1017 | )} | ||
1018 | onClick={() => { | ||
1019 | window.location.href = `#/releasenotes${updateVersionParse( | ||
1020 | updateVersion, | ||
1021 | )}`; | ||
1022 | }} | ||
1023 | /> | ||
1024 | )} | ||
1025 | <br /> | ||
1005 | <br /> | 1026 | <br /> |
1006 | </div> | 1027 | </div> |
1007 | <p> | 1028 | <p> |