ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new default user avatar

This commit is contained in:
Ramon Wenger 2020-02-17 16:16:33 +01:00
parent bdd3705bff
commit 2f00a98838
1 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
client/src/components/profile/Avatar.vue
View File

@ -1,28 +1,43 @@
<template> <template>
<div class="avatar"> <div class="avatar">
<transition name="fade"> <transition name="fade">
<user-icon v-show="!isAvatarLoaded" class="avatar__placeholder" :class="{'avatar__placeholder--highlighted': iconHighlighted}"></user-icon> <default-avatar v-show="!isAvatarLoaded" class="avatar__placeholder"
:class="{'avatar__placeholder--highlighted': iconHighlighted}"></default-avatar>
</transition> </transition>
<transition name="show"> <transition name="show">
<div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage" :style="{'background-image': `url(${this.avatarUrl})`}"></div> <div v-show="isAvatarLoaded" class="avatar__image" ref="avatarImage"
:style="{'background-image': `url(${this.avatarUrl})`}"></div>
</transition> </transition>
<img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/> <img class="avatar__fake-image" :src="avatarUrl" ref="fakeImage"/>
<a class="avatar__edit" v-if="editable"><pen-icon></pen-icon></a>
</div> </div>
</template> </template>
<script> <script>
import UserIcon from '@/components/icons/UserIcon'; import DefaultAvatar from '@/components/icons/DefaultAvatar';
import PenIcon from '@/components/icons/PenIcon';
export default { export default {
props: ['avatarUrl', 'iconHighlighted'], props: {
components: {UserIcon}, avatarUrl: {
data () { type: String
},
iconHighlighted: {},
editable: {
default: false
}
},
components: {
DefaultAvatar,
PenIcon
},
data() {
return { return {
isAvatarLoaded: false isAvatarLoaded: false
} }
}, },
mounted () { mounted() {
if (this.avatarUrl !== '') { if (this.avatarUrl !== '') {
this.$refs.fakeImage.addEventListener('load', () => { this.$refs.fakeImage.addEventListener('load', () => {
if (this.$refs.fakeImage) { if (this.$refs.fakeImage) {
@ -30,7 +45,7 @@
this.isAvatarLoaded = true; this.isAvatarLoaded = true;
} }
}); });
}; }
} }
} }
</script> </script>
@ -45,11 +60,11 @@
width: $max-width; width: $max-width;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
border-radius: 50%;
&__placeholder { &__placeholder {
height: $max-width; height: $max-width;
fill: $color-silver-dark; fill: $color-silver-dark;
border-radius: 50%;
&--highlighted { &--highlighted {
fill: $color-brand; fill: $color-brand;
@ -57,14 +72,14 @@
} }
&__image { &__image {
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
border: 0;
border-radius: 50%;
background-size: cover; &--landscape {
background-position: center center;
height: 100%;
width: 100%;
border: 0;
&--landscape {
width: auto; width: auto;
height: $max-width; height: $max-width;
} }
@ -75,10 +90,25 @@
height: 0; height: 0;
} }
.fade-leave-active, .show-enter-active { &__edit {
position: absolute;
box-sizing: border-box;
width: 34px;
height: 34px;
display: block;
left: 50%;
bottom: -7px;
transform: translateX(50%);
background-color: $color-white;
border-radius: 50%;
padding: 6px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.fade-leave-active, .show-enter-active {
transition: opacity .5s; transition: opacity .5s;
} }
.fade-leave-to, .show-enter { .fade-leave-to, .show-enter {
opacity: 0; opacity: 0;
} }