akkoma-fe/src/components/user_avatar/user_avatar.vue

95 lines
2.0 KiB
Vue
Raw Normal View History

<template>
2022-03-21 18:59:25 +00:00
<span
class="Avatar"
2022-03-21 18:59:25 +00:00
:class="{ '-compact': compact }"
2022-03-29 12:35:18 +00:00
>
2022-03-21 18:59:25 +00:00
<StillImage
v-if="user"
class="avatar"
:alt="user.screen_name_ui"
:title="user.screen_name_ui"
:src="imgSrc(user.profile_image_url_original)"
:image-load-error="imageLoadError"
:class="{ '-compact': compact, '-better-shadow': betterShadow }"
/>
<div
v-else
class="avatar -placeholder"
:class="{ '-compact': compact }"
/>
2022-03-14 07:35:29 +00:00
<FAIcon
v-if="bot"
icon="robot"
class="bot-indicator"
/>
2022-03-21 18:59:25 +00:00
</span>
</template>
<script src="./user_avatar.js"></script>
2019-02-02 19:33:13 +00:00
<style lang="scss">
@import '../../_variables.scss';
.Avatar {
--_avatarShadowBox: var(--avatarStatusShadow);
--_avatarShadowFilter: var(--avatarStatusShadowFilter);
--_avatarShadowInset: var(--avatarStatusShadowInset);
2020-10-29 19:39:36 +00:00
--_still-image-label-visibility: hidden;
2022-03-21 18:59:25 +00:00
display: inline-block;
position: relative;
2019-02-02 19:33:13 +00:00
width: 48px;
height: 48px;
2022-03-21 18:59:25 +00:00
&.-compact {
width: 32px;
height: 32px;
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
.avatar {
width: 100%;
height: 100%;
2022-03-21 18:59:25 +00:00
box-shadow: var(--_avatarShadowBox);
border-radius: $fallback--avatarRadius;
border-radius: var(--avatarRadius, $fallback--avatarRadius);
2019-02-02 19:33:13 +00:00
2022-03-21 18:59:25 +00:00
&.-better-shadow {
box-shadow: var(--_avatarShadowInset);
filter: var(--_avatarShadowFilter);
}
2022-03-21 18:59:25 +00:00
&.-animated::before {
display: none;
}
&.-compact {
border-radius: $fallback--avatarAltRadius;
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
}
2019-02-02 19:33:13 +00:00
2022-03-21 18:59:25 +00:00
&.-placeholder {
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
}
2019-02-02 19:33:13 +00:00
}
2022-03-21 18:59:25 +00:00
img {
width: 100%;
height: 100%;
2019-02-02 19:33:13 +00:00
}
2022-03-21 18:59:25 +00:00
.bot-indicator {
position: absolute;
bottom: 0;
right: 0;
margin: -0.2em;
padding: 0.2em;
background: rgba(127, 127, 127, 0.5);
color: #fff;
border-radius: var(--tooltipRadius);
}
2022-03-21 18:59:25 +00:00
2019-02-02 19:33:13 +00:00
}
</style>