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 | |
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')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 75 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 93 |
2 files changed, 94 insertions, 74 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 && ( |
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index f25d966f4..08809f007 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js | |||
@@ -12,6 +12,8 @@ export default class ImageUpload extends Component { | |||
12 | field: PropTypes.instanceOf(Field).isRequired, | 12 | field: PropTypes.instanceOf(Field).isRequired, |
13 | className: PropTypes.string, | 13 | className: PropTypes.string, |
14 | multiple: PropTypes.bool, | 14 | multiple: PropTypes.bool, |
15 | textDelete: PropTypes.string.isRequired, | ||
16 | textUpload: PropTypes.string.isRequired, | ||
15 | }; | 17 | }; |
16 | 18 | ||
17 | static defaultProps = { | 19 | static defaultProps = { |
@@ -39,56 +41,63 @@ export default class ImageUpload extends Component { | |||
39 | field, | 41 | field, |
40 | className, | 42 | className, |
41 | multiple, | 43 | multiple, |
44 | textDelete, | ||
45 | textUpload, | ||
42 | } = this.props; | 46 | } = this.props; |
43 | 47 | ||
44 | const cssClasses = classnames({ | 48 | const cssClasses = classnames({ |
45 | 'franz-form__button': true, | 49 | 'image-upload__dropzone': true, |
46 | [`${className}`]: className, | 50 | [`${className}`]: className, |
47 | }); | 51 | }); |
48 | 52 | ||
49 | return ( | 53 | return ( |
50 | <div> | 54 | <div className="image-upload-wrapper"> |
51 | {field.label} | 55 | <label className="franz-form__label" htmlFor="iconUpload">{field.label}</label> |
52 | {(field.value && field.value !== 'delete') || this.state.path ? ( | 56 | <div className="image-upload"> |
53 | <div | 57 | {(field.value && field.value !== 'delete') || this.state.path ? ( |
54 | className="image-upload" | 58 | <div> |
55 | > | 59 | <div |
56 | <div | 60 | className="image-upload__preview" |
57 | className="image-upload__preview" | 61 | style={({ |
58 | style={({ | 62 | backgroundImage: `url("${field.value || this.state.path}")`, |
59 | backgroundImage: `url(${field.value || this.state.path})`, | 63 | })} |
60 | })} | 64 | /> |
61 | /> | 65 | <div className="image-upload__action"> |
62 | <div className="image-upload__action"> | 66 | <button |
63 | <button | 67 | type="button" |
64 | type="button" | 68 | onClick={() => { |
65 | onClick={() => { | 69 | if (field.value) { |
66 | if (field.value) { | 70 | field.set('delete'); |
67 | field.value = 'delete'; | 71 | } else { |
68 | } else { | 72 | this.setState({ |
69 | this.setState({ | 73 | path: null, |
70 | path: null, | 74 | }); |
71 | }); | 75 | } |
72 | } | 76 | }} |
73 | }} | 77 | > |
74 | > | 78 | <i className="mdi mdi-delete" /> |
75 | remove icon | 79 | <p> |
76 | 80 | {textDelete} | |
77 | </button> | 81 | </p> |
78 | <div className="image-upload__action-background" /> | 82 | </button> |
83 | <div className="image-upload__action-background" /> | ||
84 | </div> | ||
79 | </div> | 85 | </div> |
80 | </div> | 86 | ) : ( |
81 | ) : ( | 87 | <Dropzone |
82 | <Dropzone | 88 | ref={(node) => { this.dropzoneRef = node; }} |
83 | ref={(node) => { this.dropzoneRef = node; }} | 89 | onDrop={this.onDrop.bind(this)} |
84 | onDrop={this.onDrop.bind(this)} | 90 | className={cssClasses} |
85 | className={cssClasses} | 91 | multiple={multiple} |
86 | multiple={multiple} | 92 | accept="image/jpeg, image/png" |
87 | accept="image/jpeg, image/png" | 93 | > |
88 | > | 94 | <i className="mdi mdi-file-image" /> |
89 | <p>Try dropping some files here, or click to select files to upload.</p> | 95 | <p> |
90 | </Dropzone> | 96 | {textUpload} |
91 | )} | 97 | </p> |
98 | </Dropzone> | ||
99 | )} | ||
100 | </div> | ||
92 | </div> | 101 | </div> |
93 | ); | 102 | ); |
94 | } | 103 | } |