2019-02-02 20:11:36 +01:00
|
|
|
<template>
|
2022-03-21 19:59:25 +01:00
|
|
|
<span
|
2020-08-18 22:57:42 +02:00
|
|
|
class="Avatar"
|
2022-03-21 19:59:25 +01:00
|
|
|
:class="{ '-compact': compact }"
|
2022-03-29 14:35:18 +02:00
|
|
|
>
|
2022-03-21 19:59:25 +01: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 08:35:29 +01:00
|
|
|
<FAIcon
|
|
|
|
v-if="bot"
|
|
|
|
icon="robot"
|
|
|
|
class="bot-indicator"
|
|
|
|
/>
|
2022-03-21 19:59:25 +01:00
|
|
|
</span>
|
2019-02-02 20:11:36 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./user_avatar.js"></script>
|
2019-02-02 20:33:13 +01:00
|
|
|
<style lang="scss">
|
2023-01-09 19:02:16 +01:00
|
|
|
@import "../../variables";
|
2019-02-02 20:33:13 +01:00
|
|
|
|
2020-08-18 22:57:42 +02:00
|
|
|
.Avatar {
|
2024-02-12 18:58:42 +01:00
|
|
|
--_avatarShadowBox: var(--shadow);
|
|
|
|
--_avatarShadowFilter: var(--shadowFilter);
|
|
|
|
--_avatarShadowInset: var(--shadowInset);
|
2020-10-29 20:39:36 +01:00
|
|
|
--_still-image-label-visibility: hidden;
|
2020-08-18 22:57:42 +02:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
display: inline-block;
|
|
|
|
position: relative;
|
2019-02-02 20:33:13 +01:00
|
|
|
width: 48px;
|
|
|
|
height: 48px;
|
2019-02-02 21:33:02 +01:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
&.-compact {
|
|
|
|
width: 32px;
|
|
|
|
height: 32px;
|
2024-02-13 01:09:43 +01:00
|
|
|
border-radius: var(--roundness);
|
2022-03-21 19:59:25 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
.avatar {
|
2019-02-02 21:33:02 +01:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2022-03-21 19:59:25 +01:00
|
|
|
box-shadow: var(--_avatarShadowBox);
|
2024-02-13 01:09:43 +01:00
|
|
|
border-radius: var(--roundness);
|
2019-02-02 20:33:13 +01:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
&.-better-shadow {
|
|
|
|
box-shadow: var(--_avatarShadowInset);
|
|
|
|
filter: var(--_avatarShadowFilter);
|
|
|
|
}
|
2022-02-28 22:35:00 +01:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
&.-animated::before {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.-compact {
|
2024-02-13 01:09:43 +01:00
|
|
|
border-radius: var(--roundness);
|
2022-03-21 19:59:25 +01:00
|
|
|
}
|
2019-02-02 20:33:13 +01:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
&.-placeholder {
|
2024-02-13 01:09:43 +01:00
|
|
|
background-color: var(--background);
|
2022-03-21 19:59:25 +01:00
|
|
|
}
|
2019-02-02 20:33:13 +01:00
|
|
|
}
|
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2019-02-02 20:33:13 +01:00
|
|
|
}
|
2020-09-06 14:28:09 +02:00
|
|
|
|
2022-03-21 19:59:25 +01:00
|
|
|
.bot-indicator {
|
|
|
|
position: absolute;
|
|
|
|
bottom: 0;
|
|
|
|
right: 0;
|
|
|
|
margin: -0.2em;
|
|
|
|
padding: 0.2em;
|
2023-01-09 19:02:16 +01:00
|
|
|
background: rgb(127 127 127 / 50%);
|
2022-03-21 19:59:25 +01:00
|
|
|
color: #fff;
|
2024-02-13 01:09:43 +01:00
|
|
|
border-radius: var(--roundness);
|
2020-09-06 14:28:09 +02:00
|
|
|
}
|
2019-02-02 20:33:13 +01:00
|
|
|
}
|
|
|
|
</style>
|