diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-11-25 23:02:12 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-11-25 23:02:12 +0100 |
commit | 0d9c7ff6a638861d54f29bf91c82847cfa62a24c (patch) | |
tree | 1091fc0fe9b498e7b6fa69386ed2586d298d9269 /src/components/ui | |
parent | Fix delayApp issues (diff) | |
download | ferdium-app-0d9c7ff6a638861d54f29bf91c82847cfa62a24c.tar.gz ferdium-app-0d9c7ff6a638861d54f29bf91c82847cfa62a24c.tar.zst ferdium-app-0d9c7ff6a638861d54f29bf91c82847cfa62a24c.zip |
Move spellchecker to premium
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 64 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 31 | ||||
-rw-r--r-- | src/components/ui/Toggle.js | 6 |
3 files changed, 100 insertions, 1 deletions
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js new file mode 100644 index 000000000..113fe2221 --- /dev/null +++ b/src/components/ui/PremiumFeatureContainer/index.js | |||
@@ -0,0 +1,64 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import { inject, observer } from 'mobx-react'; | ||
3 | import PropTypes from 'prop-types'; | ||
4 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | import injectSheet from 'react-jss'; | ||
6 | |||
7 | import { oneOrManyChildElements } from '../../../prop-types'; | ||
8 | |||
9 | import styles from './styles'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | action: { | ||
13 | id: 'premiumFeature.button.upgradeAccount', | ||
14 | defaultMessage: '!!!Upgrade account', | ||
15 | }, | ||
16 | }); | ||
17 | |||
18 | export default @inject('actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component { | ||
19 | static propTypes = { | ||
20 | classes: PropTypes.object.isRequired, | ||
21 | }; | ||
22 | |||
23 | static contextTypes = { | ||
24 | intl: intlShape, | ||
25 | }; | ||
26 | |||
27 | render() { | ||
28 | const { | ||
29 | classes, | ||
30 | children, | ||
31 | actions, | ||
32 | } = this.props; | ||
33 | |||
34 | const { intl } = this.context; | ||
35 | |||
36 | return ( | ||
37 | <div className={classes.container}> | ||
38 | <div className={classes.titleContainer}> | ||
39 | <p className={classes.title}>Premium Feature</p> | ||
40 | <button | ||
41 | className={classes.actionButton} | ||
42 | type="button" | ||
43 | onClick={() => actions.ui.openSettings({ path: 'user' })} | ||
44 | > | ||
45 | {intl.formatMessage(messages.action)} | ||
46 | </button> | ||
47 | </div> | ||
48 | <div className={classes.content}> | ||
49 | {children} | ||
50 | </div> | ||
51 | </div> | ||
52 | ); | ||
53 | } | ||
54 | } | ||
55 | |||
56 | PremiumFeatureContainer.wrappedComponent.propTypes = { | ||
57 | children: oneOrManyChildElements.isRequired, | ||
58 | actions: PropTypes.shape({ | ||
59 | ui: PropTypes.shape({ | ||
60 | openSettings: PropTypes.func.isRequired, | ||
61 | }).isRequired, | ||
62 | }).isRequired, | ||
63 | }; | ||
64 | |||
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js new file mode 100644 index 000000000..16c40d0ec --- /dev/null +++ b/src/components/ui/PremiumFeatureContainer/styles.js | |||
@@ -0,0 +1,31 @@ | |||
1 | export default theme => ({ | ||
2 | container: { | ||
3 | background: theme.colorSubscriptionContainerBackground, | ||
4 | border: theme.colorSubscriptionContainerBorder, | ||
5 | margin: [0, 0, 20, -20], | ||
6 | padding: 20, | ||
7 | 'border-radius': theme.borderRadius, | ||
8 | }, | ||
9 | titleContainer: { | ||
10 | display: 'flex', | ||
11 | }, | ||
12 | title: { | ||
13 | 'font-weight': 'bold', | ||
14 | color: theme.colorSubscriptionContainerTitle, | ||
15 | }, | ||
16 | actionButton: { | ||
17 | background: theme.colorSubscriptionContainerActionButtonBackground, | ||
18 | color: theme.colorSubscriptionContainerActionButtonColor, | ||
19 | 'margin-left': 'auto', | ||
20 | 'border-radius': theme.borderRadiusSmall, | ||
21 | padding: [2, 4], | ||
22 | 'font-size': 12, | ||
23 | }, | ||
24 | content: { | ||
25 | opacity: 0.5, | ||
26 | 'margin-top': 20, | ||
27 | '& :last-child': { | ||
28 | 'margin-bottom': 0, | ||
29 | }, | ||
30 | }, | ||
31 | }); | ||
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js index f7c2ec955..78fb77cbe 100644 --- a/src/components/ui/Toggle.js +++ b/src/components/ui/Toggle.js | |||
@@ -9,11 +9,13 @@ export default @observer class Toggle extends Component { | |||
9 | field: PropTypes.instanceOf(Field).isRequired, | 9 | field: PropTypes.instanceOf(Field).isRequired, |
10 | className: PropTypes.string, | 10 | className: PropTypes.string, |
11 | showLabel: PropTypes.bool, | 11 | showLabel: PropTypes.bool, |
12 | disabled: PropTypes.bool, | ||
12 | }; | 13 | }; |
13 | 14 | ||
14 | static defaultProps = { | 15 | static defaultProps = { |
15 | className: '', | 16 | className: '', |
16 | showLabel: true, | 17 | showLabel: true, |
18 | disabled: false, | ||
17 | }; | 19 | }; |
18 | 20 | ||
19 | onChange(e) { | 21 | onChange(e) { |
@@ -27,6 +29,7 @@ export default @observer class Toggle extends Component { | |||
27 | field, | 29 | field, |
28 | className, | 30 | className, |
29 | showLabel, | 31 | showLabel, |
32 | disabled, | ||
30 | } = this.props; | 33 | } = this.props; |
31 | 34 | ||
32 | if (field.value === '' && field.default !== '') { | 35 | if (field.value === '' && field.default !== '') { |
@@ -38,6 +41,7 @@ export default @observer class Toggle extends Component { | |||
38 | className={classnames([ | 41 | className={classnames([ |
39 | 'franz-form__field', | 42 | 'franz-form__field', |
40 | 'franz-form__toggle-wrapper', | 43 | 'franz-form__toggle-wrapper', |
44 | 'franz-form__toggle-disabled', | ||
41 | className, | 45 | className, |
42 | ])} | 46 | ])} |
43 | > | 47 | > |
@@ -55,7 +59,7 @@ export default @observer class Toggle extends Component { | |||
55 | name={field.name} | 59 | name={field.name} |
56 | value={field.name} | 60 | value={field.name} |
57 | checked={field.value} | 61 | checked={field.value} |
58 | onChange={e => this.onChange(e)} | 62 | onChange={e => (!disabled ? this.onChange(e) : null)} |
59 | /> | 63 | /> |
60 | </label> | 64 | </label> |
61 | {field.error && <div className={field.error}>{field.error}</div>} | 65 | {field.error && <div className={field.error}>{field.error}</div>} |