diff options
Diffstat (limited to 'src/components/settings')
-rw-r--r-- | src/components/settings/SettingsLayout.js | 37 | ||||
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 15 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 9 | ||||
-rw-r--r-- | src/components/settings/team/TeamDashboard.js | 1 |
4 files changed, 38 insertions, 24 deletions
diff --git a/src/components/settings/SettingsLayout.js b/src/components/settings/SettingsLayout.js index 72ba7b2e3..5b3b754fa 100644 --- a/src/components/settings/SettingsLayout.js +++ b/src/components/settings/SettingsLayout.js | |||
@@ -1,38 +1,55 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
4 | 5 | ||
5 | import ErrorBoundary from '../util/ErrorBoundary'; | 6 | import ErrorBoundary from '../util/ErrorBoundary'; |
6 | import { oneOrManyChildElements } from '../../prop-types'; | 7 | import { oneOrManyChildElements } from '../../prop-types'; |
7 | import Appear from '../ui/effects/Appear'; | 8 | import Appear from '../ui/effects/Appear'; |
8 | 9 | ||
9 | export default @observer class SettingsLayout extends Component { | 10 | const messages = defineMessages({ |
11 | closeSettings: { | ||
12 | id: 'settings.app.closeSettings', | ||
13 | defaultMessage: '!!!Close settings', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | export default | ||
18 | @observer | ||
19 | class SettingsLayout extends Component { | ||
10 | static propTypes = { | 20 | static propTypes = { |
11 | navigation: PropTypes.element.isRequired, | 21 | navigation: PropTypes.element.isRequired, |
12 | children: oneOrManyChildElements.isRequired, | 22 | children: oneOrManyChildElements.isRequired, |
13 | closeSettings: PropTypes.func.isRequired, | 23 | closeSettings: PropTypes.func.isRequired, |
14 | }; | 24 | }; |
15 | 25 | ||
16 | componentWillMount() { | 26 | static contextTypes = { |
27 | intl: intlShape, | ||
28 | }; | ||
29 | |||
30 | componentDidMount() { | ||
17 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); | 31 | document.addEventListener('keydown', this.handleKeyDown.bind(this), false); |
18 | } | 32 | } |
19 | 33 | ||
20 | componentWillUnmount() { | 34 | componentWillUnmount() { |
21 | document.removeEventListener('keydown', this.handleKeyDown.bind(this), false); | 35 | document.removeEventListener( |
36 | 'keydown', | ||
37 | this.handleKeyDown.bind(this), | ||
38 | false, | ||
39 | ); | ||
22 | } | 40 | } |
23 | 41 | ||
24 | handleKeyDown(e) { | 42 | handleKeyDown(e) { |
25 | if (e.keyCode === 27) { // escape key | 43 | if (e.keyCode === 27) { |
44 | // escape key | ||
26 | this.props.closeSettings(); | 45 | this.props.closeSettings(); |
27 | } | 46 | } |
28 | } | 47 | } |
29 | 48 | ||
30 | render() { | 49 | render() { |
31 | const { | 50 | const { navigation, children, closeSettings } = this.props; |
32 | navigation, | 51 | |
33 | children, | 52 | const { intl } = this.context; |
34 | closeSettings, | ||
35 | } = this.props; | ||
36 | 53 | ||
37 | return ( | 54 | return ( |
38 | <Appear transitionName="fadeIn-fast"> | 55 | <Appear transitionName="fadeIn-fast"> |
@@ -42,6 +59,7 @@ export default @observer class SettingsLayout extends Component { | |||
42 | type="button" | 59 | type="button" |
43 | className="settings-wrapper__action" | 60 | className="settings-wrapper__action" |
44 | onClick={closeSettings} | 61 | onClick={closeSettings} |
62 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
45 | /> | 63 | /> |
46 | <div className="settings franz-form"> | 64 | <div className="settings franz-form"> |
47 | {navigation} | 65 | {navigation} |
@@ -50,6 +68,7 @@ export default @observer class SettingsLayout extends Component { | |||
50 | type="button" | 68 | type="button" |
51 | className="settings__close mdi mdi-close" | 69 | className="settings__close mdi mdi-close" |
52 | onClick={closeSettings} | 70 | onClick={closeSettings} |
71 | aria-label={intl.formatMessage(messages.closeSettings)} | ||
53 | /> | 72 | /> |
54 | </div> | 73 | </div> |
55 | </ErrorBoundary> | 74 | </ErrorBoundary> |
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 1bbc1f1d4..a8501670b 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -311,14 +311,14 @@ export default @observer class EditServiceForm extends Component { | |||
311 | {recipe.hasCustomUrl && ( | 311 | {recipe.hasCustomUrl && ( |
312 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> | 312 | <TabItem title={intl.formatMessage(messages.tabOnPremise)}> |
313 | {user.isPremium || recipe.author.find(a => a.email === user.email) ? ( | 313 | {user.isPremium || recipe.author.find(a => a.email === user.email) ? ( |
314 | <Fragment> | 314 | <> |
315 | <Input field={form.$('customUrl')} /> | 315 | <Input field={form.$('customUrl')} /> |
316 | {form.error === 'url-validation-error' && ( | 316 | {form.error === 'url-validation-error' && ( |
317 | <p className="franz-form__error"> | 317 | <p className="franz-form__error"> |
318 | {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })} | 318 | {intl.formatMessage(messages.customUrlValidationError, { name: recipe.name })} |
319 | </p> | 319 | </p> |
320 | )} | 320 | )} |
321 | </Fragment> | 321 | </> |
322 | ) : ( | 322 | ) : ( |
323 | <div className="center premium-info"> | 323 | <div className="center premium-info"> |
324 | <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p> | 324 | <p>{intl.formatMessage(messages.customUrlPremiumInfo)}</p> |
@@ -360,12 +360,12 @@ export default @observer class EditServiceForm extends Component { | |||
360 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 360 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
361 | <Toggle field={form.$('isBadgeEnabled')} /> | 361 | <Toggle field={form.$('isBadgeEnabled')} /> |
362 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( | 362 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( |
363 | <Fragment> | 363 | <> |
364 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 364 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> |
365 | <p className="settings__help"> | 365 | <p className="settings__help"> |
366 | {intl.formatMessage(messages.indirectMessageInfo)} | 366 | {intl.formatMessage(messages.indirectMessageInfo)} |
367 | </p> | 367 | </p> |
368 | </Fragment> | 368 | </> |
369 | )} | 369 | )} |
370 | </div> | 370 | </div> |
371 | 371 | ||
@@ -389,8 +389,7 @@ export default @observer class EditServiceForm extends Component { | |||
389 | <Slider field={form.$('darkReaderContrast')} /> | 389 | <Slider field={form.$('darkReaderContrast')} /> |
390 | <Slider field={form.$('darkReaderSepia')} /> | 390 | <Slider field={form.$('darkReaderSepia')} /> |
391 | </> | 391 | </> |
392 | ) | 392 | )} |
393 | } | ||
394 | </div> | 393 | </div> |
395 | </div> | 394 | </div> |
396 | <div className="service-icon"> | 395 | <div className="service-icon"> |
@@ -425,7 +424,7 @@ export default @observer class EditServiceForm extends Component { | |||
425 | </h3> | 424 | </h3> |
426 | <Toggle field={form.$('proxy.isEnabled')} /> | 425 | <Toggle field={form.$('proxy.isEnabled')} /> |
427 | {form.$('proxy.isEnabled').value && ( | 426 | {form.$('proxy.isEnabled').value && ( |
428 | <Fragment> | 427 | <> |
429 | <div className="grid"> | 428 | <div className="grid"> |
430 | <div className="grid__row"> | 429 | <div className="grid__row"> |
431 | <Input field={form.$('proxy.host')} className="proxyHost" /> | 430 | <Input field={form.$('proxy.host')} className="proxyHost" /> |
@@ -449,7 +448,7 @@ export default @observer class EditServiceForm extends Component { | |||
449 | <span className="mdi mdi-information" /> | 448 | <span className="mdi mdi-information" /> |
450 | {intl.formatMessage(messages.proxyInfo)} | 449 | {intl.formatMessage(messages.proxyInfo)} |
451 | </p> | 450 | </p> |
452 | </Fragment> | 451 | </> |
453 | )} | 452 | )} |
454 | </div> | 453 | </div> |
455 | </PremiumFeatureContainer> | 454 | </PremiumFeatureContainer> |
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 4ba7dc720..98a119bfa 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -567,7 +567,7 @@ export default @observer class EditSettingsForm extends Component { | |||
567 | condition={!isSpellcheckerIncludedInCurrentPlan} | 567 | condition={!isSpellcheckerIncludedInCurrentPlan} |
568 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }} | 568 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }} |
569 | > | 569 | > |
570 | <Fragment> | 570 | <> |
571 | <Toggle | 571 | <Toggle |
572 | field={form.$('enableSpellchecking')} | 572 | field={form.$('enableSpellchecking')} |
573 | /> | 573 | /> |
@@ -577,7 +577,7 @@ export default @observer class EditSettingsForm extends Component { | |||
577 | {isMac && form.$('enableSpellchecking').value && ( | 577 | {isMac && form.$('enableSpellchecking').value && ( |
578 | <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p> | 578 | <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p> |
579 | )} | 579 | )} |
580 | </Fragment> | 580 | </> |
581 | </PremiumFeatureContainer> | 581 | </PremiumFeatureContainer> |
582 | <a | 582 | <a |
583 | href={FRANZ_TRANSLATION} | 583 | href={FRANZ_TRANSLATION} |
@@ -679,18 +679,15 @@ export default @observer class EditSettingsForm extends Component { | |||
679 | <br /> | 679 | <br /> |
680 | {intl.formatMessage(messages.updateStatusUpToDate)} | 680 | {intl.formatMessage(messages.updateStatusUpToDate)} |
681 | </> | 681 | </> |
682 | ) | 682 | )} |
683 | } | ||
684 | <p className="settings__message"> | 683 | <p className="settings__message"> |
685 | <span className="mdi mdi-github-face" /> | 684 | <span className="mdi mdi-github-face" /> |
686 | <span> | 685 | <span> |
687 | 686 | ||
688 | |||
689 | Ferdi is based on | 687 | Ferdi is based on |
690 | {' '} | 688 | {' '} |
691 | <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a> | 689 | <a href={`${GITHUB_FRANZ_URL}/franz`} target="_blank">Franz</a> |
692 | 690 | ||
693 | |||
694 | , a project published | 691 | , a project published |
695 | under the | 692 | under the |
696 | {' '} | 693 | {' '} |
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js index f26f4cc0c..602d6e490 100644 --- a/src/components/settings/team/TeamDashboard.js +++ b/src/components/settings/team/TeamDashboard.js | |||
@@ -98,7 +98,6 @@ const styles = { | |||
98 | }, | 98 | }, |
99 | }; | 99 | }; |
100 | 100 | ||
101 | |||
102 | export default @injectSheet(styles) @observer class TeamDashboard extends Component { | 101 | export default @injectSheet(styles) @observer class TeamDashboard extends Component { |
103 | static propTypes = { | 102 | static propTypes = { |
104 | isLoading: PropTypes.bool.isRequired, | 103 | isLoading: PropTypes.bool.isRequired, |