diff options
author | 2019-04-10 16:27:44 +0200 | |
---|---|---|
committer | 2019-04-10 16:27:44 +0200 | |
commit | 4c762972ab51e6017607f0450c2647f4c0e5660f (patch) | |
tree | 59948fab0c62952e079b183e5242b003f6886590 /src/features | |
parent | added generic pro badge component for settings nav (diff) | |
download | ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.tar.gz ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.tar.zst ferdium-app-4c762972ab51e6017607f0450c2647f4c0e5660f.zip |
add premium badge to workspace drawer headline
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 49 |
1 files changed, 32 insertions, 17 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index d48b55f12..64c98dc63 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -3,7 +3,7 @@ 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, FormattedHTMLMessage, intlShape } from 'react-intl'; |
6 | import { H1, Icon } from '@meetfranz/ui'; | 6 | import { H1, Icon, ProBadge } from '@meetfranz/ui'; |
7 | import { Button } from '@meetfranz/forms/lib'; | 7 | import { Button } from '@meetfranz/forms/lib'; |
8 | import ReactTooltip from 'react-tooltip'; | 8 | import ReactTooltip from 'react-tooltip'; |
9 | 9 | ||
@@ -41,6 +41,10 @@ const messages = defineMessages({ | |||
41 | id: 'workspaceDrawer.addNewWorkspaceLabel', | 41 | id: 'workspaceDrawer.addNewWorkspaceLabel', |
42 | defaultMessage: '!!!add new workspace', | 42 | defaultMessage: '!!!add new workspace', |
43 | }, | 43 | }, |
44 | premiumFeatureBadge: { | ||
45 | id: 'workspaceDrawer.proFeatureBadge', | ||
46 | defaultMessage: '!!!Premium feature', | ||
47 | }, | ||
44 | }); | 48 | }); |
45 | 49 | ||
46 | const styles = theme => ({ | 50 | const styles = theme => ({ |
@@ -54,6 +58,9 @@ const styles = theme => ({ | |||
54 | marginBottom: '25px', | 58 | marginBottom: '25px', |
55 | marginLeft: theme.workspaces.drawer.padding, | 59 | marginLeft: theme.workspaces.drawer.padding, |
56 | }, | 60 | }, |
61 | headlineProBadge: { | ||
62 | marginRight: 15, | ||
63 | }, | ||
57 | workspacesSettingsButton: { | 64 | workspacesSettingsButton: { |
58 | float: 'right', | 65 | float: 'right', |
59 | marginRight: theme.workspaces.drawer.padding, | 66 | marginRight: theme.workspaces.drawer.padding, |
@@ -134,6 +141,14 @@ class WorkspaceDrawer extends Component { | |||
134 | return ( | 141 | return ( |
135 | <div className={classes.drawer}> | 142 | <div className={classes.drawer}> |
136 | <H1 className={classes.headline}> | 143 | <H1 className={classes.headline}> |
144 | {workspaceStore.isPremiumUpgradeRequired && ( | ||
145 | <span | ||
146 | className={classes.headlineProBadge} | ||
147 | data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`} | ||
148 | > | ||
149 | <ProBadge /> | ||
150 | </span> | ||
151 | )} | ||
137 | {intl.formatMessage(messages.headline)} | 152 | {intl.formatMessage(messages.headline)} |
138 | <span | 153 | <span |
139 | className={classes.workspacesSettingsButton} | 154 | className={classes.workspacesSettingsButton} |
@@ -203,24 +218,24 @@ class WorkspaceDrawer extends Component { | |||
203 | services={getServicesForWorkspace(workspace)} | 218 | services={getServicesForWorkspace(workspace)} |
204 | /> | 219 | /> |
205 | ))} | 220 | ))} |
221 | <div | ||
222 | className={classes.addNewWorkspaceLabel} | ||
223 | onClick={() => { | ||
224 | workspaceActions.openWorkspaceSettings(); | ||
225 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); | ||
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> | ||
206 | </div> | 237 | </div> |
207 | )} | 238 | )} |
208 | <div | ||
209 | className={classes.addNewWorkspaceLabel} | ||
210 | onClick={() => { | ||
211 | workspaceActions.openWorkspaceSettings(); | ||
212 | gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); | ||
213 | }} | ||
214 | > | ||
215 | <Icon | ||
216 | icon="mdiPlusBox" | ||
217 | size={1} | ||
218 | className={classes.workspacesSettingsButtonIcon} | ||
219 | /> | ||
220 | <span> | ||
221 | {intl.formatMessage(messages.addNewWorkspaceLabel)} | ||
222 | </span> | ||
223 | </div> | ||
224 | <ReactTooltip place="right" type="dark" effect="solid" /> | 239 | <ReactTooltip place="right" type="dark" effect="solid" /> |
225 | </div> | 240 | </div> |
226 | ); | 241 | ); |