diff options
author | vantezzen <hello@vantezzen.io> | 2019-10-13 11:50:37 +0200 |
---|---|---|
committer | vantezzen <hello@vantezzen.io> | 2019-10-13 11:50:37 +0200 |
commit | 3741ba95e5b07e8a7e415b025587c44e55d7ff32 (patch) | |
tree | 69fac6596c7439cb4f47fa80db7bbf2d293f39e5 | |
parent | Sort services in QuickSwitch by last used (diff) | |
download | ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.tar.gz ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.tar.zst ferdium-app-3741ba95e5b07e8a7e415b025587c44e55d7ff32.zip |
Improve QuickSwitch design
-rw-r--r-- | src/features/quickSwitch/Component.js | 13 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 21 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/i18n/messages/src/features/quickSwitch/Component.json | 21 |
4 files changed, 48 insertions, 8 deletions
diff --git a/src/features/quickSwitch/Component.js b/src/features/quickSwitch/Component.js index 583c7184c..39e90cb95 100644 --- a/src/features/quickSwitch/Component.js +++ b/src/features/quickSwitch/Component.js | |||
@@ -6,12 +6,17 @@ import { reaction } from 'mobx'; | |||
6 | import injectSheet from 'react-jss'; | 6 | import injectSheet from 'react-jss'; |
7 | import { defineMessages, intlShape } from 'react-intl'; | 7 | import { defineMessages, intlShape } from 'react-intl'; |
8 | import { Input } from '@meetfranz/forms'; | 8 | import { Input } from '@meetfranz/forms'; |
9 | import { H1 } from '@meetfranz/ui'; | ||
9 | 10 | ||
10 | import Modal from '../../components/ui/Modal'; | 11 | import Modal from '../../components/ui/Modal'; |
11 | import { state as ModalState } from '.'; | 12 | import { state as ModalState } from '.'; |
12 | import ServicesStore from '../../stores/ServicesStore'; | 13 | import ServicesStore from '../../stores/ServicesStore'; |
13 | 14 | ||
14 | const messages = defineMessages({ | 15 | const messages = defineMessages({ |
16 | title: { | ||
17 | id: 'feature.quickSwitch.title', | ||
18 | defaultMessage: '!!!QuickSwitch', | ||
19 | }, | ||
15 | search: { | 20 | search: { |
16 | id: 'feature.quickSwitch.search', | 21 | id: 'feature.quickSwitch.search', |
17 | defaultMessage: '!!!Search...', | 22 | defaultMessage: '!!!Search...', |
@@ -30,6 +35,11 @@ const styles = theme => ({ | |||
30 | color: theme.styleTypes.primary.accent, | 35 | color: theme.styleTypes.primary.accent, |
31 | paddingTop: 30, | 36 | paddingTop: 30, |
32 | }, | 37 | }, |
38 | headline: { | ||
39 | fontSize: 20, | ||
40 | marginBottom: 20, | ||
41 | marginTop: -27, | ||
42 | }, | ||
33 | services: { | 43 | services: { |
34 | width: '100%', | 44 | width: '100%', |
35 | maxHeight: '50vh', | 45 | maxHeight: '50vh', |
@@ -276,6 +286,9 @@ export default @injectSheet(styles) @inject('stores', 'actions') @observer class | |||
276 | shouldCloseOnOverlayClick | 286 | shouldCloseOnOverlayClick |
277 | close={this.close.bind(this)} | 287 | close={this.close.bind(this)} |
278 | > | 288 | > |
289 | <H1 className={classes.headline}> | ||
290 | {intl.formatMessage(messages.title)} | ||
291 | </H1> | ||
279 | <div ref={this.inputRef}> | 292 | <div ref={this.inputRef}> |
280 | <Input | 293 | <Input |
281 | placeholder={intl.formatMessage(messages.search)} | 294 | placeholder={intl.formatMessage(messages.search)} |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index 29b76921f..c2ce3d783 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -4325,29 +4325,42 @@ | |||
4325 | { | 4325 | { |
4326 | "descriptors": [ | 4326 | "descriptors": [ |
4327 | { | 4327 | { |
4328 | "defaultMessage": "!!!QuickSwitch", | ||
4329 | "end": { | ||
4330 | "column": 3, | ||
4331 | "line": 19 | ||
4332 | }, | ||
4333 | "file": "src/features/quickSwitch/Component.js", | ||
4334 | "id": "feature.quickSwitch.title", | ||
4335 | "start": { | ||
4336 | "column": 9, | ||
4337 | "line": 16 | ||
4338 | } | ||
4339 | }, | ||
4340 | { | ||
4328 | "defaultMessage": "!!!Search...", | 4341 | "defaultMessage": "!!!Search...", |
4329 | "end": { | 4342 | "end": { |
4330 | "column": 3, | 4343 | "column": 3, |
4331 | "line": 18 | 4344 | "line": 23 |
4332 | }, | 4345 | }, |
4333 | "file": "src/features/quickSwitch/Component.js", | 4346 | "file": "src/features/quickSwitch/Component.js", |
4334 | "id": "feature.quickSwitch.search", | 4347 | "id": "feature.quickSwitch.search", |
4335 | "start": { | 4348 | "start": { |
4336 | "column": 10, | 4349 | "column": 10, |
4337 | "line": 15 | 4350 | "line": 20 |
4338 | } | 4351 | } |
4339 | }, | 4352 | }, |
4340 | { | 4353 | { |
4341 | "defaultMessage": "!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.", | 4354 | "defaultMessage": "!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.", |
4342 | "end": { | 4355 | "end": { |
4343 | "column": 3, | 4356 | "column": 3, |
4344 | "line": 22 | 4357 | "line": 27 |
4345 | }, | 4358 | }, |
4346 | "file": "src/features/quickSwitch/Component.js", | 4359 | "file": "src/features/quickSwitch/Component.js", |
4347 | "id": "feature.quickSwitch.info", | 4360 | "id": "feature.quickSwitch.info", |
4348 | "start": { | 4361 | "start": { |
4349 | "column": 8, | 4362 | "column": 8, |
4350 | "line": 19 | 4363 | "line": 24 |
4351 | } | 4364 | } |
4352 | } | 4365 | } |
4353 | ], | 4366 | ], |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index af6dce625..2cdc57e3f 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -11,6 +11,7 @@ | |||
11 | "feature.delayApp.upgrade.actionShort": "Upgrade account", | 11 | "feature.delayApp.upgrade.actionShort": "Upgrade account", |
12 | "feature.quickSwitch.info": "Select a service with TAB, ↑ and ↓. Open a service with ENTER.", | 12 | "feature.quickSwitch.info": "Select a service with TAB, ↑ and ↓. Open a service with ENTER.", |
13 | "feature.quickSwitch.search": "Search...", | 13 | "feature.quickSwitch.search": "Search...", |
14 | "feature.quickSwitch.title": "QuickSwitch", | ||
14 | "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.", | 15 | "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.", |
15 | "feature.shareFranz.action.email": "Send as email", | 16 | "feature.shareFranz.action.email": "Send as email", |
16 | "feature.shareFranz.action.facebook": "Share on Facebook", | 17 | "feature.shareFranz.action.facebook": "Share on Facebook", |
diff --git a/src/i18n/messages/src/features/quickSwitch/Component.json b/src/i18n/messages/src/features/quickSwitch/Component.json index f42e1af49..d0debee0e 100644 --- a/src/i18n/messages/src/features/quickSwitch/Component.json +++ b/src/i18n/messages/src/features/quickSwitch/Component.json | |||
@@ -1,14 +1,27 @@ | |||
1 | [ | 1 | [ |
2 | { | 2 | { |
3 | "id": "feature.quickSwitch.title", | ||
4 | "defaultMessage": "!!!QuickSwitch", | ||
5 | "file": "src/features/quickSwitch/Component.js", | ||
6 | "start": { | ||
7 | "line": 16, | ||
8 | "column": 9 | ||
9 | }, | ||
10 | "end": { | ||
11 | "line": 19, | ||
12 | "column": 3 | ||
13 | } | ||
14 | }, | ||
15 | { | ||
3 | "id": "feature.quickSwitch.search", | 16 | "id": "feature.quickSwitch.search", |
4 | "defaultMessage": "!!!Search...", | 17 | "defaultMessage": "!!!Search...", |
5 | "file": "src/features/quickSwitch/Component.js", | 18 | "file": "src/features/quickSwitch/Component.js", |
6 | "start": { | 19 | "start": { |
7 | "line": 15, | 20 | "line": 20, |
8 | "column": 10 | 21 | "column": 10 |
9 | }, | 22 | }, |
10 | "end": { | 23 | "end": { |
11 | "line": 18, | 24 | "line": 23, |
12 | "column": 3 | 25 | "column": 3 |
13 | } | 26 | } |
14 | }, | 27 | }, |
@@ -17,11 +30,11 @@ | |||
17 | "defaultMessage": "!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.", | 30 | "defaultMessage": "!!!Select a service with TAB, ↑ and ↓. Open a service with ENTER.", |
18 | "file": "src/features/quickSwitch/Component.js", | 31 | "file": "src/features/quickSwitch/Component.js", |
19 | "start": { | 32 | "start": { |
20 | "line": 19, | 33 | "line": 24, |
21 | "column": 8 | 34 | "column": 8 |
22 | }, | 35 | }, |
23 | "end": { | 36 | "end": { |
24 | "line": 22, | 37 | "line": 27, |
25 | "column": 3 | 38 | "column": 3 |
26 | } | 39 | } |
27 | } | 40 | } |