Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 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>
<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" />
<div text-sm flex flex-row text-secondary mt-4>
<NuxtLink :to="`/${getFullHandle(account)}/`">

2
components/account/AccountHoverWrapper.vue
View file

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

2
components/account/AccountInfo.vue
View file

@ -12,7 +12,7 @@ const { account } = defineProps<{
<div flex gap-3>
<AccountAvatar :account="account" w-12 h-12 />
<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 />
</div>
</div>

8
components/account/AccountInlineInfo.vue
View file

@ -8,8 +8,12 @@ const { link = true } = defineProps<{
</script>
<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 />
<ContentRich hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<ContentRich :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink>
</template>

3
components/status/StatusAccountDetails.vue
View file

@ -12,8 +12,9 @@ const { account, link = true } = defineProps<{
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
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" />
</NuxtLink>
</AccountHoverWrapper>

2
components/status/StatusCard.vue
View file

@ -48,7 +48,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
</div>
<div flex gap-4>
<div>
<NuxtLink :to="getAccountPath(status.account)">
<NuxtLink :to="getAccountPath(status.account)" rounded-full>
<AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink>
</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" />
<AccountInlineInfo v-if="account" :account="account" :link="false" />
<span v-else>Someone</span>
's post
</NuxtLink>
</template>

5
unocss.config.ts
View file

@ -19,7 +19,7 @@ export default defineConfig({
'bg-active': 'bg-$c-bg-active',
'bg-code': 'bg-$c-bg-code',
// text
// text colors
'text-base': 'text-$c-text-base',
'text-secondary': 'text-$c-text-secondary',
'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-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
'flex-center': 'items-center justify-center',
'flex-v-center': 'items-center',