ui: improve account hover
parent
33268b1f70
commit
3cd8fb54dd
|
@ -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" />
|
||||
<AccountAvatarImage :account="account" v-bind="$attrs" />
|
||||
</template>
|
||||
|
|
|
@ -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>
|
|
@ -8,11 +8,13 @@ const { account, link = true } = defineProps<{
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLink
|
||||
:to="link ? getAccountPath(account) : undefined"
|
||||
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
|
||||
>
|
||||
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
|
||||
<AccountHandle :account="account" />
|
||||
</NuxtLink>
|
||||
<AccountHoverWrapper :account="account">
|
||||
<NuxtLink
|
||||
:to="link ? getAccountPath(account) : undefined"
|
||||
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
|
||||
>
|
||||
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
|
||||
<AccountHandle :account="account" />
|
||||
</NuxtLink>
|
||||
</AccountHoverWrapper>
|
||||
</template>
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Reference in New Issue