diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/services/EditServiceForm.js | 11 | ||||
-rw-r--r-- | src/components/ui/ImageUpload.js | 113 | ||||
-rw-r--r-- | src/containers/settings/EditServiceScreen.js | 15 | ||||
-rw-r--r-- | src/styles/image-upload.scss | 52 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/settings.scss | 20 |
6 files changed, 205 insertions, 7 deletions
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 4458c4c5a..ee69d53aa 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: { |
@@ -217,7 +218,15 @@ export default class EditServiceForm extends Component { | |||
217 | </div> | 218 | </div> |
218 | <div className="settings__body"> | 219 | <div className="settings__body"> |
219 | <form onSubmit={e => this.submit(e)} id="form"> | 220 | <form onSubmit={e => this.submit(e)} id="form"> |
220 | <Input field={form.$('name')} focus /> | 221 | <div className="service-flex-grid"> |
222 | <div className="service-name"> | ||
223 | <Input field={form.$('name')} focus /> | ||
224 | </div> | ||
225 | <div className="service-icon"> | ||
226 | {/* <Input field={form.$('name')} focus /> */} | ||
227 | <ImageUpload field={form.$('icon')} /> | ||
228 | </div> | ||
229 | </div> | ||
221 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( | 230 | {(recipe.hasTeamId || recipe.hasCustomUrl) && ( |
222 | <Tabs | 231 | <Tabs |
223 | active={activeTabIndex} | 232 | active={activeTabIndex} |
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js new file mode 100644 index 000000000..d07c3649c --- /dev/null +++ b/src/components/ui/ImageUpload.js | |||
@@ -0,0 +1,113 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import { Field } from 'mobx-react-form'; | ||
5 | // import Loader from 'react-loader'; | ||
6 | import classnames from 'classnames'; | ||
7 | import Dropzone from 'react-dropzone'; | ||
8 | |||
9 | @observer | ||
10 | export default class ImageUpload extends Component { | ||
11 | static propTypes = { | ||
12 | field: PropTypes.instanceOf(Field).isRequired, | ||
13 | className: PropTypes.string, | ||
14 | multiple: PropTypes.bool, | ||
15 | // disabled: PropTypes.bool, | ||
16 | // onClick: PropTypes.func, | ||
17 | // type: PropTypes.string, | ||
18 | // buttonType: PropTypes.string, | ||
19 | // loaded: PropTypes.bool, | ||
20 | // htmlForm: PropTypes.string, | ||
21 | }; | ||
22 | |||
23 | static defaultProps = { | ||
24 | className: null, | ||
25 | multiple: false, | ||
26 | // disabled: false, | ||
27 | // onClick: () => {}, | ||
28 | // type: 'button', | ||
29 | // buttonType: '', | ||
30 | // loaded: true, | ||
31 | // htmlForm: '', | ||
32 | }; | ||
33 | |||
34 | dropzoneRef = null; | ||
35 | |||
36 | state = { | ||
37 | path: null, | ||
38 | } | ||
39 | |||
40 | onDrop(acceptedFiles) { | ||
41 | // const req = request.post('/upload'); | ||
42 | acceptedFiles.forEach((file) => { | ||
43 | console.log(file); | ||
44 | this.setState({ | ||
45 | path: file.path, | ||
46 | }); | ||
47 | // req.attach(file.name, file); | ||
48 | }); | ||
49 | // req.end(callback); | ||
50 | } | ||
51 | |||
52 | render() { | ||
53 | const { | ||
54 | field, | ||
55 | className, | ||
56 | multiple, | ||
57 | // disabled, | ||
58 | // onClick, | ||
59 | // type, | ||
60 | // buttonType, | ||
61 | // loaded, | ||
62 | // htmlForm, | ||
63 | } = this.props; | ||
64 | |||
65 | const cssClasses = classnames({ | ||
66 | 'franz-form__button': true, | ||
67 | // [`franz-form__button--${buttonType}`]: buttonType, | ||
68 | [`${className}`]: className, | ||
69 | }); | ||
70 | |||
71 | return ( | ||
72 | <div> | ||
73 | {field.label} | ||
74 | {this.state.path ? ( | ||
75 | <div | ||
76 | className="image-upload" | ||
77 | > | ||
78 | <div | ||
79 | className="image-upload__preview" | ||
80 | style={({ | ||
81 | backgroundImage: `url(${this.state.path})`, | ||
82 | })} | ||
83 | /> | ||
84 | <div className="image-upload__action"> | ||
85 | <button | ||
86 | type="button" | ||
87 | onClick={() => { | ||
88 | this.setState({ | ||
89 | path: null, | ||
90 | }); | ||
91 | }} | ||
92 | > | ||
93 | remove icon | ||
94 | |||
95 | </button> | ||
96 | <div className="image-upload__action-background" /> | ||
97 | </div> | ||
98 | </div> | ||
99 | ) : ( | ||
100 | <Dropzone | ||
101 | ref={(node) => { this.dropzoneRef = node; }} | ||
102 | onDrop={this.onDrop.bind(this)} | ||
103 | className={cssClasses} | ||
104 | multiple={multiple} | ||
105 | accept="image/jpeg, image/png" | ||
106 | > | ||
107 | <p>Try dropping some files here, or click to select files to upload.</p> | ||
108 | </Dropzone> | ||
109 | )} | ||
110 | </div> | ||
111 | ); | ||
112 | } | ||
113 | } | ||
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 3c52152b1..8827896ef 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js | |||
@@ -46,6 +46,10 @@ const messages = defineMessages({ | |||
46 | id: 'settings.service.form.indirectMessages', | 46 | id: 'settings.service.form.indirectMessages', |
47 | defaultMessage: '!!!Show message badge for all new messages', | 47 | defaultMessage: '!!!Show message badge for all new messages', |
48 | }, | 48 | }, |
49 | icon: { | ||
50 | id: 'settings.service.form.icon', | ||
51 | defaultMessage: '!!!Icon', | ||
52 | }, | ||
49 | }); | 53 | }); |
50 | 54 | ||
51 | @inject('stores', 'actions') @observer | 55 | @inject('stores', 'actions') @observer |
@@ -102,6 +106,11 @@ export default class EditServiceScreen extends Component { | |||
102 | value: !service.isMuted, | 106 | value: !service.isMuted, |
103 | default: true, | 107 | default: true, |
104 | }, | 108 | }, |
109 | icon: { | ||
110 | label: intl.formatMessage(messages.icon), | ||
111 | value: service.icon, | ||
112 | default: true, | ||
113 | }, | ||
105 | }, | 114 | }, |
106 | }; | 115 | }; |
107 | 116 | ||
@@ -199,6 +208,12 @@ export default class EditServiceScreen extends Component { | |||
199 | return (<div>Loading...</div>); | 208 | return (<div>Loading...</div>); |
200 | } | 209 | } |
201 | 210 | ||
211 | if (!recipe) { | ||
212 | return ( | ||
213 | <div>something went wrong</div> | ||
214 | ); | ||
215 | } | ||
216 | |||
202 | const form = this.prepareForm(recipe, service); | 217 | const form = this.prepareForm(recipe, service); |
203 | 218 | ||
204 | return ( | 219 | return ( |
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss new file mode 100644 index 000000000..764bb3158 --- /dev/null +++ b/src/styles/image-upload.scss | |||
@@ -0,0 +1,52 @@ | |||
1 | .image-upload { | ||
2 | position: absolute; | ||
3 | width: 100px; | ||
4 | height: 100px; | ||
5 | border-radius: $theme-border-radius; | ||
6 | overflow: hidden; | ||
7 | |||
8 | &__preview, | ||
9 | &__action { | ||
10 | position: absolute; | ||
11 | top: 0; | ||
12 | left: 0; | ||
13 | right: 0; | ||
14 | } | ||
15 | |||
16 | &__preview { | ||
17 | z-index: 1; | ||
18 | background-size: cover; | ||
19 | background-size: 100%; | ||
20 | background-repeat: no-repeat; | ||
21 | background-position: center center; | ||
22 | margin: 5px; | ||
23 | } | ||
24 | |||
25 | &__action { | ||
26 | position: relative; | ||
27 | z-index: 10; | ||
28 | opacity: 0; | ||
29 | transition: opacity 0.5s; | ||
30 | |||
31 | &-background { | ||
32 | position: absolute; | ||
33 | top: 0; | ||
34 | left: 0; | ||
35 | right: 0; | ||
36 | bottom: 0; | ||
37 | background: rgba($theme-gray, 0.7); | ||
38 | z-index: 10; | ||
39 | } | ||
40 | |||
41 | button { | ||
42 | position: relative; | ||
43 | z-index: 100; | ||
44 | } | ||
45 | } | ||
46 | |||
47 | &:hover { | ||
48 | .image-upload__action { | ||
49 | opacity: 1; | ||
50 | } | ||
51 | } | ||
52 | } \ No newline at end of file | ||
diff --git a/src/styles/main.scss b/src/styles/main.scss index 0a082729c..261396f6f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
35 | @import './button.scss'; | 35 | @import './button.scss'; |
36 | @import './searchInput.scss'; | 36 | @import './searchInput.scss'; |
37 | @import './select.scss'; | 37 | @import './select.scss'; |
38 | @import './image-upload.scss'; | ||
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index b29ed5468..283913ab7 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -111,6 +111,20 @@ | |||
111 | &::-webkit-scrollbar-thumb:window-inactive { | 111 | &::-webkit-scrollbar-thumb:window-inactive { |
112 | background: none; | 112 | background: none; |
113 | } | 113 | } |
114 | |||
115 | .service-flex-grid { | ||
116 | display: flex; | ||
117 | } | ||
118 | |||
119 | .service-name { | ||
120 | flex: 1px; | ||
121 | } | ||
122 | |||
123 | .service-icon { | ||
124 | width: 30%; | ||
125 | min-width: 100px; | ||
126 | margin-left: 40px; | ||
127 | } | ||
114 | } | 128 | } |
115 | 129 | ||
116 | .settings__close { | 130 | .settings__close { |
@@ -323,12 +337,6 @@ | |||
323 | } | 337 | } |
324 | } | 338 | } |
325 | 339 | ||
326 | // @include element(add-service-teaser) { | ||
327 | // height: auto; | ||
328 | // margin-top: 20px; | ||
329 | // display: block; | ||
330 | // text-align: center; | ||
331 | // } | ||
332 | .emoji { | 340 | .emoji { |
333 | display: block; | 341 | display: block; |
334 | font-size: 40px; | 342 | font-size: 40px; |