From 3108722eda845cd3a8172b95e554b0dc8c8e444d Mon Sep 17 00:00:00 2001 From: jasper Date: Mon, 18 Mar 2019 18:19:42 -0700 Subject: [PATCH] Add button to save without cropping --- src/components/image_cropper/image_cropper.js | 18 ++++++++++++++++++ src/components/image_cropper/image_cropper.vue | 7 ++++++- src/components/user_settings/user_settings.js | 8 +++++++- src/i18n/en.json | 1 + 4 files changed, 32 insertions(+), 2 deletions(-) diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 49d51846..5ba8f04e 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -31,6 +31,9 @@ const ImageCropper = { saveButtonLabel: { type: String }, + saveWithoutCroppingButtonlabel: { + type: String + }, cancelButtonLabel: { type: String } @@ -48,6 +51,9 @@ const ImageCropper = { saveText () { return this.saveButtonLabel || this.$t('image_cropper.save') }, + saveWithoutCroppingText () { + return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping') + }, cancelText () { return this.cancelButtonLabel || this.$t('image_cropper.cancel') }, @@ -76,6 +82,18 @@ const ImageCropper = { this.submitting = false }) }, + submitWithoutCropping () { + this.submitting = true + this.avatarUploadError = null + this.submitHandler(false, this.dataUrl) + .then(() => this.destroy()) + .catch((err) => { + this.submitError = err + }) + .finally(() => { + this.submitting = false + }) + }, pickImage () { this.$refs.input.click() }, diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 24a6f3bd..129e6f46 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -7,6 +7,7 @@
+
@@ -36,7 +37,11 @@ } &-buttons-wrapper { - margin-top: 15px; + margin-top: 10px; + + button { + margin-top: 5px; + } } } diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index c0ab759c..72e7bb53 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -158,7 +158,13 @@ const UserSettings = { reader.readAsDataURL(file) }, submitAvatar (cropper, file) { - const img = cropper.getCroppedCanvas().toDataURL(file.type) + let img + if (cropper) { + img = cropper.getCroppedCanvas().toDataURL(file.type) + } else { + img = file + } + return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => { if (!user.error) { this.$store.commit('addNewUsers', [user]) diff --git a/src/i18n/en.json b/src/i18n/en.json index 01fe2fba..6db9ef05 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -25,6 +25,7 @@ "image_cropper": { "crop_picture": "Crop picture", "save": "Save", + "save_without_cropping": "Save without cropping", "cancel": "Cancel" }, "login": {