feat: clickable notification account (#184)

This commit is contained in:
Shinigami 2022-11-27 20:40:16 +01:00 committed by GitHub
parent 5ac225fd11
commit fa35d73d56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 4 deletions

View file

@ -10,7 +10,7 @@ cacheAccount(account)
<template> <template>
<div flex justify-between hover:bg-active transition-100> <div flex justify-between hover:bg-active transition-100>
<AccountInfo :account="account" hover p1 /> <AccountInfo :account="account" hover p1 as="router-link" :to="getAccountPath(account)" />
<div h-full p1> <div h-full p1>
<AccountFollowButton :account="account" /> <AccountFollowButton :account="account" />
</div> </div>

View file

@ -1,19 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Account } from 'masto' import type { Account } from 'masto'
const { account } = defineProps<{ const { account, as = 'div' } = defineProps<{
account: Account account: Account
as?: string
}>() }>()
defineOptions({
inheritAttrs: false,
})
</script> </script>
<!-- TODO: Make this work for both buttons and links --> <!-- TODO: Make this work for both buttons and links -->
<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items --> <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
<template> <template>
<div flex gap-3> <component :is="as" flex gap-3 v-bind="$attrs">
<AccountAvatar :account="account" w-12 h-12 /> <AccountAvatar :account="account" w-12 h-12 />
<div flex="~ col"> <div flex="~ col">
<ContentRich font-bold :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> </component>
</template> </template>