Localization of ImageCropper component

2 files changed, 12 insertions, 6 deletions

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index e4bf5ea2..86bd2d67 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -26,12 +26,10 @@ const ImageCropper = {
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
     },
     title: {
-      type: String,
-      default: 'Crop picture'
+      type: String
     },
     saveButtonLabel: {
-      type: String,
-      default: 'Save'
+      type: String
     }
   },
   data () {
@@ -44,6 +42,14 @@ const ImageCropper = {
   components: {
     Modal
   },
+  computed: {
+    modalTitle () {
+      return this.title || this.$t('image_cropper.crop_picture')
+    },
+    modalSaveButtonLabel () {
+      return this.saveButtonLabel || this.$t('image_cropper.save')
+    }
+  },
   methods: {
     destroy () {
       this.cropper.destroy()
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 1c52842c..b2367128 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="image-cropper">
-    <modal :show="dataUrl" :title="title" @close="destroy">
+    <modal :show="dataUrl" :title="modalTitle" @close="destroy">
       <div class="modal-body">
         <div class="image-cropper-image-container">
           <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
         </div>
       </div>
       <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>
     </modal>
     <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">