From a1bdd02fca413cdc314137dc65e835131c358e72 Mon Sep 17 00:00:00 2001 From: Stefan Malzner Date: Sun, 12 Nov 2017 19:12:29 +0100 Subject: [wip] add icon upload --- src/components/settings/services/EditServiceForm.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'src/components/settings/services') diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index 753781507..bcbda7773 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'; import Input from '../../ui/Input'; import Toggle from '../../ui/Toggle'; import Button from '../../ui/Button'; +import ImageUpload from '../../ui/ImageUpload'; const messages = defineMessages({ saveService: { @@ -195,7 +196,15 @@ export default class EditServiceForm extends Component {
this.submit(e)} id="form"> - +
+
+ +
+
+ {/* */} + +
+
{(recipe.hasTeamId || recipe.hasCustomUrl) && ( Date: Wed, 27 Dec 2017 13:09:17 +0100 Subject: First working draft of icon upload --- package.json | 2 +- src/api/server/ServerApi.js | 42 ++++++++++++++++++++-- .../settings/services/EditServiceForm.js | 7 +++- src/components/ui/ImageUpload.js | 42 +++++++--------------- src/containers/settings/EditServiceScreen.js | 7 ++-- src/i18n/locales/en-US.json | 1 + src/models/Service.js | 11 +++--- src/stores/ServicesStore.js | 14 +++++++- yarn.lock | 6 ++-- 9 files changed, 86 insertions(+), 46 deletions(-) (limited to 'src/components/settings/services') diff --git a/package.json b/package.json index 6c4c65cb8..5dae5bc7c 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "mkdirp": "^0.5.1", "mobx": "^3.1.0", "mobx-react": "^4.1.0", - "mobx-react-form": "1.24.0", + "mobx-react-form": "^1.32.2", "mobx-react-router": "^3.1.2", "moment": "^2.17.1", "normalize-url": "^1.9.1", diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js index 8b3136d27..6b96f709e 100644 --- a/src/api/server/ServerApi.js +++ b/src/api/server/ServerApi.js @@ -167,27 +167,65 @@ export default class ServerApi { throw request; } const serviceData = await request.json(); + + if (data.iconFile) { + const iconUrl = await this.uploadServiceIcon(serviceData.data.id, data.iconFile); + + serviceData.data.iconUrl = iconUrl; + } + const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) }); console.debug('ServerApi::createService resolves', service); return service; } - async updateService(recipeId, data) { - const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${recipeId}`, this._prepareAuthRequest({ + async updateService(serviceId, rawData) { + const data = rawData; + + if (data.iconFile) { + await this.uploadServiceIcon(serviceId, data.iconFile); + } + + const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, this._prepareAuthRequest({ method: 'PUT', body: JSON.stringify(data), })); + if (!request.ok) { throw request; } + const serviceData = await request.json(); + const service = Object.assign(serviceData, { data: await this._prepareServiceModel(serviceData.data) }); console.debug('ServerApi::updateService resolves', service); return service; } + async uploadServiceIcon(serviceId, icon) { + const formData = new FormData(); + formData.append('icon', icon); + + const requestData = this._prepareAuthRequest({ + method: 'PUT', + body: formData, + }); + + delete requestData.headers['Content-Type']; + + const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/${serviceId}`, requestData); + + if (!request.ok) { + throw request; + } + + const serviceData = await request.json(); + + return serviceData.data.iconUrl; + } + async reorderService(data) { const request = await window.fetch(`${SERVER_URL}/${API_VERSION}/service/reorder`, this._prepareAuthRequest({ method: 'PUT', diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js index ee69d53aa..4f2f98a01 100644 --- a/src/components/settings/services/EditServiceForm.js +++ b/src/components/settings/services/EditServiceForm.js @@ -127,6 +127,11 @@ export default class EditServiceForm extends Component { const values = form.values(); let isValid = true; + const files = form.$('customIcon').files; + if (files) { + values.iconFile = files[0]; + } + if (recipe.validateUrl && values.customUrl) { this.setState({ isValidatingCustomUrl: true }); try { @@ -224,7 +229,7 @@ export default class EditServiceForm extends Component {
{/* */} - +
{(recipe.hasTeamId || recipe.hasCustomUrl) && ( diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js index d07c3649c..f25d966f4 100644 --- a/src/components/ui/ImageUpload.js +++ b/src/components/ui/ImageUpload.js @@ -12,82 +12,64 @@ export default class ImageUpload extends Component { field: PropTypes.instanceOf(Field).isRequired, className: PropTypes.string, multiple: PropTypes.bool, - // disabled: PropTypes.bool, - // onClick: PropTypes.func, - // type: PropTypes.string, - // buttonType: PropTypes.string, - // loaded: PropTypes.bool, - // htmlForm: PropTypes.string, }; static defaultProps = { className: null, multiple: false, - // disabled: false, - // onClick: () => {}, - // type: 'button', - // buttonType: '', - // loaded: true, - // htmlForm: '', }; - dropzoneRef = null; - state = { path: null, } onDrop(acceptedFiles) { - // const req = request.post('/upload'); acceptedFiles.forEach((file) => { - console.log(file); this.setState({ path: file.path, }); - // req.attach(file.name, file); + this.props.field.onDrop(file); }); - // req.end(callback); } + dropzoneRef = null; + render() { const { field, className, multiple, - // disabled, - // onClick, - // type, - // buttonType, - // loaded, - // htmlForm, } = this.props; const cssClasses = classnames({ 'franz-form__button': true, - // [`franz-form__button--${buttonType}`]: buttonType, [`${className}`]: className, }); return (
{field.label} - {this.state.path ? ( + {(field.value && field.value !== 'delete') || this.state.path ? (
this.submit(e)} id="form"> -
-
- -
-
- {/* */} - -
+
+
{(recipe.hasTeamId || recipe.hasCustomUrl) && ( )} -
-
-

{intl.formatMessage(messages.headlineNotifications)}

- - -

- {intl.formatMessage(messages.isMutedInfo)} -

-
+
+
+
+

{intl.formatMessage(messages.headlineNotifications)}

+ + +

+ {intl.formatMessage(messages.isMutedInfo)} +

+
-
-

{intl.formatMessage(messages.headlineBadges)}

- - {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( -
- -

- {intl.formatMessage(messages.indirectMessageInfo)} -

-
- )} -
+
+

{intl.formatMessage(messages.headlineBadges)}

+ + {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && ( +
+ +

+ {intl.formatMessage(messages.indirectMessageInfo)} +

+
+ )} +
-
-

{intl.formatMessage(messages.headlineGeneral)}

- +
+

{intl.formatMessage(messages.headlineGeneral)}

+ +
+
+
+
{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 { field: PropTypes.instanceOf(Field).isRequired, className: PropTypes.string, multiple: PropTypes.bool, + textDelete: PropTypes.string.isRequired, + textUpload: PropTypes.string.isRequired, }; static defaultProps = { @@ -39,56 +41,63 @@ export default class ImageUpload extends Component { field, className, multiple, + textDelete, + textUpload, } = this.props; const cssClasses = classnames({ - 'franz-form__button': true, + 'image-upload__dropzone': true, [`${className}`]: className, }); return ( -
- {field.label} - {(field.value && field.value !== 'delete') || this.state.path ? ( -
-
-
- -
+
+ +
+ {(field.value && field.value !== 'delete') || this.state.path ? ( +
+
+
+ +
+
-
- ) : ( - { this.dropzoneRef = node; }} - onDrop={this.onDrop.bind(this)} - className={cssClasses} - multiple={multiple} - accept="image/jpeg, image/png" - > -

Try dropping some files here, or click to select files to upload.

- - )} + ) : ( + { this.dropzoneRef = node; }} + onDrop={this.onDrop.bind(this)} + className={cssClasses} + multiple={multiple} + accept="image/jpeg, image/png" + > + +

+ {textUpload} +

+ + )} +
); } diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js index 8d3a268ad..c26195a1e 100644 --- a/src/containers/settings/EditServiceScreen.js +++ b/src/containers/settings/EditServiceScreen.js @@ -48,7 +48,7 @@ const messages = defineMessages({ }, icon: { id: 'settings.service.form.icon', - defaultMessage: '!!!Icon', + defaultMessage: '!!!Custom icon', }, }); @@ -108,7 +108,7 @@ export default class EditServiceScreen extends Component { }, customIcon: { label: intl.formatMessage(messages.icon), - value: service.hasCustomIcon ? service.icon : false, + value: service.hasCustomUploadedIcon ? service.icon : false, default: null, type: 'file', }, diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index bfb95da04..f3db20aea 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -127,7 +127,9 @@ "settings.service.form.headlineNotifications": "Notifications", "settings.service.form.headlineBadges": "Unread message badges", "settings.service.form.headlineGeneral": "General", - "settings.service.form.icon": "Icon", + "settings.service.form.icon": "Custom icon", + "settings.service.form.iconDelete": "Delete", + "settings.service.form.iconUpload": "Drop your image, or click here", "settings.service.error.headline": "Error", "settings.service.error.goBack": "Back to services", "settings.service.error.message": "Could not load service recipe.", diff --git a/src/models/Service.js b/src/models/Service.js index 652d2594c..423510c7d 100644 --- a/src/models/Service.js +++ b/src/models/Service.js @@ -25,6 +25,7 @@ export default class Service { @observable isBadgeEnabled = true; @observable isIndirectMessageBadgeEnabled = true; @observable iconUrl = ''; + @observable hasCustomUploadedIcon = false; @observable hasCrashed = false; constructor(data, recipe) { @@ -62,6 +63,8 @@ export default class Service { this.isMuted = data.isMuted !== undefined ? data.isMuted : this.isMuted; + this.hasCustomUploadedIcon = data.hasCustomIcon !== undefined ? data.hasCustomIcon : this.hasCustomUploadedIcon; + this.recipe = recipe; autorun(() => { diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js index 4fb5c9767..f2a8683ba 100644 --- a/src/stores/ServicesStore.js +++ b/src/stores/ServicesStore.js @@ -177,13 +177,21 @@ export default class ServicesStore extends Store { await request._promise; newData.iconUrl = request.result.data.iconUrl; + newData.hasCustomUploadedIcon = true; } this.allServicesRequest.patch((result) => { if (!result) return; + // patch custom icon deletion if (data.customIcon === 'delete') { data.iconUrl = ''; + data.hasCustomUploadedIcon = false; + } + + // patch custom icon url + if (data.customIconUrl) { + data.iconUrl = data.customIconUrl; } Object.assign(result.find(c => c.id === serviceId), newData); @@ -328,7 +336,7 @@ export default class ServicesStore extends Store { } } else if (channel === 'avatar') { const url = args[0]; - if (service.customIconUrl !== url) { + if (service.iconUrl !== url && !service.hasCustomUploadedIcon) { service.customIconUrl = url; this.actions.service.updateService({ diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 764bb3158..06176a7af 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss @@ -1,9 +1,12 @@ .image-upload { position: absolute; - width: 100px; - height: 100px; - border-radius: $theme-border-radius; + width: 140px; + height: 140px; + border: 1px solid $theme-gray-lighter; + border-radius: $theme-border-radius-small; + background: $theme-gray-lightest; overflow: hidden; + margin-top: 5px; &__preview, &__action { @@ -19,7 +22,7 @@ background-size: 100%; background-repeat: no-repeat; background-position: center center; - margin: 5px; + border-radius: 3px; } &__action { @@ -27,6 +30,8 @@ z-index: 10; opacity: 0; transition: opacity 0.5s; + display: flex; + justify-content: center; &-background { position: absolute; @@ -41,6 +46,33 @@ button { position: relative; z-index: 100; + color: #FFF; + + .mdi { + color: #FFF; + } + } + } + + &__dropzone { + text-align: center; + border-radius: 5px; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + &__dropzone, + button { + .mdi { + margin-bottom: 5px; + } + + p { + font-size: 10px; + line-height: 10px; } } @@ -49,4 +81,11 @@ opacity: 1; } } +} + +.image-upload-wrapper { + .mdi { + font-size: 40px; + color: $theme-gray-light; + } } \ No newline at end of file diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 283913ab7..cb39717ea 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss @@ -121,9 +121,15 @@ } .service-icon { - width: 30%; - min-width: 100px; + width: 140px; + float: right; + margin-top: 30px; margin-left: 40px; + + label { + font-weight: bold; + letter-spacing: -0.1px; + } } } @@ -167,6 +173,7 @@ &__options { margin-top: 20px; + flex: 1; } &__settings-group { -- cgit v1.2.3-70-g09d2