Localization of ImageCropper component

This commit is contained in:
taehoon 2019-02-08 11:42:02 -05:00
parent 205e38ffa9
commit 228e6681e3
3 changed files with 16 additions and 6 deletions

View file

@ -26,12 +26,10 @@ const ImageCropper = {
default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
}, },
title: { title: {
type: String, type: String
default: 'Crop picture'
}, },
saveButtonLabel: { saveButtonLabel: {
type: String, type: String
default: 'Save'
} }
}, },
data () { data () {
@ -44,6 +42,14 @@ const ImageCropper = {
components: { components: {
Modal Modal
}, },
computed: {
modalTitle () {
return this.title || this.$t('image_cropper.crop_picture')
},
modalSaveButtonLabel () {
return this.saveButtonLabel || this.$t('image_cropper.save')
}
},
methods: { methods: {
destroy () { destroy () {
this.cropper.destroy() this.cropper.destroy()

View file

@ -1,13 +1,13 @@
<template> <template>
<div class="image-cropper"> <div class="image-cropper">
<modal :show="dataUrl" :title="title" @close="destroy"> <modal :show="dataUrl" :title="modalTitle" @close="destroy">
<div class="modal-body"> <div class="modal-body">
<div class="image-cropper-image-container"> <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>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button> <button class="btn image-cropper-btn" type="button" @click="submit" v-text="modalSaveButtonLabel"></button>
</div> </div>
</modal> </modal>
<input ref="input" type="file" class="image-cropper-img-input" :accept="mimes"> <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">

View file

@ -21,6 +21,10 @@
"more": "More", "more": "More",
"generic_error": "An error occured" "generic_error": "An error occured"
}, },
"image_cropper": {
"crop_picture": "Crop picture",
"save": "Save"
},
"login": { "login": {
"login": "Log in", "login": "Log in",
"description": "Log in with OAuth", "description": "Log in with OAuth",