Support avatar placeholder Closes #275 See merge request pleroma/pleroma-fe!511tae-hoon/pleroma-fe-323-improve-image-lightbox
commit
d6ee6e8394
@ -0,0 +1,29 @@
|
|||||||
|
import StillImage from '../still-image/still-image.vue'
|
||||||
|
|
||||||
|
const UserAvatar = {
|
||||||
|
props: [
|
||||||
|
'src',
|
||||||
|
'betterShadow',
|
||||||
|
'compact'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
showPlaceholder: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
StillImage
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
imgSrc () {
|
||||||
|
return this.showPlaceholder ? '/images/avi.png' : this.src
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
imageLoadError () {
|
||||||
|
this.showPlaceholder = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserAvatar
|
@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<StillImage class="avatar" :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" :src="imgSrc" :imageLoadError="imageLoadError"/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./user_avatar.js"></script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import '../../_variables.scss';
|
||||||
|
|
||||||
|
.avatar.still-image {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
box-shadow: var(--avatarStatusShadow);
|
||||||
|
border-radius: $fallback--avatarRadius;
|
||||||
|
border-radius: var(--avatarRadius, $fallback--avatarRadius);
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.better-shadow {
|
||||||
|
box-shadow: var(--avatarStatusShadowInset);
|
||||||
|
filter: var(--avatarStatusShadowFilter)
|
||||||
|
}
|
||||||
|
|
||||||
|
&.animated::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.avatar-compact {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: $fallback--avatarAltRadius;
|
||||||
|
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue