1
0
Fork 0
forked from srxl/akkoma-fe

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: {
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()
},

View file

@ -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>

View file

@ -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])

View file

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