Add avatar crop popup

1 files changed, 42 insertions, 10 deletions

diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index d2381da2..9fcd3752 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -47,20 +47,20 @@
           <div class="setting-item">
             <h2>{{$t('settings.avatar')}}</h2>
             <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p>
-            <p>{{$t('settings.current_avatar')}}</p>
-            <img :src="user.profile_image_url_original" class="old-avatar"></img>
-            <p>{{$t('settings.set_new_avatar')}}</p>
-            <img class="new-avatar" v-bind:src="avatarPreview" v-if="avatarPreview">
-            </img>
-            <div>
-              <input type="file" @change="uploadFile('avatar', $event)" ></input>
+            <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>
-            <i class="icon-spin4 animate-spin" v-if="avatarUploading"></i>
-            <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
-            <div class='alert error' v-if="avatarUploadError">
+            <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" />
           </div>
           <div class="setting-item">
             <h2>{{$t('settings.profile_banner')}}</h2>
@@ -167,6 +167,8 @@
 </script>
 
 <style lang="scss">
+@import '../../_variables.scss';
+
 .profile-edit {
   .bio {
     margin: 0;
@@ -193,5 +195,35 @@
   .bg {
     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 {
+    display: block;
+    width: 150px;
+    height: 150px;
+    border-radius: $fallback--avatarRadius;
+    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+  }
 }
 </style>