diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-03 16:59:24 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-03 17:01:00 +0200 |
commit | 6b38abc9011648a1f54b1ef3e3fb29d13750750c (patch) | |
tree | 0b1147422f570cec24c7ab439d94ff22ff5834d7 | |
parent | add workspace feature info in drawer for free users (diff) | |
download | ferdium-app-6b38abc9011648a1f54b1ef3e3fb29d13750750c.tar.gz ferdium-app-6b38abc9011648a1f54b1ef3e3fb29d13750750c.tar.zst ferdium-app-6b38abc9011648a1f54b1ef3e3fb29d13750750c.zip |
add workspace premium badge in settings nav
-rw-r--r-- | src/components/settings/navigation/SettingsNavigation.js | 9 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 32 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 | ||||
-rw-r--r-- | src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json | 28 | ||||
-rw-r--r-- | src/stores/FeaturesStore.js | 7 | ||||
-rw-r--r-- | src/styles/settings.scss | 10 |
6 files changed, 55 insertions, 33 deletions
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js index dc3c1d6f1..945285f5a 100644 --- a/src/components/settings/navigation/SettingsNavigation.js +++ b/src/components/settings/navigation/SettingsNavigation.js | |||
@@ -2,6 +2,7 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { defineMessages, intlShape } from 'react-intl'; | 3 | import { defineMessages, intlShape } from 'react-intl'; |
4 | import { inject, observer } from 'mobx-react'; | 4 | import { inject, observer } from 'mobx-react'; |
5 | import { Icon } from '@meetfranz/ui'; | ||
5 | 6 | ||
6 | import Link from '../../ui/Link'; | 7 | import Link from '../../ui/Link'; |
7 | import { workspaceStore } from '../../../features/workspaces'; | 8 | import { workspaceStore } from '../../../features/workspaces'; |
@@ -77,7 +78,13 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp | |||
77 | > | 78 | > |
78 | {intl.formatMessage(messages.yourWorkspaces)} | 79 | {intl.formatMessage(messages.yourWorkspaces)} |
79 | {' '} | 80 | {' '} |
80 | <span className="badge">{workspaceCount}</span> | 81 | {workspaceStore.isPremiumUpgradeRequired ? ( |
82 | <span className="badge badge--pro"> | ||
83 | <Icon icon="mdiStar" /> | ||
84 | </span> | ||
85 | ) : ( | ||
86 | <span className="badge">{workspaceCount}</span> | ||
87 | )} | ||
81 | </Link> | 88 | </Link> |
82 | ) : null} | 89 | ) : null} |
83 | <Link | 90 | <Link |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index a8f4a2cbf..5e3988781 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -1302,91 +1302,91 @@ | |||
1302 | "defaultMessage": "!!!Available services", | 1302 | "defaultMessage": "!!!Available services", |
1303 | "end": { | 1303 | "end": { |
1304 | "column": 3, | 1304 | "column": 3, |
1305 | "line": 13 | 1305 | "line": 14 |
1306 | }, | 1306 | }, |
1307 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1307 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1308 | "id": "settings.navigation.availableServices", | 1308 | "id": "settings.navigation.availableServices", |
1309 | "start": { | 1309 | "start": { |
1310 | "column": 21, | 1310 | "column": 21, |
1311 | "line": 10 | 1311 | "line": 11 |
1312 | } | 1312 | } |
1313 | }, | 1313 | }, |
1314 | { | 1314 | { |
1315 | "defaultMessage": "!!!Your services", | 1315 | "defaultMessage": "!!!Your services", |
1316 | "end": { | 1316 | "end": { |
1317 | "column": 3, | 1317 | "column": 3, |
1318 | "line": 17 | 1318 | "line": 18 |
1319 | }, | 1319 | }, |
1320 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1320 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1321 | "id": "settings.navigation.yourServices", | 1321 | "id": "settings.navigation.yourServices", |
1322 | "start": { | 1322 | "start": { |
1323 | "column": 16, | 1323 | "column": 16, |
1324 | "line": 14 | 1324 | "line": 15 |
1325 | } | 1325 | } |
1326 | }, | 1326 | }, |
1327 | { | 1327 | { |
1328 | "defaultMessage": "!!!Your workspaces", | 1328 | "defaultMessage": "!!!Your workspaces", |
1329 | "end": { | 1329 | "end": { |
1330 | "column": 3, | 1330 | "column": 3, |
1331 | "line": 21 | 1331 | "line": 22 |
1332 | }, | 1332 | }, |
1333 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1333 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1334 | "id": "settings.navigation.yourWorkspaces", | 1334 | "id": "settings.navigation.yourWorkspaces", |
1335 | "start": { | 1335 | "start": { |
1336 | "column": 18, | 1336 | "column": 18, |
1337 | "line": 18 | 1337 | "line": 19 |
1338 | } | 1338 | } |
1339 | }, | 1339 | }, |
1340 | { | 1340 | { |
1341 | "defaultMessage": "!!!Account", | 1341 | "defaultMessage": "!!!Account", |
1342 | "end": { | 1342 | "end": { |
1343 | "column": 3, | 1343 | "column": 3, |
1344 | "line": 25 | 1344 | "line": 26 |
1345 | }, | 1345 | }, |
1346 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1346 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1347 | "id": "settings.navigation.account", | 1347 | "id": "settings.navigation.account", |
1348 | "start": { | 1348 | "start": { |
1349 | "column": 11, | 1349 | "column": 11, |
1350 | "line": 22 | 1350 | "line": 23 |
1351 | } | 1351 | } |
1352 | }, | 1352 | }, |
1353 | { | 1353 | { |
1354 | "defaultMessage": "!!!Settings", | 1354 | "defaultMessage": "!!!Settings", |
1355 | "end": { | 1355 | "end": { |
1356 | "column": 3, | 1356 | "column": 3, |
1357 | "line": 29 | 1357 | "line": 30 |
1358 | }, | 1358 | }, |
1359 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1359 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1360 | "id": "settings.navigation.settings", | 1360 | "id": "settings.navigation.settings", |
1361 | "start": { | 1361 | "start": { |
1362 | "column": 12, | 1362 | "column": 12, |
1363 | "line": 26 | 1363 | "line": 27 |
1364 | } | 1364 | } |
1365 | }, | 1365 | }, |
1366 | { | 1366 | { |
1367 | "defaultMessage": "!!!Invite Friends", | 1367 | "defaultMessage": "!!!Invite Friends", |
1368 | "end": { | 1368 | "end": { |
1369 | "column": 3, | 1369 | "column": 3, |
1370 | "line": 33 | 1370 | "line": 34 |
1371 | }, | 1371 | }, |
1372 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1372 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1373 | "id": "settings.navigation.inviteFriends", | 1373 | "id": "settings.navigation.inviteFriends", |
1374 | "start": { | 1374 | "start": { |
1375 | "column": 17, | 1375 | "column": 17, |
1376 | "line": 30 | 1376 | "line": 31 |
1377 | } | 1377 | } |
1378 | }, | 1378 | }, |
1379 | { | 1379 | { |
1380 | "defaultMessage": "!!!Logout", | 1380 | "defaultMessage": "!!!Logout", |
1381 | "end": { | 1381 | "end": { |
1382 | "column": 3, | 1382 | "column": 3, |
1383 | "line": 37 | 1383 | "line": 38 |
1384 | }, | 1384 | }, |
1385 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 1385 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
1386 | "id": "settings.navigation.logout", | 1386 | "id": "settings.navigation.logout", |
1387 | "start": { | 1387 | "start": { |
1388 | "column": 10, | 1388 | "column": 10, |
1389 | "line": 34 | 1389 | "line": 35 |
1390 | } | 1390 | } |
1391 | } | 1391 | } |
1392 | ], | 1392 | ], |
@@ -3381,9 +3381,9 @@ | |||
3381 | "line": 35 | 3381 | "line": 35 |
3382 | }, | 3382 | }, |
3383 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", | 3383 | "file": "src/features/workspaces/components/WorkspaceDrawer.js", |
3384 | "id": "workspaceDrawer.premiumCtaButton", | 3384 | "id": "workspaceDrawer.premiumCtaButtonLabel", |
3385 | "start": { | 3385 | "start": { |
3386 | "column": 20, | 3386 | "column": 25, |
3387 | "line": 32 | 3387 | "line": 32 |
3388 | } | 3388 | } |
3389 | } | 3389 | } |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 981946d00..5ad1a5deb 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -313,4 +313,4 @@ | |||
313 | "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace", | 313 | "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace", |
314 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", | 314 | "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>", |
315 | "workspaces.switchingIndicator.switchingTo": "Switching to" | 315 | "workspaces.switchingIndicator.switchingTo": "Switching to" |
316 | } | 316 | } \ No newline at end of file |
diff --git a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json index 96a42aa80..de78a71cf 100644 --- a/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json +++ b/src/i18n/messages/src/components/settings/navigation/SettingsNavigation.json | |||
@@ -4,11 +4,11 @@ | |||
4 | "defaultMessage": "!!!Available services", | 4 | "defaultMessage": "!!!Available services", |
5 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 5 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
6 | "start": { | 6 | "start": { |
7 | "line": 10, | 7 | "line": 11, |
8 | "column": 21 | 8 | "column": 21 |
9 | }, | 9 | }, |
10 | "end": { | 10 | "end": { |
11 | "line": 13, | 11 | "line": 14, |
12 | "column": 3 | 12 | "column": 3 |
13 | } | 13 | } |
14 | }, | 14 | }, |
@@ -17,11 +17,11 @@ | |||
17 | "defaultMessage": "!!!Your services", | 17 | "defaultMessage": "!!!Your services", |
18 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 18 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
19 | "start": { | 19 | "start": { |
20 | "line": 14, | 20 | "line": 15, |
21 | "column": 16 | 21 | "column": 16 |
22 | }, | 22 | }, |
23 | "end": { | 23 | "end": { |
24 | "line": 17, | 24 | "line": 18, |
25 | "column": 3 | 25 | "column": 3 |
26 | } | 26 | } |
27 | }, | 27 | }, |
@@ -30,11 +30,11 @@ | |||
30 | "defaultMessage": "!!!Your workspaces", | 30 | "defaultMessage": "!!!Your workspaces", |
31 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 31 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
32 | "start": { | 32 | "start": { |
33 | "line": 18, | 33 | "line": 19, |
34 | "column": 18 | 34 | "column": 18 |
35 | }, | 35 | }, |
36 | "end": { | 36 | "end": { |
37 | "line": 21, | 37 | "line": 22, |
38 | "column": 3 | 38 | "column": 3 |
39 | } | 39 | } |
40 | }, | 40 | }, |
@@ -43,11 +43,11 @@ | |||
43 | "defaultMessage": "!!!Account", | 43 | "defaultMessage": "!!!Account", |
44 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 44 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
45 | "start": { | 45 | "start": { |
46 | "line": 22, | 46 | "line": 23, |
47 | "column": 11 | 47 | "column": 11 |
48 | }, | 48 | }, |
49 | "end": { | 49 | "end": { |
50 | "line": 25, | 50 | "line": 26, |
51 | "column": 3 | 51 | "column": 3 |
52 | } | 52 | } |
53 | }, | 53 | }, |
@@ -56,11 +56,11 @@ | |||
56 | "defaultMessage": "!!!Settings", | 56 | "defaultMessage": "!!!Settings", |
57 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 57 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
58 | "start": { | 58 | "start": { |
59 | "line": 26, | 59 | "line": 27, |
60 | "column": 12 | 60 | "column": 12 |
61 | }, | 61 | }, |
62 | "end": { | 62 | "end": { |
63 | "line": 29, | 63 | "line": 30, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | 66 | }, |
@@ -69,11 +69,11 @@ | |||
69 | "defaultMessage": "!!!Invite Friends", | 69 | "defaultMessage": "!!!Invite Friends", |
70 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 70 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
71 | "start": { | 71 | "start": { |
72 | "line": 30, | 72 | "line": 31, |
73 | "column": 17 | 73 | "column": 17 |
74 | }, | 74 | }, |
75 | "end": { | 75 | "end": { |
76 | "line": 33, | 76 | "line": 34, |
77 | "column": 3 | 77 | "column": 3 |
78 | } | 78 | } |
79 | }, | 79 | }, |
@@ -82,11 +82,11 @@ | |||
82 | "defaultMessage": "!!!Logout", | 82 | "defaultMessage": "!!!Logout", |
83 | "file": "src/components/settings/navigation/SettingsNavigation.js", | 83 | "file": "src/components/settings/navigation/SettingsNavigation.js", |
84 | "start": { | 84 | "start": { |
85 | "line": 34, | 85 | "line": 35, |
86 | "column": 10 | 86 | "column": 10 |
87 | }, | 87 | }, |
88 | "end": { | 88 | "end": { |
89 | "line": 37, | 89 | "line": 38, |
90 | "column": 3 | 90 | "column": 3 |
91 | } | 91 | } |
92 | } | 92 | } |
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js index 52e38ad96..8fe576813 100644 --- a/src/stores/FeaturesStore.js +++ b/src/stores/FeaturesStore.js | |||
@@ -1,4 +1,9 @@ | |||
1 | import { computed, observable, reaction, runInAction } from 'mobx'; | 1 | import { |
2 | computed, | ||
3 | observable, | ||
4 | reaction, | ||
5 | runInAction, | ||
6 | } from 'mobx'; | ||
2 | 7 | ||
3 | import Store from './lib/Store'; | 8 | import Store from './lib/Store'; |
4 | import CachedRequest from './lib/CachedRequest'; | 9 | import CachedRequest from './lib/CachedRequest'; |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 9fde9a7bf..d97d4ac2c 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -85,6 +85,11 @@ | |||
85 | .badge { | 85 | .badge { |
86 | background: $dark-theme-gray-lighter; | 86 | background: $dark-theme-gray-lighter; |
87 | color: $dark-theme-gray-smoke; | 87 | color: $dark-theme-gray-smoke; |
88 | |||
89 | &.badge--pro { | ||
90 | background: $theme-brand-primary; | ||
91 | padding: 4px 6px 3px 7px; | ||
92 | } | ||
88 | } | 93 | } |
89 | 94 | ||
90 | &:hover { | 95 | &:hover { |
@@ -93,6 +98,11 @@ | |||
93 | .badge { | 98 | .badge { |
94 | background: $dark-theme-gray-lighter; | 99 | background: $dark-theme-gray-lighter; |
95 | color: $dark-theme-gray-smoke; | 100 | color: $dark-theme-gray-smoke; |
101 | |||
102 | &.badge--pro { | ||
103 | background: $theme-brand-primary; | ||
104 | padding: 4px 6px 3px 7px; | ||
105 | } | ||
96 | } | 106 | } |
97 | } | 107 | } |
98 | 108 | ||