aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2018-01-02 22:54:17 +0100
committerLibravatar Stefan Malzner <stefan@adlk.io>2018-01-02 22:54:47 +0100
commit6b97e42537879be306cd2aaf95dd8aebf8655fcb (patch)
tree2c2628d507cbf34c953dc97d9a5fe30d8ffcd5db /src/components
parentFirst working draft of icon upload (diff)
downloadferdium-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.js75
-rw-r--r--src/components/ui/ImageUpload.js93
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 }
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-08-02 21:16:35 +0000