diff options
Diffstat (limited to 'src/components/settings/services')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 77 | ||||
-rw-r--r-- | src/components/settings/services/ServicesDashboard.js | 42 |
2 files changed, 86 insertions, 33 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 4458c4c5a..f6f2df2f3 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -13,6 +13,7 @@ import Tabs, { TabItem } from '../../ui/Tabs'; | |||
13 | import Input from '../../ui/Input'; | 13 | import Input from '../../ui/Input'; |
14 | import Toggle from '../../ui/Toggle'; | 14 | import Toggle from '../../ui/Toggle'; |
15 | import Button from '../../ui/Button'; | 15 | import Button from '../../ui/Button'; |
16 | import ImageUpload from '../../ui/ImageUpload'; | ||
16 | 17 | ||
17 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
18 | saveService: { | 19 | saveService: { |
@@ -77,12 +78,20 @@ const messages = defineMessages({ | |||
77 | }, | 78 | }, |
78 | headlineBadges: { | 79 | headlineBadges: { |
79 | id: 'settings.service.form.headlineBadges', | 80 | id: 'settings.service.form.headlineBadges', |
80 | defaultMessage: '!!!Unread message dadges', | 81 | defaultMessage: '!!!Unread message badges', |
81 | }, | 82 | }, |
82 | headlineGeneral: { | 83 | headlineGeneral: { |
83 | id: 'settings.service.form.headlineGeneral', | 84 | id: 'settings.service.form.headlineGeneral', |
84 | defaultMessage: '!!!General', | 85 | defaultMessage: '!!!General', |
85 | }, | 86 | }, |
87 | iconDelete: { | ||
88 | id: 'settings.service.form.iconDelete', | ||
89 | defaultMessage: '!!!Delete', | ||
90 | }, | ||
91 | iconUpload: { | ||
92 | id: 'settings.service.form.iconUpload', | ||
93 | defaultMessage: '!!!Drop your image, or click here', | ||
94 | }, | ||
86 | }); | 95 | }); |
87 | 96 | ||
88 | @observer | 97 | @observer |
@@ -126,6 +135,11 @@ export default class EditServiceForm extends Component { | |||
126 | const values = form.values(); | 135 | const values = form.values(); |
127 | let isValid = true; | 136 | let isValid = true; |
128 | 137 | ||
138 | const files = form.$('customIcon').files; | ||
139 | if (files) { | ||
140 | values.iconFile = files[0]; | ||
141 | } | ||
142 | |||
129 | if (recipe.validateUrl && values.customUrl) { | 143 | if (recipe.validateUrl && values.customUrl) { |
130 | this.setState({ isValidatingCustomUrl: true }); | 144 | this.setState({ isValidatingCustomUrl: true }); |
131 | try { | 145 | try { |
@@ -217,7 +231,9 @@ export default class EditServiceForm extends Component { | |||
217 | </div> | 231 | </div> |
218 | <div className="settings__body"> | 232 | <div className="settings__body"> |
219 | <form onSubmit={e => this.submit(e)} id="form"> | 233 | <form onSubmit={e => this.submit(e)} id="form"> |
220 | <Input field={form.$('name')} focus /> | 234 | <div className="service-name"> |
235 | <Input field={form.$('name')} focus /> | ||
236 | </div> | ||
221 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 237 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
222 | <Tabs | 238 | <Tabs |
223 | active={activeTabIndex} | 239 | active={activeTabIndex} |
@@ -261,32 +277,41 @@ export default class EditServiceForm extends Component { | |||
261 | )} | 277 | )} |
262 | </Tabs> | 278 | </Tabs> |
263 | )} | 279 | )} |
264 | <div className="settings__options"> | 280 | <div className="service-flex-grid"> |
265 | <div className="settings__settings-group"> | 281 | <div className="settings__options"> |
266 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> | 282 | <div className="settings__settings-group"> |
267 | <Toggle field={form.$('isNotificationEnabled')} /> | 283 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> |
268 | <Toggle field={form.$('isMuted')} /> | 284 | <Toggle field={form.$('isNotificationEnabled')} /> |
269 | <p className="settings__help"> | 285 | <Toggle field={form.$('isMuted')} /> |
270 | {intl.formatMessage(messages.isMutedInfo)} | 286 | <p className="settings__help"> |
271 | </p> | 287 | {intl.formatMessage(messages.isMutedInfo)} |
272 | </div> | 288 | </p> |
289 | </div> | ||
273 | 290 | ||
274 | <div className="settings__settings-group"> | 291 | <div className="settings__settings-group"> |
275 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 292 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
276 | <Toggle field={form.$('isBadgeEnabled')} /> | 293 | <Toggle field={form.$('isBadgeEnabled')} /> |
277 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( | 294 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( |
278 | <div> | 295 | <div> |
279 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 296 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> |
280 | <p className="settings__help"> | 297 | <p className="settings__help"> |
281 | {intl.formatMessage(messages.indirectMessageInfo)} | 298 | {intl.formatMessage(messages.indirectMessageInfo)} |
282 | </p> | 299 | </p> |
283 | </div> | 300 | </div> |
284 | )} | 301 | )} |
285 | </div> | 302 | </div> |
286 | 303 | ||
287 | <div className="settings__settings-group"> | 304 | <div className="settings__settings-group"> |
288 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | 305 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> |
289 | <Toggle field={form.$('isEnabled')} /> | 306 | <Toggle field={form.$('isEnabled')} /> |
307 | </div> | ||
308 | </div> | ||
309 | <div className="service-icon"> | ||
310 | <ImageUpload | ||
311 | field={form.$('customIcon')} | ||
312 | textDelete={intl.formatMessage(messages.iconDelete)} | ||
313 | textUpload={intl.formatMessage(messages.iconUpload)} | ||
314 | /> | ||
290 | </div> | 315 | </div> |
291 | </div> | 316 | </div> |
292 | {recipe.message && ( | 317 | {recipe.message && ( |
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js index 5f146b5f3..20e451f01 100644 --- a/src/components/settings/services/ServicesDashboard.js +++ b/src/components/settings/services/ServicesDashboard.js | |||
@@ -15,10 +15,18 @@ const messages = defineMessages({ | |||
15 | id: 'settings.services.headline', | 15 | id: 'settings.services.headline', |
16 | defaultMessage: '!!!Your services', | 16 | defaultMessage: '!!!Your services', |
17 | }, | 17 | }, |
18 | searchService: { | ||
19 | id: 'settings.searchService', | ||
20 | defaultMessage: '!!!Search service', | ||
21 | }, | ||
18 | noServicesAdded: { | 22 | noServicesAdded: { |
19 | id: 'settings.services.noServicesAdded', | 23 | id: 'settings.services.noServicesAdded', |
20 | defaultMessage: '!!!You haven\'t added any services yet.', | 24 | defaultMessage: '!!!You haven\'t added any services yet.', |
21 | }, | 25 | }, |
26 | noServiceFound: { | ||
27 | id: 'settings.recipes.nothingFound', | ||
28 | defaultMessage: '!!!Sorry, but no service matched your search term.', | ||
29 | }, | ||
22 | discoverServices: { | 30 | discoverServices: { |
23 | id: 'settings.services.discoverServices', | 31 | id: 'settings.services.discoverServices', |
24 | defaultMessage: '!!!Discover services', | 32 | defaultMessage: '!!!Discover services', |
@@ -53,7 +61,13 @@ export default class ServicesDashboard extends Component { | |||
53 | servicesRequestFailed: PropTypes.bool.isRequired, | 61 | servicesRequestFailed: PropTypes.bool.isRequired, |
54 | retryServicesRequest: PropTypes.func.isRequired, | 62 | retryServicesRequest: PropTypes.func.isRequired, |
55 | status: MobxPropTypes.arrayOrObservableArray.isRequired, | 63 | status: MobxPropTypes.arrayOrObservableArray.isRequired, |
64 | searchNeedle: PropTypes.string, | ||
56 | }; | 65 | }; |
66 | |||
67 | static defaultProps = { | ||
68 | searchNeedle: '', | ||
69 | } | ||
70 | |||
57 | static contextTypes = { | 71 | static contextTypes = { |
58 | intl: intlShape, | 72 | intl: intlShape, |
59 | }; | 73 | }; |
@@ -69,20 +83,24 @@ export default class ServicesDashboard extends Component { | |||
69 | servicesRequestFailed, | 83 | servicesRequestFailed, |
70 | retryServicesRequest, | 84 | retryServicesRequest, |
71 | status, | 85 | status, |
86 | searchNeedle, | ||
72 | } = this.props; | 87 | } = this.props; |
73 | const { intl } = this.context; | 88 | const { intl } = this.context; |
74 | 89 | ||
75 | return ( | 90 | return ( |
76 | <div className="settings__main"> | 91 | <div className="settings__main"> |
77 | <div className="settings__header"> | 92 | <div className="settings__header"> |
78 | <SearchInput | 93 | <h1>{intl.formatMessage(messages.headline)}</h1> |
79 | className="settings__search-header" | ||
80 | defaultValue={intl.formatMessage(messages.headline)} | ||
81 | onChange={needle => filterServices({ needle })} | ||
82 | onReset={() => resetFilter()} | ||
83 | /> | ||
84 | </div> | 94 | </div> |
85 | <div className="settings__body"> | 95 | <div className="settings__body"> |
96 | {!isLoading && ( | ||
97 | <SearchInput | ||
98 | placeholder={intl.formatMessage(messages.searchService)} | ||
99 | onChange={needle => filterServices({ needle })} | ||
100 | onReset={() => resetFilter()} | ||
101 | autoFocus | ||
102 | /> | ||
103 | )} | ||
86 | {!isLoading && servicesRequestFailed && ( | 104 | {!isLoading && servicesRequestFailed && ( |
87 | <div> | 105 | <div> |
88 | <Infobox | 106 | <Infobox |
@@ -121,7 +139,7 @@ export default class ServicesDashboard extends Component { | |||
121 | </Appear> | 139 | </Appear> |
122 | )} | 140 | )} |
123 | 141 | ||
124 | {!isLoading && services.length === 0 && ( | 142 | {!isLoading && services.length === 0 && !searchNeedle && ( |
125 | <div className="align-middle settings__empty-state"> | 143 | <div className="align-middle settings__empty-state"> |
126 | <p className="settings__empty-text"> | 144 | <p className="settings__empty-text"> |
127 | <span className="emoji"> | 145 | <span className="emoji"> |
@@ -132,6 +150,16 @@ export default class ServicesDashboard extends Component { | |||
132 | <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link> | 150 | <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link> |
133 | </div> | 151 | </div> |
134 | )} | 152 | )} |
153 | {!isLoading && services.length === 0 && searchNeedle && ( | ||
154 | <div className="align-middle settings__empty-state"> | ||
155 | <p className="settings__empty-text"> | ||
156 | <span className="emoji"> | ||
157 | <img src="./assets/images/emoji/dontknow.png" alt="" /> | ||
158 | </span> | ||
159 | {intl.formatMessage(messages.noServiceFound)} | ||
160 | </p> | ||
161 | </div> | ||
162 | )} | ||
135 | {isLoading ? ( | 163 | {isLoading ? ( |
136 | <Loader /> | 164 | <Loader /> |
137 | ) : ( | 165 | ) : ( |