diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-11 16:54:01 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-11 16:54:01 +0200 |
commit | 47c1c99d893517efc679ab29d675cc0bf44be8be (patch) | |
tree | 9cab9697096bef0ce56d8ee8709bc1c2c3a42deb /src/components/ui | |
parent | test package order (diff) | |
download | ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.gz ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.tar.zst ferdium-app-47c1c99d893517efc679ab29d675cc0bf44be8be.zip |
feat(App): Added Workspaces for all your daily routines 🥳
* merge default and fetched feature configs
* ignore intellij project files
* basic setup for workspaces feature
* define workspaces as premium feature
* add workspaces menu item in settings dialog
* basic setup of workspaces settings screen
* fix eslint error
* assign react key prop to workspace items
* add styles for workspace table
* setup logic to display workspace edit page
* consolidate workspace feature for further development
* prepare basic workspace edit form
* add on enter key handler for form input component
* add form for creating workspaces
* small fixes
* adds flow for deleting workspaces
* stop tracking google analytics in components
* pin gulp-sass-variables version to 1.1.1
* fix merge conflict
* fix bug in form input library
* improve workspace form setup
* finish basic workspace settings
* finish workspaces mvp
* fix eslint issues
* remove dev logs
* detach service when underlying webview unmounts
* disable no-param-reassign eslint rule
* add workspace drawer
* change workspace switch shortcuts to start with zero
* add workspace drawer toggle menu item and shortcut
* improve workspace switching ux
* style add workspace icon in drawer like the sidebar icons
* improve workspace drawer layout
* add i18n messages for service loading and workspace switching
* small fixes
* add tooltip to add workspace button in drawer
* add workspaces count badge in settings navigation
* fix merge conflicts with latest develop
* refactor state management for workspace feature
* reset api requests when workspace feature is stopped
* hide workspace feature if it is disabled
* handle get workspaces request errors in the ui
* show infobox when updating workspaces
* indicate any server interaction with spinners and infoboxes
* add analytic events for workspace actions
* improve styling of workspace switch indicator
* add workspace premium notice to dashboard
* add workspace feature info in drawer for free users
* add workspace premium badge in settings nav
* fix premium workspace badge in settings menu for light theme
* fix active workspaces settings premium badge in light theme
* give upgrade account button a bit more padding
* add open last used workspace logic
* use mobx-localstorage directly in the store
* fix wrong workspace tooltip shortcut in sidebar
* fix bug in workspace feature initialization
* show workspaces intro in drawer when user has none yet
* fix issues for users that have workspace but downgraded to free
* border radius for premium intro in workspace settings
* close workspace drawer after clicking on a workspace
* add hover effect for drawer workspace items
* ensure drawer is open on workspace settings routes
* add small text label for adding new workspace to drawer
* make workspace settings list items taller
* refactor workspace table css away from legacy styles
* render workspace service list like services + toggle
* change plus icon in workspace drawer to settings icon
* autofocus create workspace input field
* add css transition to drawer workspace item hover
* fix drawer add workspace label styles
* refactors workspace theme vars into object structure
* improve contrast of workspace switching indicator
* added generic pro badge component for settings nav
* add premium badge to workspace drawer headline
* add context menu for workspace drawer items
* handle deleted services that are attached to workspaces
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 | } |