therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add avatar crop popup

Browse source
This commit is contained in:
taehoon 2019-02-07 03:05:59 -05:00
parent 4f95371081
commit 13725f040b
11 changed files with 306 additions and 1118 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/user_settings/user_settings.vue
View file

@ -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>