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<{ defineProps<{
account: Account account: Account
hover?: boolean
}>() }>()
defineOptions({ defineOptions({
@ -12,20 +11,5 @@ defineOptions({
</script> </script>
<template> <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" /> <AccountAvatarImage :account="account" v-bind="$attrs" />
</div>
</div>
<AccountAvatarImage v-else :account="account" v-bind="$attrs" />
</template> </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> </script>
<template> <template>
<AccountHoverWrapper :account="account">
<NuxtLink <NuxtLink
:to="link ? getAccountPath(account) : undefined" :to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center 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" /> <ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" /> <AccountHandle :account="account" />
</NuxtLink> </NuxtLink>
</AccountHoverWrapper>
</template> </template>

View file

@ -47,7 +47,11 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div> </div>
</div> </div>
<div flex gap-4> <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="~ col 1" min-w-0>
<div flex> <div flex>
<StatusAccountDetails :account="status.account" /> <StatusAccountDetails :account="status.account" />