diff options
Diffstat (limited to 'src/features/workspaces/components')
6 files changed, 131 insertions, 213 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index bf7016e2f..1138f23d7 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -2,12 +2,11 @@ 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, FormattedHTMLMessage, intlShape } from 'react-intl'; | 5 | import { defineMessages, intlShape } from 'react-intl'; |
6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; | 6 | import { H1, Icon } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | ||
8 | import ReactTooltip from 'react-tooltip'; | 7 | import ReactTooltip from 'react-tooltip'; |
9 | 8 | ||
10 | import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js'; | 9 | import { mdiPlusBox, mdiSettings } from '@mdi/js'; |
11 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | 10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; |
12 | import { workspaceActions } from '../actions'; | 11 | import { workspaceActions } from '../actions'; |
13 | import { workspaceStore } from '../index'; | 12 | import { workspaceStore } from '../index'; |
@@ -29,25 +28,13 @@ const messages = defineMessages({ | |||
29 | id: 'workspaceDrawer.workspaceFeatureInfo', | 28 | id: 'workspaceDrawer.workspaceFeatureInfo', |
30 | defaultMessage: '!!!Info about workspace feature', | 29 | defaultMessage: '!!!Info about workspace feature', |
31 | }, | 30 | }, |
32 | premiumCtaButtonLabel: { | ||
33 | id: 'workspaceDrawer.premiumCtaButtonLabel', | ||
34 | defaultMessage: '!!!Create your first workspace', | ||
35 | }, | ||
36 | reactivatePremiumAccount: { | ||
37 | id: 'workspaceDrawer.reactivatePremiumAccountLabel', | ||
38 | defaultMessage: '!!!Reactivate premium account', | ||
39 | }, | ||
40 | addNewWorkspaceLabel: { | 31 | addNewWorkspaceLabel: { |
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 32 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
42 | defaultMessage: '!!!add new workspace', | 33 | defaultMessage: '!!!add new workspace', |
43 | }, | 34 | }, |
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
48 | }); | 35 | }); |
49 | 36 | ||
50 | const styles = theme => ({ | 37 | const styles = (theme) => ({ |
51 | drawer: { | 38 | drawer: { |
52 | background: theme.workspaces.drawer.background, | 39 | background: theme.workspaces.drawer.background, |
53 | width: `${theme.workspaces.drawer.width}px`, | 40 | width: `${theme.workspaces.drawer.width}px`, |
@@ -60,9 +47,6 @@ const styles = theme => ({ | |||
60 | marginBottom: '25px', | 47 | marginBottom: '25px', |
61 | marginLeft: theme.workspaces.drawer.padding, | 48 | marginLeft: theme.workspaces.drawer.padding, |
62 | }, | 49 | }, |
63 | headlineProBadge: { | ||
64 | marginRight: 15, | ||
65 | }, | ||
66 | workspacesSettingsButton: { | 50 | workspacesSettingsButton: { |
67 | float: 'right', | 51 | float: 'right', |
68 | marginRight: theme.workspaces.drawer.padding, | 52 | marginRight: theme.workspaces.drawer.padding, |
@@ -78,16 +62,6 @@ const styles = theme => ({ | |||
78 | height: 'auto', | 62 | height: 'auto', |
79 | overflowY: 'auto', | 63 | overflowY: 'auto', |
80 | }, | 64 | }, |
81 | premiumAnnouncement: { | ||
82 | padding: '20px', | ||
83 | paddingTop: '0', | ||
84 | height: 'auto', | ||
85 | }, | ||
86 | premiumCtaButton: { | ||
87 | marginTop: '20px', | ||
88 | width: '100%', | ||
89 | color: 'white !important', | ||
90 | }, | ||
91 | addNewWorkspaceLabel: { | 65 | addNewWorkspaceLabel: { |
92 | height: 'auto', | 66 | height: 'auto', |
93 | color: theme.workspaces.drawer.buttons.color, | 67 | color: theme.workspaces.drawer.buttons.color, |
@@ -116,7 +90,6 @@ class WorkspaceDrawer extends Component { | |||
116 | static propTypes = { | 90 | static propTypes = { |
117 | classes: PropTypes.object.isRequired, | 91 | classes: PropTypes.object.isRequired, |
118 | getServicesForWorkspace: PropTypes.func.isRequired, | 92 | getServicesForWorkspace: PropTypes.func.isRequired, |
119 | onUpgradeAccountClick: PropTypes.func.isRequired, | ||
120 | }; | 93 | }; |
121 | 94 | ||
122 | static contextTypes = { | 95 | static contextTypes = { |
@@ -131,7 +104,6 @@ class WorkspaceDrawer extends Component { | |||
131 | const { | 104 | const { |
132 | classes, | 105 | classes, |
133 | getServicesForWorkspace, | 106 | getServicesForWorkspace, |
134 | onUpgradeAccountClick, | ||
135 | } = this.props; | 107 | } = this.props; |
136 | const { intl } = this.context; | 108 | const { intl } = this.context; |
137 | const { | 109 | const { |
@@ -144,14 +116,6 @@ class WorkspaceDrawer extends Component { | |||
144 | return ( | 116 | return ( |
145 | <div className={`${classes.drawer} workspaces-drawer`}> | 117 | <div className={`${classes.drawer} workspaces-drawer`}> |
146 | <H1 className={classes.headline}> | 118 | <H1 className={classes.headline}> |
147 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
148 | <span | ||
149 | className={classes.headlineProBadge} | ||
150 | data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`} | ||
151 | > | ||
152 | <ProBadge /> | ||
153 | </span> | ||
154 | )} | ||
155 | {intl.formatMessage(messages.headline)} | 119 | {intl.formatMessage(messages.headline)} |
156 | <span | 120 | <span |
157 | className={classes.workspacesSettingsButton} | 121 | className={classes.workspacesSettingsButton} |
@@ -167,75 +131,48 @@ class WorkspaceDrawer extends Component { | |||
167 | /> | 131 | /> |
168 | </span> | 132 | </span> |
169 | </H1> | 133 | </H1> |
170 | {workspaceStore.isPremiumUpgradeRequired ? ( | 134 | <div className={classes.workspaces}> |
171 | <div className={classes.premiumAnnouncement}> | 135 | <WorkspaceDrawerItem |
172 | <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> | 136 | name={intl.formatMessage(messages.allServices)} |
173 | {workspaceStore.userHasWorkspaces ? ( | 137 | onClick={() => { |
174 | <Button | 138 | workspaceActions.deactivate(); |
175 | className={classes.premiumCtaButton} | 139 | workspaceActions.toggleWorkspaceDrawer(); |
176 | buttonType="primary" | 140 | }} |
177 | label={intl.formatMessage(messages.reactivatePremiumAccount)} | 141 | services={getServicesForWorkspace(null)} |
178 | icon={mdiStar} | 142 | isActive={actualWorkspace == null} |
179 | onClick={() => { | 143 | shortcutIndex={0} |
180 | onUpgradeAccountClick(); | 144 | /> |
181 | }} | 145 | {workspaces.map((workspace, index) => ( |
182 | /> | ||
183 | ) : ( | ||
184 | <Button | ||
185 | className={classes.premiumCtaButton} | ||
186 | buttonType="primary" | ||
187 | label={intl.formatMessage(messages.premiumCtaButtonLabel)} | ||
188 | icon={mdiPlusBox} | ||
189 | onClick={() => { | ||
190 | workspaceActions.openWorkspaceSettings(); | ||
191 | }} | ||
192 | /> | ||
193 | )} | ||
194 | </div> | ||
195 | ) : ( | ||
196 | <div className={classes.workspaces}> | ||
197 | <WorkspaceDrawerItem | 146 | <WorkspaceDrawerItem |
198 | name={intl.formatMessage(messages.allServices)} | 147 | key={workspace.id} |
148 | name={workspace.name} | ||
149 | isActive={actualWorkspace === workspace} | ||
199 | onClick={() => { | 150 | onClick={() => { |
200 | workspaceActions.deactivate(); | 151 | if (actualWorkspace === workspace) return; |
152 | workspaceActions.activate({ workspace }); | ||
201 | workspaceActions.toggleWorkspaceDrawer(); | 153 | workspaceActions.toggleWorkspaceDrawer(); |
202 | }} | 154 | }} |
203 | services={getServicesForWorkspace(null)} | 155 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} |
204 | isActive={actualWorkspace == null} | 156 | services={getServicesForWorkspace(workspace)} |
205 | shortcutIndex={0} | 157 | shortcutIndex={index + 1} |
206 | /> | 158 | /> |
207 | {workspaces.map((workspace, index) => ( | 159 | ))} |
208 | <WorkspaceDrawerItem | 160 | <div |
209 | key={workspace.id} | 161 | className={classes.addNewWorkspaceLabel} |
210 | name={workspace.name} | 162 | onClick={() => { |
211 | isActive={actualWorkspace === workspace} | 163 | workspaceActions.openWorkspaceSettings(); |
212 | onClick={() => { | 164 | }} |
213 | if (actualWorkspace === workspace) return; | 165 | > |
214 | workspaceActions.activate({ workspace }); | 166 | <Icon |
215 | workspaceActions.toggleWorkspaceDrawer(); | 167 | icon={mdiPlusBox} |
216 | }} | 168 | size={1} |
217 | onContextMenuEditClick={() => workspaceActions.edit({ workspace })} | 169 | className={classes.workspacesSettingsButtonIcon} |
218 | services={getServicesForWorkspace(workspace)} | 170 | /> |
219 | shortcutIndex={index + 1} | 171 | <span> |
220 | /> | 172 | {intl.formatMessage(messages.addNewWorkspaceLabel)} |
221 | ))} | 173 | </span> |
222 | <div | ||
223 | className={classes.addNewWorkspaceLabel} | ||
224 | onClick={() => { | ||
225 | workspaceActions.openWorkspaceSettings(); | ||
226 | }} | ||
227 | > | ||
228 | <Icon | ||
229 | icon={mdiPlusBox} | ||
230 | size={1} | ||
231 | className={classes.workspacesSettingsButtonIcon} | ||
232 | /> | ||
233 | <span> | ||
234 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
235 | </span> | ||
236 | </div> | ||
237 | </div> | 174 | </div> |
238 | )} | 175 | </div> |
239 | <ReactTooltip place="right" type="dark" effect="solid" /> | 176 | <ReactTooltip place="right" type="dark" effect="solid" /> |
240 | </div> | 177 | </div> |
241 | ); | 178 | ); |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 2e58b70d6..fff607330 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'; | |||
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import classnames from 'classnames'; | 6 | import classnames from 'classnames'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
8 | import { ctrlKey } from '../../../environment'; | 8 | import { altKey, shortcutKey } from '../../../environment'; |
9 | 9 | ||
10 | const messages = defineMessages({ | 10 | const messages = defineMessages({ |
11 | noServicesAddedYet: { | 11 | noServicesAddedYet: { |
@@ -18,12 +18,18 @@ const messages = defineMessages({ | |||
18 | }, | 18 | }, |
19 | }); | 19 | }); |
20 | 20 | ||
21 | let itemTransition = 'none'; | ||
22 | |||
23 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
24 | itemTransition = 'background-color 300ms ease-out'; | ||
25 | } | ||
26 | |||
21 | const styles = theme => ({ | 27 | const styles = theme => ({ |
22 | item: { | 28 | item: { |
23 | height: '67px', | 29 | height: '67px', |
24 | padding: `15px ${theme.workspaces.drawer.padding}px`, | 30 | padding: `15px ${theme.workspaces.drawer.padding}px`, |
25 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 31 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
26 | transition: 'background-color 300ms ease-out', | 32 | transition: itemTransition, |
27 | '&:first-child': { | 33 | '&:first-child': { |
28 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 34 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
29 | }, | 35 | }, |
@@ -59,7 +65,8 @@ const styles = theme => ({ | |||
59 | }, | 65 | }, |
60 | }); | 66 | }); |
61 | 67 | ||
62 | @injectSheet(styles) @observer | 68 | @injectSheet(styles) |
69 | @observer | ||
63 | class WorkspaceDrawerItem extends Component { | 70 | class WorkspaceDrawerItem extends Component { |
64 | static propTypes = { | 71 | static propTypes = { |
65 | classes: PropTypes.object.isRequired, | 72 | classes: PropTypes.object.isRequired, |
@@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component { | |||
91 | } = this.props; | 98 | } = this.props; |
92 | const { intl } = this.context; | 99 | const { intl } = this.context; |
93 | 100 | ||
94 | const contextMenuTemplate = [{ | 101 | const contextMenuTemplate = [ |
95 | label: name, | 102 | { |
96 | enabled: false, | 103 | label: name, |
97 | }, { | 104 | enabled: false, |
98 | type: 'separator', | 105 | }, |
99 | }, { | 106 | { |
100 | label: intl.formatMessage(messages.contextMenuEdit), | 107 | type: 'separator', |
101 | click: onContextMenuEditClick, | 108 | }, |
102 | }]; | 109 | { |
110 | label: intl.formatMessage(messages.contextMenuEdit), | ||
111 | click: onContextMenuEditClick, | ||
112 | }, | ||
113 | ]; | ||
103 | 114 | ||
104 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); | 115 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); |
105 | 116 | ||
@@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component { | |||
110 | isActive ? classes.isActiveItem : null, | 121 | isActive ? classes.isActiveItem : null, |
111 | ])} | 122 | ])} |
112 | onClick={onClick} | 123 | onClick={onClick} |
113 | onContextMenu={() => ( | 124 | onContextMenu={() => |
114 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) | 125 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) |
115 | )} | 126 | } |
116 | data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+Alt+${shortcutIndex})` : ''}`} | 127 | data-tip={`${ |
128 | shortcutIndex <= 9 ? `(${shortcutKey(false)}+${altKey}+${shortcutIndex})` : '' | ||
129 | }`} | ||
117 | > | 130 | > |
118 | <span | 131 | <span |
119 | className={classnames([ | 132 | className={classnames([ |
@@ -129,7 +142,9 @@ class WorkspaceDrawerItem extends Component { | |||
129 | isActive ? classes.activeServices : null, | 142 | isActive ? classes.activeServices : null, |
130 | ])} | 143 | ])} |
131 | > | 144 | > |
132 | {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)} | 145 | {services.length |
146 | ? services.join(', ') | ||
147 | : intl.formatMessage(messages.noServicesAddedYet)} | ||
133 | </span> | 148 | </span> |
134 | </div> | 149 | </div> |
135 | ); | 150 | ); |
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js index cc4b1a3ba..85fc02d51 100644 --- a/src/features/workspaces/components/WorkspaceItem.js +++ b/src/features/workspaces/components/WorkspaceItem.js | |||
@@ -6,7 +6,7 @@ import injectSheet from 'react-jss'; | |||
6 | 6 | ||
7 | import Workspace from '../models/Workspace'; | 7 | import Workspace from '../models/Workspace'; |
8 | 8 | ||
9 | const styles = theme => ({ | 9 | const styles = (theme) => ({ |
10 | row: { | 10 | row: { |
11 | height: theme.workspaces.settings.listItems.height, | 11 | height: theme.workspaces.settings.listItems.height, |
12 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, | 12 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, |
diff --git a/src/features/workspaces/components/WorkspaceServiceListItem.js b/src/features/workspaces/components/WorkspaceServiceListItem.js index e05b21440..f6e2a2786 100644 --- a/src/features/workspaces/components/WorkspaceServiceListItem.js +++ b/src/features/workspaces/components/WorkspaceServiceListItem.js | |||
@@ -8,7 +8,7 @@ import { Toggle } from '@meetfranz/forms'; | |||
8 | import Service from '../../../models/Service'; | 8 | import Service from '../../../models/Service'; |
9 | import ServiceIcon from '../../../components/ui/ServiceIcon'; | 9 | import ServiceIcon from '../../../components/ui/ServiceIcon'; |
10 | 10 | ||
11 | const styles = theme => ({ | 11 | const styles = (theme) => ({ |
12 | listItem: { | 12 | listItem: { |
13 | height: theme.workspaces.settings.listItems.height, | 13 | height: theme.workspaces.settings.listItems.height, |
14 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, | 14 | borderBottom: `1px solid ${theme.workspaces.settings.listItems.borderColor}`, |
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index a70d1d66f..c8ec0bc4c 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -15,12 +15,18 @@ const messages = defineMessages({ | |||
15 | }, | 15 | }, |
16 | }); | 16 | }); |
17 | 17 | ||
18 | let wrapperTransition = 'none'; | ||
19 | |||
20 | if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
21 | wrapperTransition = 'width 0.5s ease'; | ||
22 | } | ||
23 | |||
18 | const styles = theme => ({ | 24 | const styles = theme => ({ |
19 | wrapper: { | 25 | wrapper: { |
20 | display: 'flex', | 26 | display: 'flex', |
21 | alignItems: 'flex-start', | 27 | alignItems: 'flex-start', |
22 | position: 'absolute', | 28 | position: 'absolute', |
23 | transition: 'width 0.5s ease', | 29 | transition: wrapperTransition, |
24 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, | 30 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, |
25 | marginTop: '20px', | 31 | marginTop: '20px', |
26 | }, | 32 | }, |
@@ -47,7 +53,8 @@ const styles = theme => ({ | |||
47 | }, | 53 | }, |
48 | }); | 54 | }); |
49 | 55 | ||
50 | @injectSheet(styles) @observer | 56 | @injectSheet(styles) |
57 | @observer | ||
51 | class WorkspaceSwitchingIndicator extends Component { | 58 | class WorkspaceSwitchingIndicator extends Component { |
52 | static propTypes = { | 59 | static propTypes = { |
53 | classes: PropTypes.object.isRequired, | 60 | classes: PropTypes.object.isRequired, |
@@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component { | |||
63 | const { intl } = this.context; | 70 | const { intl } = this.context; |
64 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 71 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
65 | if (!isSwitchingWorkspace) return null; | 72 | if (!isSwitchingWorkspace) return null; |
66 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; | 73 | const nextWorkspaceName = nextWorkspace |
74 | ? nextWorkspace.name | ||
75 | : 'All services'; | ||
67 | return ( | 76 | return ( |
68 | <div | 77 | <div className={classnames([classes.wrapper])}> |
69 | className={classnames([ | ||
70 | classes.wrapper, | ||
71 | ])} | ||
72 | > | ||
73 | <div className={classes.component}> | 78 | <div className={classes.component}> |
74 | <Loader | 79 | <Loader |
75 | className={classes.spinner} | 80 | className={classes.spinner} |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index cfaacd56e..8319d3bc6 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,9 +1,9 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox, Badge } from '@meetfranz/ui'; | 6 | import { Infobox } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'; | 8 | import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'; |
9 | import Loader from '../../../components/ui/Loader'; | 9 | import Loader from '../../../components/ui/Loader'; |
@@ -11,10 +11,7 @@ import WorkspaceItem from './WorkspaceItem'; | |||
11 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 11 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
12 | import Request from '../../../stores/lib/Request'; | 12 | import Request from '../../../stores/lib/Request'; |
13 | import Appear from '../../../components/ui/effects/Appear'; | 13 | import Appear from '../../../components/ui/effects/Appear'; |
14 | import { workspaceStore } from '../index'; | ||
15 | import UIStore from '../../../stores/UIStore'; | 14 | import UIStore from '../../../stores/UIStore'; |
16 | import globalMessages from '../../../i18n/globalMessages'; | ||
17 | import UpgradeButton from '../../../components/ui/UpgradeButton'; | ||
18 | 15 | ||
19 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
20 | headline: { | 17 | headline: { |
@@ -64,12 +61,6 @@ const styles = () => ({ | |||
64 | appear: { | 61 | appear: { |
65 | height: 'auto', | 62 | height: 'auto', |
66 | }, | 63 | }, |
67 | premiumAnnouncement: { | ||
68 | height: 'auto', | ||
69 | }, | ||
70 | premiumAnnouncementContainer: { | ||
71 | display: 'flex', | ||
72 | }, | ||
73 | announcementHeadline: { | 64 | announcementHeadline: { |
74 | marginBottom: 0, | 65 | marginBottom: 0, |
75 | }, | 66 | }, |
@@ -78,12 +69,6 @@ const styles = () => ({ | |||
78 | margin: [-8, 0, 0, 20], | 69 | margin: [-8, 0, 0, 20], |
79 | alignSelf: 'center', | 70 | alignSelf: 'center', |
80 | }, | 71 | }, |
81 | upgradeCTA: { | ||
82 | margin: [40, 'auto'], | ||
83 | }, | ||
84 | proRequired: { | ||
85 | margin: [10, 0, 40], | ||
86 | }, | ||
87 | }); | 72 | }); |
88 | 73 | ||
89 | @inject('stores') @injectSheet(styles) @observer | 74 | @inject('stores') @injectSheet(styles) @observer |
@@ -152,77 +137,53 @@ class WorkspacesDashboard extends Component { | |||
152 | </Appear> | 137 | </Appear> |
153 | )} | 138 | )} |
154 | 139 | ||
155 | {workspaceStore.isPremiumUpgradeRequired && ( | 140 | {/* ===== Create workspace form ===== */} |
156 | <div className={classes.premiumAnnouncement}> | 141 | <div className={classes.createForm}> |
157 | 142 | <CreateWorkspaceForm | |
158 | <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1> | 143 | isSubmitting={createWorkspaceRequest.isExecuting} |
159 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> | 144 | onSubmit={onCreateWorkspaceSubmit} |
160 | <div className={classes.premiumAnnouncementContainer}> | 145 | /> |
161 | <div className={classes.premiumAnnouncementContent}> | 146 | </div> |
162 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | 147 | {getUserWorkspacesRequest.isExecuting ? ( |
163 | <UpgradeButton | 148 | <Loader /> |
164 | className={classes.upgradeCTA} | 149 | ) : ( |
165 | gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }} | ||
166 | short | ||
167 | requiresPro | ||
168 | /> | ||
169 | </div> | ||
170 | <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" /> | ||
171 | </div> | ||
172 | </div> | ||
173 | )} | ||
174 | |||
175 | {!workspaceStore.isPremiumUpgradeRequired && ( | ||
176 | <> | 150 | <> |
177 | {/* ===== Create workspace form ===== */} | 151 | {/* ===== Workspace could not be loaded error ===== */} |
178 | <div className={classes.createForm}> | 152 | {getUserWorkspacesRequest.error ? ( |
179 | <CreateWorkspaceForm | 153 | <Infobox |
180 | isSubmitting={createWorkspaceRequest.isExecuting} | 154 | icon="alert" |
181 | onSubmit={onCreateWorkspaceSubmit} | 155 | type="danger" |
182 | /> | 156 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} |
183 | </div> | 157 | ctaLoading={getUserWorkspacesRequest.isExecuting} |
184 | {getUserWorkspacesRequest.isExecuting ? ( | 158 | ctaOnClick={getUserWorkspacesRequest.retry} |
185 | <Loader /> | 159 | > |
160 | {intl.formatMessage(messages.workspacesRequestFailed)} | ||
161 | </Infobox> | ||
186 | ) : ( | 162 | ) : ( |
187 | <> | 163 | <> |
188 | {/* ===== Workspace could not be loaded error ===== */} | 164 | {workspaces.length === 0 ? ( |
189 | {getUserWorkspacesRequest.error ? ( | 165 | <div className="align-middle settings__empty-state"> |
190 | <Infobox | 166 | {/* ===== Workspaces empty state ===== */} |
191 | icon="alert" | 167 | <p className="settings__empty-text"> |
192 | type="danger" | 168 | <span className="emoji"> |
193 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | 169 | <img src="./assets/images/emoji/sad.png" alt="" /> |
194 | ctaLoading={getUserWorkspacesRequest.isExecuting} | 170 | </span> |
195 | ctaOnClick={getUserWorkspacesRequest.retry} | 171 | {intl.formatMessage(messages.noServicesAdded)} |
196 | > | 172 | </p> |
197 | {intl.formatMessage(messages.workspacesRequestFailed)} | 173 | </div> |
198 | </Infobox> | ||
199 | ) : ( | 174 | ) : ( |
200 | <> | 175 | <table className={classes.table}> |
201 | {workspaces.length === 0 ? ( | 176 | {/* ===== Workspaces list ===== */} |
202 | <div className="align-middle settings__empty-state"> | 177 | <tbody> |
203 | {/* ===== Workspaces empty state ===== */} | 178 | {workspaces.map((workspace) => ( |
204 | <p className="settings__empty-text"> | 179 | <WorkspaceItem |
205 | <span className="emoji"> | 180 | key={workspace.id} |
206 | <img src="./assets/images/emoji/sad.png" alt="" /> | 181 | workspace={workspace} |
207 | </span> | 182 | onItemClick={(w) => onWorkspaceClick(w)} |
208 | {intl.formatMessage(messages.noServicesAdded)} | 183 | /> |
209 | </p> | 184 | ))} |
210 | </div> | 185 | </tbody> |
211 | ) : ( | 186 | </table> |
212 | <table className={classes.table}> | ||
213 | {/* ===== Workspaces list ===== */} | ||
214 | <tbody> | ||
215 | {workspaces.map(workspace => ( | ||
216 | <WorkspaceItem | ||
217 | key={workspace.id} | ||
218 | workspace={workspace} | ||
219 | onItemClick={w => onWorkspaceClick(w)} | ||
220 | /> | ||
221 | ))} | ||
222 | </tbody> | ||
223 | </table> | ||
224 | )} | ||
225 | </> | ||
226 | )} | 187 | )} |
227 | </> | 188 | </> |
228 | )} | 189 | )} |