forked from cybrespace/pinafore
96 lines
1.8 KiB
HTML
96 lines
1.8 KiB
HTML
{#if error}
|
|
<svg class={computedClass} aria-hidden="true">
|
|
<use xlink:href="#fa-user" />
|
|
</svg>
|
|
{:elseif $autoplayGifs}
|
|
<img
|
|
class={computedClass}
|
|
aria-hidden="true"
|
|
alt=""
|
|
src={account.avatar}
|
|
on:imgLoad="set({loaded: true})"
|
|
on:imgLoadError="set({error: true})" />
|
|
{:else}
|
|
<NonAutoplayImg
|
|
className={computedClass}
|
|
ariaHidden="true"
|
|
alt=""
|
|
src={account.avatar}
|
|
staticSrc={account.avatar_static}
|
|
{isLink}
|
|
on:imgLoad="set({loaded: true})"
|
|
on:imgLoadError="set({error: true})"
|
|
/>
|
|
{/if}
|
|
<style>
|
|
:global(.avatar) {
|
|
border-radius: 4px;
|
|
background: var(--loading-bg);
|
|
}
|
|
|
|
:global(.avatar.loaded) {
|
|
background: none;
|
|
}
|
|
|
|
:global(.avatar.size-extra-small) {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
:global(.avatar.size-small) {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
:global(.avatar.size-medium) {
|
|
width: 64px;
|
|
height: 64px;
|
|
}
|
|
|
|
:global(.avatar.size-big) {
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:global(.avatar.size-big) {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
|
|
svg.avatar {
|
|
fill: var(--deemphasized-text-color);
|
|
}
|
|
</style>
|
|
<script>
|
|
import { imgLoad, imgLoadError } from '../_utils/events'
|
|
import { store } from '../_store/store'
|
|
import NonAutoplayImg from './NonAutoplayImg.html'
|
|
import { classname } from '../_utils/classname'
|
|
|
|
export default {
|
|
events: {
|
|
imgLoad,
|
|
imgLoadError
|
|
},
|
|
data: () => ({
|
|
className: void 0,
|
|
loaded: false,
|
|
error: void 0,
|
|
isLink: false
|
|
}),
|
|
store: () => store,
|
|
computed: {
|
|
computedClass: ({ className, loaded, size }) => (classname(
|
|
'avatar',
|
|
className,
|
|
loaded && 'loaded',
|
|
`size-${size}`
|
|
))
|
|
},
|
|
components: {
|
|
NonAutoplayImg
|
|
}
|
|
}
|
|
</script> |