From ff9e55ae4248504345b5ee7935b084defc4cad1c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Mon, 4 Mar 2019 21:22:32 -0500
Subject: Generate cropped avatar image in the original file type

---
 src/components/image_cropper/image_cropper.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 990c0370..49d51846 100644
--- a/src/components/image_cropper/image_cropper.js
+++ b/src/components/image_cropper/image_cropper.js
@@ -67,7 +67,7 @@ const ImageCropper = {
     submit () {
       this.submitting = true
       this.avatarUploadError = null
-      this.submitHandler(this.cropper, this.filename)
+      this.submitHandler(this.cropper, this.file)
         .then(() => this.destroy())
         .catch((err) => {
           this.submitError = err
@@ -88,14 +88,14 @@ const ImageCropper = {
     readFile () {
       const fileInput = this.$refs.input
       if (fileInput.files != null && fileInput.files[0] != null) {
+        this.file = fileInput.files[0]
         let reader = new window.FileReader()
         reader.onload = (e) => {
           this.dataUrl = e.target.result
           this.$emit('open')
         }
-        reader.readAsDataURL(fileInput.files[0])
-        this.filename = fileInput.files[0].name || 'unknown'
-        this.$emit('changed', fileInput.files[0], reader)
+        reader.readAsDataURL(this.file)
+        this.$emit('changed', this.file, reader)
       }
     },
     clearError () {
-- 
cgit v1.2.3-70-g09d2


From 3108722eda845cd3a8172b95e554b0dc8c8e444d Mon Sep 17 00:00:00 2001
From: jasper <jasper92341@hotmail.com>
Date: Mon, 18 Mar 2019 18:19:42 -0700
Subject: Add button to save without cropping

---
 src/components/image_cropper/image_cropper.js  | 18 ++++++++++++++++++
 src/components/image_cropper/image_cropper.vue |  7 ++++++-
 src/components/user_settings/user_settings.js  |  8 +++++++-
 src/i18n/en.json                               |  1 +
 4 files changed, 32 insertions(+), 2 deletions(-)

(limited to 'src/components/image_cropper/image_cropper.js')

diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js
index 49d51846..5ba8f04e 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')
     },
@@ -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()
     },
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 24a6f3bd..129e6f46 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -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>
diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index c0ab759c..72e7bb53 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -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])
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 01fe2fba..6db9ef05 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -25,6 +25,7 @@
   "image_cropper": {
     "crop_picture": "Crop picture",
     "save": "Save",
+    "save_without_cropping": "Save without cropping",
     "cancel": "Cancel"
   },
   "login": {
-- 
cgit v1.2.3-70-g09d2