diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-04-15 13:27:15 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-15 13:27:15 +0200 |
commit | 3a01cc4efb01942183c974e29cde2d4a657e206e (patch) | |
tree | 70a46d62fd8067d9b18f7ab9f121cceca6f6d244 /src | |
parent | Add workspace empty state (diff) | |
download | ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.tar.gz ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.tar.zst ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.zip |
Add services empty state
Diffstat (limited to 'src')
3 files changed, 84 insertions, 9 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index bba4485ff..e602ebd5a 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } 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 { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -36,6 +36,14 @@ const messages = defineMessages({ | |||
36 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | 36 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', |
37 | defaultMessage: '!!!Services in this Workspace', | 37 | defaultMessage: '!!!Services in this Workspace', |
38 | }, | 38 | }, |
39 | noServicesAdded: { | ||
40 | id: 'settings.services.noServicesAdded', | ||
41 | defaultMessage: '!!!You haven\'t added any services yet.', | ||
42 | }, | ||
43 | discoverServices: { | ||
44 | id: 'settings.services.discoverServices', | ||
45 | defaultMessage: '!!!Discover services', | ||
46 | }, | ||
39 | }); | 47 | }); |
40 | 48 | ||
41 | const styles = () => ({ | 49 | const styles = () => ({ |
@@ -150,14 +158,29 @@ class EditWorkspaceForm extends Component { | |||
150 | </div> | 158 | </div> |
151 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> | 159 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> |
152 | <div className={classes.serviceList}> | 160 | <div className={classes.serviceList}> |
153 | {services.map(s => ( | 161 | {services.length === 0 ? ( |
154 | <WorkspaceServiceListItem | 162 | <div className="align-middle settings__empty-state"> |
155 | key={s.id} | 163 | {/* ===== Empty state ===== */} |
156 | service={s} | 164 | <p className="settings__empty-text"> |
157 | isInWorkspace={workspaceServices.includes(s.id)} | 165 | <span className="emoji"> |
158 | onToggle={() => this.toggleService(s)} | 166 | <img src="./assets/images/emoji/sad.png" alt="" /> |
159 | /> | 167 | </span> |
160 | ))} | 168 | {intl.formatMessage(messages.noServicesAdded)} |
169 | </p> | ||
170 | <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link> | ||
171 | </div> | ||
172 | ) : ( | ||
173 | <Fragment> | ||
174 | {services.map(s => ( | ||
175 | <WorkspaceServiceListItem | ||
176 | key={s.id} | ||
177 | service={s} | ||
178 | isInWorkspace={workspaceServices.includes(s.id)} | ||
179 | onToggle={() => this.toggleService(s)} | ||
180 | /> | ||
181 | ))} | ||
182 | </Fragment> | ||
183 | )} | ||
161 | </div> | 184 | </div> |
162 | </div> | 185 | </div> |
163 | <div className="settings__controls"> | 186 | <div className="settings__controls"> |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index df7f04a06..e662ea6b9 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -3347,6 +3347,32 @@ | |||
3347 | "column": 31, | 3347 | "column": 31, |
3348 | "line": 35 | 3348 | "line": 35 |
3349 | } | 3349 | } |
3350 | }, | ||
3351 | { | ||
3352 | "defaultMessage": "!!!You haven't added any services yet.", | ||
3353 | "end": { | ||
3354 | "column": 3, | ||
3355 | "line": 42 | ||
3356 | }, | ||
3357 | "file": "src/features/workspaces/components/EditWorkspaceForm.js", | ||
3358 | "id": "settings.services.noServicesAdded", | ||
3359 | "start": { | ||
3360 | "column": 19, | ||
3361 | "line": 39 | ||
3362 | } | ||
3363 | }, | ||
3364 | { | ||
3365 | "defaultMessage": "!!!Discover services", | ||
3366 | "end": { | ||
3367 | "column": 3, | ||
3368 | "line": 46 | ||
3369 | }, | ||
3370 | "file": "src/features/workspaces/components/EditWorkspaceForm.js", | ||
3371 | "id": "settings.services.discoverServices", | ||
3372 | "start": { | ||
3373 | "column": 20, | ||
3374 | "line": 43 | ||
3375 | } | ||
3350 | } | 3376 | } |
3351 | ], | 3377 | ], |
3352 | "path": "src/features/workspaces/components/EditWorkspaceForm.json" | 3378 | "path": "src/features/workspaces/components/EditWorkspaceForm.json" |
diff --git a/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json b/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json index 7b0c3e1ce..20ed99f8d 100644 --- a/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json +++ b/src/i18n/messages/src/features/workspaces/components/EditWorkspaceForm.json | |||
@@ -63,5 +63,31 @@ | |||
63 | "line": 38, | 63 | "line": 38, |
64 | "column": 3 | 64 | "column": 3 |
65 | } | 65 | } |
66 | }, | ||
67 | { | ||
68 | "id": "settings.services.noServicesAdded", | ||
69 | "defaultMessage": "!!!You haven't added any services yet.", | ||
70 | "file": "src/features/workspaces/components/EditWorkspaceForm.js", | ||
71 | "start": { | ||
72 | "line": 39, | ||
73 | "column": 19 | ||
74 | }, | ||
75 | "end": { | ||
76 | "line": 42, | ||
77 | "column": 3 | ||
78 | } | ||
79 | }, | ||
80 | { | ||
81 | "id": "settings.services.discoverServices", | ||
82 | "defaultMessage": "!!!Discover services", | ||
83 | "file": "src/features/workspaces/components/EditWorkspaceForm.js", | ||
84 | "start": { | ||
85 | "line": 43, | ||
86 | "column": 20 | ||
87 | }, | ||
88 | "end": { | ||
89 | "line": 46, | ||
90 | "column": 3 | ||
91 | } | ||
66 | } | 92 | } |
67 | ] \ No newline at end of file | 93 | ] \ No newline at end of file |