diff options
Diffstat (limited to 'src/components/image_cropper')
| -rw-r--r-- | src/components/image_cropper/image_cropper.js | 10 | ||||
| -rw-r--r-- | src/components/image_cropper/image_cropper.vue | 60 |
2 files changed, 59 insertions, 11 deletions
diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 49d51846..01361e25 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') }, @@ -64,10 +70,10 @@ const ImageCropper = { this.dataUrl = undefined this.$emit('close') }, - submit () { + submit (cropping = true) { this.submitting = true this.avatarUploadError = null - this.submitHandler(this.cropper, this.file) + this.submitHandler(cropping && this.cropper, this.file) .then(() => this.destroy()) .catch((err) => { this.submitError = err diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 24a6f3bd..4e1b5927 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -2,19 +2,57 @@ <div class="image-cropper"> <div v-if="dataUrl"> <div class="image-cropper-image-container"> - <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" /> + <img + ref="img" + :src="dataUrl" + alt="" + @load.stop="createCropper" + > </div> <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> - <i class="icon-spin4 animate-spin" v-if="submitting"></i> + <button + class="btn" + type="button" + :disabled="submitting" + @click="submit()" + v-text="saveText" + /> + <button + class="btn" + type="button" + :disabled="submitting" + @click="destroy" + v-text="cancelText" + /> + <button + class="btn" + type="button" + :disabled="submitting" + @click="submit(false)" + v-text="saveWithoutCroppingText" + /> + <i + v-if="submitting" + class="icon-spin4 animate-spin" + /> </div> - <div class="alert error" v-if="submitError"> - {{submitErrorMsg}} - <i class="button-icon icon-cancel" @click="clearError"></i> + <div + v-if="submitError" + class="alert error" + > + {{ submitErrorMsg }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> </div> </div> - <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes"> + <input + ref="input" + type="file" + class="image-cropper-img-input" + :accept="mimes" + > </div> </template> @@ -36,7 +74,11 @@ } &-buttons-wrapper { - margin-top: 15px; + margin-top: 10px; + + button { + margin-top: 5px; + } } } </style> |
