diff options
author | Stefan Malzner <stefan@adlk.io> | 2018-01-02 22:54:17 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2018-01-02 22:54:47 +0100 |
commit | 6b97e42537879be306cd2aaf95dd8aebf8655fcb (patch) | |
tree | 2c2628d507cbf34c953dc97d9a5fe30d8ffcd5db /src/components/settings/services/EditServiceForm.js | |
parent | First working draft of icon upload (diff) | |
download | ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.gz ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.zst ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.zip |
feat(Service): Add custom service icon upload
Diffstat (limited to 'src/components/settings/services/EditServiceForm.js')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 75 |
1 files changed, 43 insertions, 32 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 4f2f98a01..c0a993736 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js | |||
@@ -84,6 +84,14 @@ const messages = defineMessages({ | |||
84 | id: 'settings.service.form.headlineGeneral', | 84 | id: 'settings.service.form.headlineGeneral', |
85 | defaultMessage: '!!!General', | 85 | defaultMessage: '!!!General', |
86 | }, | 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 | }, | ||
87 | }); | 95 | }); |
88 | 96 | ||
89 | @observer | 97 | @observer |
@@ -223,14 +231,8 @@ export default class EditServiceForm extends Component { | |||
223 | </div> | 231 | </div> |
224 | <div className="settings__body"> | 232 | <div className="settings__body"> |
225 | <form onSubmit={e => this.submit(e)} id="form"> | 233 | <form onSubmit={e => this.submit(e)} id="form"> |
226 | <div className="service-flex-grid"> | 234 | <div className="service-name"> |
227 | <div className="service-name"> | 235 | <Input field={form.$('name')} focus /> |
228 | <Input field={form.$('name')} focus /> | ||
229 | </div> | ||
230 | <div className="service-icon"> | ||
231 | {/* <Input field={form.$('name')} focus /> */} | ||
232 | <ImageUpload field={form.$('customIcon')} /> | ||
233 | </div> | ||
234 | </div> | 236 | </div> |
235 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 237 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
236 | <Tabs | 238 | <Tabs |
@@ -275,32 +277,41 @@ export default class EditServiceForm extends Component { | |||
275 | )} | 277 | )} |
276 | </Tabs> | 278 | </Tabs> |
277 | )} | 279 | )} |
278 | <div className="settings__options"> | 280 | <div className="service-flex-grid"> |
279 | <div className="settings__settings-group"> | 281 | <div className="settings__options"> |
280 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> | 282 | <div className="settings__settings-group"> |
281 | <Toggle field={form.$('isNotificationEnabled')} /> | 283 | <h3>{intl.formatMessage(messages.headlineNotifications)}</h3> |
282 | <Toggle field={form.$('isMuted')} /> | 284 | <Toggle field={form.$('isNotificationEnabled')} /> |
283 | <p className="settings__help"> | 285 | <Toggle field={form.$('isMuted')} /> |
284 | {intl.formatMessage(messages.isMutedInfo)} | 286 | <p className="settings__help"> |
285 | </p> | 287 | {intl.formatMessage(messages.isMutedInfo)} |
286 | </div> | 288 | </p> |
289 | </div> | ||
287 | 290 | ||
288 | <div className="settings__settings-group"> | 291 | <div className="settings__settings-group"> |
289 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> | 292 | <h3>{intl.formatMessage(messages.headlineBadges)}</h3> |
290 | <Toggle field={form.$('isBadgeEnabled')} /> | 293 | <Toggle field={form.$('isBadgeEnabled')} /> |
291 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( | 294 | {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( |
292 | <div> | 295 | <div> |
293 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> | 296 | <Toggle field={form.$('isIndirectMessageBadgeEnabled')} /> |
294 | <p className="settings__help"> | 297 | <p className="settings__help"> |
295 | {intl.formatMessage(messages.indirectMessageInfo)} | 298 | {intl.formatMessage(messages.indirectMessageInfo)} |
296 | </p> | 299 | </p> |
297 | </div> | 300 | </div> |
298 | )} | 301 | )} |
299 | </div> | 302 | </div> |
300 | 303 | ||
301 | <div className="settings__settings-group"> | 304 | <div className="settings__settings-group"> |
302 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> | 305 | <h3>{intl.formatMessage(messages.headlineGeneral)}</h3> |
303 | <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 | /> | ||
304 | </div> | 315 | </div> |
305 | </div> | 316 | </div> |
306 | {recipe.message && ( | 317 | {recipe.message && ( |