From 3108722eda845cd3a8172b95e554b0dc8c8e444d Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
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 @@
<div class="image-cropper-buttons-wrapper">
<button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button>
<button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button>
+ <button class="btn" type="button" :disabled="submitting" @click="submitWithoutCropping" v-text="saveWithoutCroppingText"></button>
<i class="icon-spin4 animate-spin" v-if="submitting"></i>
</div>
<div class="alert error" v-if="submitError">
@@ -36,7 +37,11 @@
}
&-buttons-wrapper {
- margin-top: 15px;
+ margin-top: 10px;
+
+ button {
+ margin-top: 5px;
+ }
}
}
</style>
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": {