ui: improve account hover

This commit is contained in:
Anthony Fu 2022-11-27 10:13:18 +08:00
parent 33268b1f70
commit 3cd8fb54dd
4 changed files with 31 additions and 25 deletions

View file

@ -3,7 +3,6 @@ import type { Account } from 'masto'
defineProps<{
account: Account
hover?: boolean
}>()
defineOptions({
@ -12,20 +11,5 @@ defineOptions({
</script>
<template>
<div v-if="hover" relative flex-shrink-0>
<div group>
<AccountHoverCard
:account="account"
absolute top-0 left-0 z-10
op0 pointer-events-none mt--100vh
font-normal delay-300 duration-400 transition transform invisible
group-hover="visible pointer-events-auto op100 mt-0"
translate="x-[calc(-1rem-1px)] y-[calc(-1rem-1px)]"
class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]"
style="transform-origin: calc(1rem + 1px) calc(0.75rem + 1px);"
/>
<AccountAvatarImage :account="account" v-bind="$attrs" />
</div>
</div>
<AccountAvatarImage v-else :account="account" v-bind="$attrs" />
</template>

View file

@ -0,0 +1,16 @@
<script setup lang="ts">
import type { Account } from 'masto'
defineProps<{
account: Account
}>()
</script>
<template>
<VMenu placement="bottom-start">
<slot />
<template #popper>
<AccountHoverCard :account="account" />
</template>
</VMenu>
</template>

View file

@ -8,6 +8,7 @@ const { account, link = true } = defineProps<{
</script>
<template>
<AccountHoverWrapper :account="account">
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
@ -15,4 +16,5 @@ const { account, link = true } = defineProps<{
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" />
</NuxtLink>
</AccountHoverWrapper>
</template>

View file

@ -47,7 +47,11 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div>
</div>
<div flex gap-4>
<AccountAvatar w-12 h-12 :account="status.account" hover />
<div>
<NuxtLink :to="getAccountPath(status.account)">
<AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink>
</div>
<div flex="~ col 1" min-w-0>
<div flex>
<StatusAccountDetails :account="status.account" />