zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

ui: move hover card

zio/stable
Anthony Fu 2022-11-27 12:30:21 +08:00
parent bcc968fbd8
commit 4d3d05ae5c
3 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
components/account/AccountInlineInfo.vue
View File

@ -8,12 +8,14 @@ const { link = true } = defineProps<{
</script> </script>
<template> <template>
<NuxtLink <AccountHoverWrapper :account="account">
:to="link ? getAccountPath(account) : undefined" <NuxtLink
:class="link ? 'text-link-rounded' : ''" :to="link ? getAccountPath(account) : undefined"
min-w-0 flex gap-1 items-center :class="link ? 'text-link-rounded' : ''"
> min-w-0 flex gap-1 items-center
<AccountAvatar :account="account" w-5 h-5 /> >
<ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <AccountAvatar :account="account" w-5 h-5 />
</NuxtLink> <ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink>
</AccountHoverWrapper>
</template> </template>

18
components/status/StatusAccountDetails.vue
View File

@ -8,14 +8,12 @@ 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 text-link-rounded
text-link-rounded >
> <ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<ContentRich font-bold break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <AccountHandle :account="account" />
<AccountHandle :account="account" /> </NuxtLink>
</NuxtLink>
</AccountHoverWrapper>
</template> </template>

12
components/status/StatusCard.vue
View File

@ -48,13 +48,17 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div> </div>
<div flex gap-4> <div flex gap-4>
<div> <div>
<NuxtLink :to="getAccountPath(status.account)" rounded-full> <AccountHoverWrapper :account="status.account">
<AccountAvatar w-12 h-12 :account="status.account" /> <NuxtLink :to="getAccountPath(status.account)" rounded-full>
</NuxtLink> <AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink>
</AccountHoverWrapper>
</div> </div>
<div flex="~ col 1" min-w-0> <div flex="~ col 1" min-w-0>
<div flex> <div flex>
<StatusAccountDetails :account="status.account" /> <AccountHoverWrapper :account="status.account">
<StatusAccountDetails :account="status.account" />
</AccountHoverWrapper>
<div flex-auto /> <div flex-auto />
<div text-sm text-secondary flex="~ row nowrap" hover:underline> <div text-sm text-secondary flex="~ row nowrap" hover:underline>
<CommonTooltip :content="createdAt"> <CommonTooltip :content="createdAt">