diff options
Diffstat (limited to 'src/components/user_settings/user_settings.vue')
| -rw-r--r-- | src/components/user_settings/user_settings.vue | 52 |
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> |