From b24db12e1cc318e862169355a22f051d3ea2e809 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 8 Feb 2019 21:59:33 -0500
Subject: Make embedded image cropper

---
 src/components/user_settings/user_settings.js  |  9 ++----
 src/components/user_settings/user_settings.vue | 43 ++++----------------------
 2 files changed, 9 insertions(+), 43 deletions(-)

(limited to 'src/components/user_settings')

diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js
index 8987c691..2d521c14 100644
--- a/src/components/user_settings/user_settings.js
+++ b/src/components/user_settings/user_settings.js
@@ -21,13 +21,12 @@ const UserSettings = {
       followImportError: false,
       followsImported: false,
       enableFollowsExport: true,
-      avatarUploading: false,
+      pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
       followListUploading: false,
       bannerPreview: null,
       backgroundPreview: null,
-      avatarUploadError: null,
       bannerUploadError: null,
       backgroundUploadError: null,
       deletingAccount: false,
@@ -120,15 +119,13 @@ const UserSettings = {
     },
     submitAvatar (cropper) {
       const img = cropper.getCroppedCanvas({ minWidth: 150, minHeight: 150 }).toDataURL('image/jpeg')
-      this.avatarUploading = true
-      this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
+      return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => {
         if (!user.error) {
           this.$store.commit('addNewUsers', [user])
           this.$store.commit('setCurrentUser', user)
         } else {
-          this.avatarUploadError = this.$t('upload.error.base') + user.error
+          throw this.$t('upload.error.base') + user.error
         }
-        this.avatarUploading = false
       })
     },
     clearUploadError (slot) {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 9fcd3752..8ab92e95 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -47,20 +47,11 @@
           <div class="setting-item">
             <h2>{{$t('settings.avatar')}}</h2>
             <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
-            <div class="avatar-upload-wrapper">
-              <div class="avatar-upload">
-                <img :src="user.profile_image_url_original" class="avatar" />
-                <div class="avatar-upload-loading-wrapper" v-if="avatarUploading">
-                  <i class="icon-spin4 animate-spin"></i>
-                </div>
-              </div>
-            </div>
-            <button class="btn" type="button" id="pick-avatar" :disabled="avatarUploading">{{$t('settings.set_new_avatar')}}</button>
-            <div class="alert error" v-if="avatarUploadError">
-              Error: {{ avatarUploadError }}
-              <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
-            </div>
-            <image-cropper trigger="#pick-avatar" :title="$t('settings.crop_your_new_avatar')" :saveButtonLabel="$t('settings.set_new_avatar')" @submit="submitAvatar" />
+            <p>{{$t('settings.current_avatar')}}</p>
+            <img :src="user.profile_image_url_original" class="current-avatar"></img>
+            <p>{{$t('settings.set_new_avatar')}}</p>
+            <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button>
+            <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" />
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
@@ -196,29 +187,7 @@
     max-width: 100%;
   }
 
-  .avatar-upload {
-    display: inline-block;
-    position: relative;
-  }
-
-  .avatar-upload-loading-wrapper {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0,0,0,.3);
-
-    i {
-      font-size: 50px;
-      color: #FFF;
-    }
-  }
-
-  .avatar {
+  .current-avatar {
     display: block;
     width: 150px;
     height: 150px;
-- 
cgit v1.2.3-70-g09d2