diff options
Diffstat (limited to 'src/client/components/global')
| -rw-r--r-- | src/client/components/global/avatar.vue | 21 |
1 files changed, 20 insertions, 1 deletions
diff --git a/src/client/components/global/avatar.vue b/src/client/components/global/avatar.vue index 83675a155c..64fb2116b6 100644 --- a/src/client/components/global/avatar.vue +++ b/src/client/components/global/avatar.vue @@ -1,9 +1,11 @@ <template> <span class="eiwwqkts _noSelect" :class="{ cat }" :title="acct(user)" v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" @click="onClick"> <img class="inner" :src="url" decoding="async"/> + <MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/> </span> <MkA class="eiwwqkts _noSelect" :class="{ cat }" :to="userPage(user)" :title="acct(user)" :target="target" v-else v-user-preview="disablePreview ? undefined : user.id"> <img class="inner" :src="url" decoding="async"/> + <MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/> </MkA> </template> @@ -12,8 +14,12 @@ import { defineComponent } from 'vue'; import { getStaticImageUrl } from '@client/scripts/get-static-image-url'; import { extractAvgColorFromBlurhash } from '@client/scripts/extract-avg-color-from-blurhash'; import { acct, userPage } from '@client/filters/user'; +import MkUserOnlineIndicator from '@client/components/user-online-indicator.vue'; export default defineComponent({ + components: { + MkUserOnlineIndicator + }, props: { user: { type: Object, @@ -30,6 +36,10 @@ export default defineComponent({ disablePreview: { required: false, default: false + }, + showIndicator: { + required: false, + default: false } }, emits: ['click'], @@ -93,7 +103,7 @@ export default defineComponent({ } } - .inner { + > .inner { position: absolute; bottom: 0; left: 0; @@ -106,5 +116,14 @@ export default defineComponent({ width: 100%; height: 100%; } + + > .indicator { + position: absolute; + z-index: 1; + bottom: 0; + left: 0; + width: 20%; + height: 20%; + } } </style> |