diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-09-03 20:33:00 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-09-03 20:33:00 +0200 |
commit | 3ca3e36cf7fce6b241e242a07cb4731760ee4265 (patch) | |
tree | 0796a3712aebbf695545892be19fc677e7acec8e /src/components/ui | |
parent | Automatic i18n update (i18n.meetfranz.com) (diff) | |
parent | Update en-US.json (diff) | |
download | ferdium-app-3ca3e36cf7fce6b241e242a07cb4731760ee4265.tar.gz ferdium-app-3ca3e36cf7fce6b241e242a07cb4731760ee4265.tar.zst ferdium-app-3ca3e36cf7fce6b241e242a07cb4731760ee4265.zip |
Merge branch 'develop' into i18n
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/FeatureItem.js | 37 | ||||
-rw-r--r-- | src/components/ui/FeatureList.js | 89 | ||||
-rw-r--r-- | src/components/ui/Modal/index.js | 3 |
3 files changed, 128 insertions, 1 deletions
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js new file mode 100644 index 000000000..53616f2eb --- /dev/null +++ b/src/components/ui/FeatureItem.js | |||
@@ -0,0 +1,37 @@ | |||
1 | import React from 'react'; | ||
2 | import injectSheet from 'react-jss'; | ||
3 | import { Icon } from '@meetfranz/ui'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { mdiCheckCircle } from '@mdi/js'; | ||
6 | |||
7 | const styles = theme => ({ | ||
8 | featureItem: { | ||
9 | borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark], | ||
10 | padding: [8, 0], | ||
11 | display: 'flex', | ||
12 | alignItems: 'center', | ||
13 | }, | ||
14 | featureIcon: { | ||
15 | fill: theme.brandSuccess, | ||
16 | marginRight: 10, | ||
17 | }, | ||
18 | }); | ||
19 | |||
20 | export const FeatureItem = injectSheet(styles)(({ | ||
21 | classes, className, name, icon, | ||
22 | }) => ( | ||
23 | <li className={classnames({ | ||
24 | [classes.featureItem]: true, | ||
25 | [className]: className, | ||
26 | })} | ||
27 | > | ||
28 | {icon ? ( | ||
29 | <span className={classes.featureIcon}>{icon}</span> | ||
30 | ) : ( | ||
31 | <Icon icon={mdiCheckCircle} className={classes.featureIcon} size={1.5} /> | ||
32 | )} | ||
33 | {name} | ||
34 | </li> | ||
35 | )); | ||
36 | |||
37 | export default FeatureItem; | ||
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js new file mode 100644 index 000000000..62944ad75 --- /dev/null +++ b/src/components/ui/FeatureList.js | |||
@@ -0,0 +1,89 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { defineMessages, intlShape } from 'react-intl'; | ||
4 | |||
5 | import { FeatureItem } from './FeatureItem'; | ||
6 | |||
7 | const messages = defineMessages({ | ||
8 | unlimitedServices: { | ||
9 | id: 'pricing.features.unlimitedServices', | ||
10 | defaultMessage: '!!!Add unlimited services', | ||
11 | }, | ||
12 | spellchecker: { | ||
13 | id: 'pricing.features.spellchecker', | ||
14 | defaultMessage: '!!!Spellchecker support', | ||
15 | }, | ||
16 | workspaces: { | ||
17 | id: 'pricing.features.workspaces', | ||
18 | defaultMessage: '!!!Workspaces', | ||
19 | }, | ||
20 | customWebsites: { | ||
21 | id: 'pricing.features.customWebsites', | ||
22 | defaultMessage: '!!!Add Custom Websites', | ||
23 | }, | ||
24 | onPremise: { | ||
25 | id: 'pricing.features.onPremise', | ||
26 | defaultMessage: '!!!On-premise & other Hosted Services', | ||
27 | }, | ||
28 | thirdPartyServices: { | ||
29 | id: 'pricing.features.thirdPartyServices', | ||
30 | defaultMessage: '!!!Install 3rd party services', | ||
31 | }, | ||
32 | serviceProxies: { | ||
33 | id: 'pricing.features.serviceProxies', | ||
34 | defaultMessage: '!!!Service Proxies', | ||
35 | }, | ||
36 | teamManagement: { | ||
37 | id: 'pricing.features.teamManagement', | ||
38 | defaultMessage: '!!!Team Management', | ||
39 | }, | ||
40 | appDelays: { | ||
41 | id: 'pricing.features.appDelays', | ||
42 | defaultMessage: '!!!No Waiting Screens', | ||
43 | }, | ||
44 | adFree: { | ||
45 | id: 'pricing.features.adFree', | ||
46 | defaultMessage: '!!!Forever ad-free', | ||
47 | }, | ||
48 | }); | ||
49 | |||
50 | export class FeatureList extends Component { | ||
51 | static propTypes = { | ||
52 | className: PropTypes.string, | ||
53 | featureClassName: PropTypes.string, | ||
54 | }; | ||
55 | |||
56 | static defaultProps = { | ||
57 | className: '', | ||
58 | featureClassName: '', | ||
59 | } | ||
60 | |||
61 | static contextTypes = { | ||
62 | intl: intlShape, | ||
63 | }; | ||
64 | |||
65 | render() { | ||
66 | const { | ||
67 | className, | ||
68 | featureClassName, | ||
69 | } = this.props; | ||
70 | const { intl } = this.context; | ||
71 | |||
72 | return ( | ||
73 | <ul className={className}> | ||
74 | <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} /> | ||
75 | <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} /> | ||
76 | <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} /> | ||
77 | <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} /> | ||
78 | <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} /> | ||
79 | <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} /> | ||
80 | <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} /> | ||
81 | <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} /> | ||
82 | <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} /> | ||
83 | <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} /> | ||
84 | </ul> | ||
85 | ); | ||
86 | } | ||
87 | } | ||
88 | |||
89 | export default FeatureList; | ||
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js index 0b7154760..63d858c47 100644 --- a/src/components/ui/Modal/index.js +++ b/src/components/ui/Modal/index.js | |||
@@ -5,6 +5,7 @@ import classnames from 'classnames'; | |||
5 | import injectCSS from 'react-jss'; | 5 | import injectCSS from 'react-jss'; |
6 | import { Icon } from '@meetfranz/ui'; | 6 | import { Icon } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import { mdiClose } from '@mdi/js'; | ||
8 | import styles from './styles'; | 9 | import styles from './styles'; |
9 | 10 | ||
10 | // ReactModal.setAppElement('#root'); | 11 | // ReactModal.setAppElement('#root'); |
@@ -59,7 +60,7 @@ export default @injectCSS(styles) class Modal extends Component { | |||
59 | className={classes.close} | 60 | className={classes.close} |
60 | onClick={close} | 61 | onClick={close} |
61 | > | 62 | > |
62 | <Icon icon="mdiClose" size={1.5} /> | 63 | <Icon icon={mdiClose} size={1.5} /> |
63 | </button> | 64 | </button> |
64 | )} | 65 | )} |
65 | <div className={classes.content}> | 66 | <div className={classes.content}> |