Add button to save without cropping

This commit is contained in:
jasper 2019-03-18 18:19:42 -07:00
parent 96f9eab700
commit 3108722eda
4 changed files with 32 additions and 2 deletions

View File

@ -31,6 +31,9 @@ const ImageCropper = {
saveButtonLabel: { saveButtonLabel: {
type: String type: String
}, },
saveWithoutCroppingButtonlabel: {
type: String
},
cancelButtonLabel: { cancelButtonLabel: {
type: String type: String
} }
@ -48,6 +51,9 @@ const ImageCropper = {
saveText () { saveText () {
return this.saveButtonLabel || this.$t('image_cropper.save') return this.saveButtonLabel || this.$t('image_cropper.save')
}, },
saveWithoutCroppingText () {
return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping')
},
cancelText () { cancelText () {
return this.cancelButtonLabel || this.$t('image_cropper.cancel') return this.cancelButtonLabel || this.$t('image_cropper.cancel')
}, },
@ -76,6 +82,18 @@ const ImageCropper = {
this.submitting = false 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 () { pickImage () {
this.$refs.input.click() this.$refs.input.click()
}, },

View File

@ -7,6 +7,7 @@
<div class="image-cropper-buttons-wrapper"> <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="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="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> <i class="icon-spin4 animate-spin" v-if="submitting"></i>
</div> </div>
<div class="alert error" v-if="submitError"> <div class="alert error" v-if="submitError">
@ -36,7 +37,11 @@
} }
&-buttons-wrapper { &-buttons-wrapper {
margin-top: 15px; margin-top: 10px;
button {
margin-top: 5px;
}
} }
} }
</style> </style>

View File

@ -158,7 +158,13 @@ const UserSettings = {
reader.readAsDataURL(file) reader.readAsDataURL(file)
}, },
submitAvatar (cropper, 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) => { return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])

View File

@ -25,6 +25,7 @@
"image_cropper": { "image_cropper": {
"crop_picture": "Crop picture", "crop_picture": "Crop picture",
"save": "Save", "save": "Save",
"save_without_cropping": "Save without cropping",
"cancel": "Cancel" "cancel": "Cancel"
}, },
"login": { "login": {