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

feat: improve account links feedback

Browse source
This commit is contained in:
Anthony Fu 2022-11-27 11:54:46 +08:00
parent 47ad3fe8bf
commit 2fb5412a08
8 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountHoverCard.vue
View file

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <template>
<div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card"> <div rounded w-80 z-900 overflow-hidden p-4>
<AccountInfo :account="account" /> <AccountInfo :account="account" />
<div text-sm flex flex-row text-secondary mt-4> <div text-sm flex flex-row text-secondary mt-4>
<NuxtLink :to="`/${getFullHandle(account)}/`"> <NuxtLink :to="`/${getFullHandle(account)}/`">

2
components/account/AccountHoverWrapper.vue
View file

@ -7,7 +7,7 @@ defineProps<{
</script> </script>
<template> <template>
<VMenu placement="bottom-start"> <VMenu placement="bottom-start" :delay="{ show: 500, hide: 100 }">
<slot /> <slot />
<template #popper> <template #popper>
<AccountHoverCard :account="account" /> <AccountHoverCard :account="account" />

2
components/account/AccountInfo.vue
View file

@ -12,7 +12,7 @@ const { account } = defineProps<{
<div flex gap-3> <div flex gap-3>
<AccountAvatar :account="account" w-12 h-12 /> <AccountAvatar :account="account" w-12 h-12 />
<div flex="~ col"> <div flex="~ col">
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" /> <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm /> <AccountHandle :account="account" text-sm />
</div> </div>
</div> </div>

8
components/account/AccountInlineInfo.vue
View file

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

3
components/status/StatusAccountDetails.vue
View file

@ -12,8 +12,9 @@ const { account, link = true } = defineProps<{
<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
> >
<ContentRich font-bold break-words hover:underline :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> </AccountHoverWrapper>

2
components/status/StatusCard.vue
View file

@ -48,7 +48,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div> </div>
<div flex gap-4> <div flex gap-4>
<div> <div>
<NuxtLink :to="getAccountPath(status.account)"> <NuxtLink :to="getAccountPath(status.account)" rounded-full>
<AccountAvatar w-12 h-12 :account="status.account" /> <AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink> </NuxtLink>
</div> </div>

1
components/status/StatusReplyingTo.vue
View file

@ -18,6 +18,5 @@ const account = asyncComputed(() => fetchAccount(status.inReplyToAccountId!))
<div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" /> <div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" />
<AccountInlineInfo v-if="account" :account="account" :link="false" /> <AccountInlineInfo v-if="account" :account="account" :link="false" />
<span v-else>Someone</span> <span v-else>Someone</span>
's post
</NuxtLink> </NuxtLink>
</template> </template>

5
unocss.config.ts
View file

@ -19,7 +19,7 @@ export default defineConfig({
'bg-active': 'bg-$c-bg-active', 'bg-active': 'bg-$c-bg-active',
'bg-code': 'bg-$c-bg-code', 'bg-code': 'bg-$c-bg-code',
// text // text colors
'text-base': 'text-$c-text-base', 'text-base': 'text-$c-text-base',
'text-secondary': 'text-$c-text-secondary', 'text-secondary': 'text-$c-text-secondary',
'text-secondary-light': 'text-$c-text-secondary-light', 'text-secondary-light': 'text-$c-text-secondary-light',
@ -31,6 +31,9 @@ export default defineConfig({
'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active', 'btn-text': 'btn-base px-4 py-2 text-$c-primary hover:text-$c-primary-active',
'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center', 'btn-action-icon': 'btn-base hover:bg-active rounded-full h9 w9 flex items-center justify-center',
// link
'text-link-rounded': 'focus:outline-none focus:ring-(2 primary inset) hover:bg-active rounded md:rounded-full px2 mx--2',
// utils // utils
'flex-center': 'items-center justify-center', 'flex-center': 'items-center justify-center',
'flex-v-center': 'items-center', 'flex-v-center': 'items-center',