diff options
Diffstat (limited to 'src/components/ui')
-rw-r--r-- | src/components/ui/AppLoader/index.js | 4 | ||||
-rw-r--r-- | src/components/ui/FullscreenLoader/index.js | 4 | ||||
-rw-r--r-- | src/components/ui/Infobox.js | 17 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/index.js | 21 | ||||
-rw-r--r-- | src/components/ui/PremiumFeatureContainer/styles.js | 5 | ||||
-rw-r--r-- | src/components/ui/ServiceIcon.js | 67 | ||||
-rw-r--r-- | src/components/ui/WebviewLoader/index.js | 18 |
7 files changed, 122 insertions, 14 deletions
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js index 61053f6d1..b0c7fed7b 100644 --- a/src/components/ui/AppLoader/index.js +++ b/src/components/ui/AppLoader/index.js | |||
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component | |||
23 | static propTypes = { | 23 | static propTypes = { |
24 | classes: PropTypes.object.isRequired, | 24 | classes: PropTypes.object.isRequired, |
25 | theme: PropTypes.object.isRequired, | 25 | theme: PropTypes.object.isRequired, |
26 | } | 26 | }; |
27 | 27 | ||
28 | state = { | 28 | state = { |
29 | step: 0, | 29 | step: 0, |
30 | } | 30 | }; |
31 | 31 | ||
32 | interval = null; | 32 | interval = null; |
33 | 33 | ||
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js index 6ecf4d395..06dab1eb6 100644 --- a/src/components/ui/FullscreenLoader/index.js +++ b/src/components/ui/FullscreenLoader/index.js | |||
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader | |||
16 | theme: PropTypes.object.isRequired, | 16 | theme: PropTypes.object.isRequired, |
17 | spinnerColor: PropTypes.string, | 17 | spinnerColor: PropTypes.string, |
18 | children: PropTypes.node, | 18 | children: PropTypes.node, |
19 | } | 19 | }; |
20 | 20 | ||
21 | static defaultProps = { | 21 | static defaultProps = { |
22 | className: null, | 22 | className: null, |
23 | spinnerColor: null, | 23 | spinnerColor: null, |
24 | children: null, | 24 | children: null, |
25 | } | 25 | }; |
26 | 26 | ||
27 | render() { | 27 | render() { |
28 | const { | 28 | const { |
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js index a33c6474a..0917ee9f0 100644 --- a/src/components/ui/Infobox.js +++ b/src/components/ui/Infobox.js | |||
@@ -13,6 +13,8 @@ export default @observer class Infobox extends Component { | |||
13 | ctaLabel: PropTypes.string, | 13 | ctaLabel: PropTypes.string, |
14 | ctaLoading: PropTypes.bool, | 14 | ctaLoading: PropTypes.bool, |
15 | dismissable: PropTypes.bool, | 15 | dismissable: PropTypes.bool, |
16 | onDismiss: PropTypes.func, | ||
17 | onSeen: PropTypes.func, | ||
16 | }; | 18 | }; |
17 | 19 | ||
18 | static defaultProps = { | 20 | static defaultProps = { |
@@ -22,12 +24,19 @@ export default @observer class Infobox extends Component { | |||
22 | ctaOnClick: () => null, | 24 | ctaOnClick: () => null, |
23 | ctaLabel: '', | 25 | ctaLabel: '', |
24 | ctaLoading: false, | 26 | ctaLoading: false, |
27 | onDismiss: () => null, | ||
28 | onSeen: () => null, | ||
25 | }; | 29 | }; |
26 | 30 | ||
27 | state = { | 31 | state = { |
28 | dismissed: false, | 32 | dismissed: false, |
29 | }; | 33 | }; |
30 | 34 | ||
35 | componentDidMount() { | ||
36 | const { onSeen } = this.props; | ||
37 | if (onSeen) onSeen(); | ||
38 | } | ||
39 | |||
31 | render() { | 40 | render() { |
32 | const { | 41 | const { |
33 | children, | 42 | children, |
@@ -37,6 +46,7 @@ export default @observer class Infobox extends Component { | |||
37 | ctaLoading, | 46 | ctaLoading, |
38 | ctaOnClick, | 47 | ctaOnClick, |
39 | dismissable, | 48 | dismissable, |
49 | onDismiss, | ||
40 | } = this.props; | 50 | } = this.props; |
41 | 51 | ||
42 | if (this.state.dismissed) { | 52 | if (this.state.dismissed) { |
@@ -76,9 +86,10 @@ export default @observer class Infobox extends Component { | |||
76 | {dismissable && ( | 86 | {dismissable && ( |
77 | <button | 87 | <button |
78 | type="button" | 88 | type="button" |
79 | onClick={() => this.setState({ | 89 | onClick={() => { |
80 | dismissed: true, | 90 | this.setState({ dismissed: true }); |
81 | })} | 91 | if (onDismiss) onDismiss(); |
92 | }} | ||
82 | className="infobox__delete mdi mdi-close" | 93 | className="infobox__delete mdi mdi-close" |
83 | /> | 94 | /> |
84 | )} | 95 | )} |
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js index 67cd6af0b..3c1e0fac3 100644 --- a/src/components/ui/PremiumFeatureContainer/index.js +++ b/src/components/ui/PremiumFeatureContainer/index.js | |||
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types'; | |||
9 | import UserStore from '../../../stores/UserStore'; | 9 | import UserStore from '../../../stores/UserStore'; |
10 | 10 | ||
11 | import styles from './styles'; | 11 | import styles from './styles'; |
12 | import { gaEvent } from '../../../lib/analytics'; | ||
12 | 13 | ||
13 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
14 | action: { | 15 | action: { |
@@ -17,14 +18,21 @@ const messages = defineMessages({ | |||
17 | }, | 18 | }, |
18 | }); | 19 | }); |
19 | 20 | ||
20 | export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component { | 21 | @inject('stores', 'actions') @injectSheet(styles) @observer |
22 | class PremiumFeatureContainer extends Component { | ||
21 | static propTypes = { | 23 | static propTypes = { |
22 | classes: PropTypes.object.isRequired, | 24 | classes: PropTypes.object.isRequired, |
23 | condition: PropTypes.bool, | 25 | condition: PropTypes.bool, |
26 | gaEventInfo: PropTypes.shape({ | ||
27 | category: PropTypes.string.isRequired, | ||
28 | event: PropTypes.string.isRequired, | ||
29 | label: PropTypes.string, | ||
30 | }), | ||
24 | }; | 31 | }; |
25 | 32 | ||
26 | static defaultProps = { | 33 | static defaultProps = { |
27 | condition: true, | 34 | condition: true, |
35 | gaEventInfo: null, | ||
28 | }; | 36 | }; |
29 | 37 | ||
30 | static contextTypes = { | 38 | static contextTypes = { |
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class | |||
38 | actions, | 46 | actions, |
39 | condition, | 47 | condition, |
40 | stores, | 48 | stores, |
49 | gaEventInfo, | ||
41 | } = this.props; | 50 | } = this.props; |
42 | 51 | ||
43 | const { intl } = this.context; | 52 | const { intl } = this.context; |
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class | |||
49 | <button | 58 | <button |
50 | className={classes.actionButton} | 59 | className={classes.actionButton} |
51 | type="button" | 60 | type="button" |
52 | onClick={() => actions.ui.openSettings({ path: 'user' })} | 61 | onClick={() => { |
62 | actions.ui.openSettings({ path: 'user' }); | ||
63 | if (gaEventInfo) { | ||
64 | const { category, event, label } = gaEventInfo; | ||
65 | gaEvent(category, event, label); | ||
66 | } | ||
67 | }} | ||
53 | > | 68 | > |
54 | {intl.formatMessage(messages.action)} | 69 | {intl.formatMessage(messages.action)} |
55 | </button> | 70 | </button> |
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = { | |||
73 | }).isRequired, | 88 | }).isRequired, |
74 | }).isRequired, | 89 | }).isRequired, |
75 | }; | 90 | }; |
91 | |||
92 | export default PremiumFeatureContainer; | ||
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js index 81d6666c6..41881e044 100644 --- a/src/components/ui/PremiumFeatureContainer/styles.js +++ b/src/components/ui/PremiumFeatureContainer/styles.js | |||
@@ -6,6 +6,7 @@ export default theme => ({ | |||
6 | padding: 20, | 6 | padding: 20, |
7 | 'border-radius': theme.borderRadius, | 7 | 'border-radius': theme.borderRadius, |
8 | pointerEvents: 'none', | 8 | pointerEvents: 'none', |
9 | height: 'auto', | ||
9 | }, | 10 | }, |
10 | titleContainer: { | 11 | titleContainer: { |
11 | display: 'flex', | 12 | display: 'flex', |
@@ -19,14 +20,14 @@ export default theme => ({ | |||
19 | color: theme.colorSubscriptionContainerActionButtonColor, | 20 | color: theme.colorSubscriptionContainerActionButtonColor, |
20 | 'margin-left': 'auto', | 21 | 'margin-left': 'auto', |
21 | 'border-radius': theme.borderRadiusSmall, | 22 | 'border-radius': theme.borderRadiusSmall, |
22 | padding: [2, 4], | 23 | padding: [4, 8], |
23 | 'font-size': 12, | 24 | 'font-size': 12, |
24 | pointerEvents: 'initial', | 25 | pointerEvents: 'initial', |
25 | }, | 26 | }, |
26 | content: { | 27 | content: { |
27 | opacity: 0.5, | 28 | opacity: 0.5, |
28 | 'margin-top': 20, | 29 | 'margin-top': 20, |
29 | '& :last-child': { | 30 | '& > :last-child': { |
30 | 'margin-bottom': 0, | 31 | 'margin-bottom': 0, |
31 | }, | 32 | }, |
32 | }, | 33 | }, |
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js new file mode 100644 index 000000000..0b9155a4e --- /dev/null +++ b/src/components/ui/ServiceIcon.js | |||
@@ -0,0 +1,67 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | import ServiceModel from '../../models/Service'; | ||
8 | |||
9 | const styles = theme => ({ | ||
10 | root: { | ||
11 | height: 'auto', | ||
12 | }, | ||
13 | icon: { | ||
14 | width: theme.serviceIcon.width, | ||
15 | }, | ||
16 | isCustomIcon: { | ||
17 | width: theme.serviceIcon.isCustom.width, | ||
18 | border: theme.serviceIcon.isCustom.border, | ||
19 | borderRadius: theme.serviceIcon.isCustom.borderRadius, | ||
20 | }, | ||
21 | isDisabled: { | ||
22 | filter: 'grayscale(100%)', | ||
23 | opacity: '.5', | ||
24 | }, | ||
25 | }); | ||
26 | |||
27 | @injectSheet(styles) @observer | ||
28 | class ServiceIcon extends Component { | ||
29 | static propTypes = { | ||
30 | classes: PropTypes.object.isRequired, | ||
31 | service: PropTypes.instanceOf(ServiceModel).isRequired, | ||
32 | className: PropTypes.string, | ||
33 | }; | ||
34 | |||
35 | static defaultProps = { | ||
36 | className: '', | ||
37 | }; | ||
38 | |||
39 | render() { | ||
40 | const { | ||
41 | classes, | ||
42 | className, | ||
43 | service, | ||
44 | } = this.props; | ||
45 | |||
46 | return ( | ||
47 | <div | ||
48 | className={classnames([ | ||
49 | classes.root, | ||
50 | className, | ||
51 | ])} | ||
52 | > | ||
53 | <img | ||
54 | src={service.icon} | ||
55 | className={classnames([ | ||
56 | classes.icon, | ||
57 | service.isEnabled ? null : classes.isDisabled, | ||
58 | service.hasCustomIcon ? classes.isCustomIcon : null, | ||
59 | ])} | ||
60 | alt="" | ||
61 | /> | ||
62 | </div> | ||
63 | ); | ||
64 | } | ||
65 | } | ||
66 | |||
67 | export default ServiceIcon; | ||
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js index 3a3dbbe49..58b6b6f1b 100644 --- a/src/components/ui/WebviewLoader/index.js +++ b/src/components/ui/WebviewLoader/index.js | |||
@@ -2,23 +2,35 @@ 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 injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
5 | 6 | ||
6 | import FullscreenLoader from '../FullscreenLoader'; | 7 | import FullscreenLoader from '../FullscreenLoader'; |
7 | |||
8 | import styles from './styles'; | 8 | import styles from './styles'; |
9 | 9 | ||
10 | const messages = defineMessages({ | ||
11 | loading: { | ||
12 | id: 'service.webviewLoader.loading', | ||
13 | defaultMessage: '!!!Loading', | ||
14 | }, | ||
15 | }); | ||
16 | |||
10 | export default @observer @injectSheet(styles) class WebviewLoader extends Component { | 17 | export default @observer @injectSheet(styles) class WebviewLoader extends Component { |
11 | static propTypes = { | 18 | static propTypes = { |
12 | name: PropTypes.string.isRequired, | 19 | name: PropTypes.string.isRequired, |
13 | classes: PropTypes.object.isRequired, | 20 | classes: PropTypes.object.isRequired, |
14 | } | 21 | }; |
22 | |||
23 | static contextTypes = { | ||
24 | intl: intlShape, | ||
25 | }; | ||
15 | 26 | ||
16 | render() { | 27 | render() { |
17 | const { classes, name } = this.props; | 28 | const { classes, name } = this.props; |
29 | const { intl } = this.context; | ||
18 | return ( | 30 | return ( |
19 | <FullscreenLoader | 31 | <FullscreenLoader |
20 | className={classes.component} | 32 | className={classes.component} |
21 | title={`Loading ${name}`} | 33 | title={`${intl.formatMessage(messages.loading)} ${name}`} |
22 | /> | 34 | /> |
23 | ); | 35 | ); |
24 | } | 36 | } |