ui: improve account hover
This commit is contained in:
parent
33268b1f70
commit
3cd8fb54dd
|
@ -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>
|
||||||
|
|
16
components/account/AccountHoverWrapper.vue
Normal file
16
components/account/AccountHoverWrapper.vue
Normal 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>
|
|
@ -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>
|
||||||
|
|
|
@ -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" />
|
||||||
|
|
Loading…
Reference in a new issue