teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

ui: improve hover card motion

Browse source
This commit is contained in:
Anthony Fu 2022-11-25 21:58:49 +08:00
parent fd410010ca
commit b8ce2fc62b
4 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
components/account/AccountAvatar.vue
View file

@ -14,10 +14,18 @@ defineOptions({
<template> <template>
<div v-if="hover" relative flex-shrink-0> <div v-if="hover" relative flex-shrink-0>
<div group> <div group>
<AccountHoverCard top="-3.2" left="-4.4" absolute :account="account" op0 pointer-events-none group-hover="pointer-events-auto op100 scale-100" font-normal delay-250 transition transform scale-20 class="ease-[cubic-bezier(0.4, 0.0, 0.2, 1)]" /> <AccountHoverCard
:account="account"
absolute top-0 left-0 z-10
op0 pointer-events-none rotate--2
font-normal delay-300 duration-300 transition transform
group-hover="pointer-events-auto op100 rotate-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>
</div> </div>
<AccountAvatarImage v-else :account="account" v-bind="$attrs" /> <AccountAvatarImage v-else :account="account" v-bind="$attrs" />
</template> </template>

6
components/account/AccountHoverCard.vue
View file

@ -25,9 +25,3 @@ defineProps<{
<ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" /> <ContentRichSetup text-4 text-gray :content="account.note" :emojis="account.emojis" />
</div> </div>
</template> </template>
<style>
.account-hover-card {
transform-origin: 3em 3em;
}
</style>

2
components/account/AccountInlineInfo.vue
View file

@ -9,7 +9,7 @@ const { link = true } = defineProps<{
<template> <template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center> <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 hover /> <AccountAvatar :account="account" w-5 h-5 />
<ContentRichSetup hover:underline :content="getDisplayName(account)" :emojis="account.emojis" /> <ContentRichSetup hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink> </NuxtLink>
</template> </template>

2
components/status/StatusCard.vue
View file

@ -77,7 +77,7 @@ const timeago = useTimeAgo(() => status.createdAt, {
</div> </div>
</div> </div>
<div flex gap-4> <div flex gap-4>
<AccountAvatar mt1 w-12 h-12 :account="status.account" hover /> <AccountAvatar w-12 h-12 :account="status.account" hover />
<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" />