feat: preview card for status links (#339)

This commit is contained in:
Ayo Ayco 2022-12-07 16:55:45 +01:00 committed by GitHub
parent 8e47deb0e1
commit 10167b54d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 1 deletions

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Filter, FilterAction, FilterContext, Status } from 'masto' import type { FilterContext, Status } from 'masto'
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -108,6 +108,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
:status="status" :status="status"
minimized minimized
/> />
<StatusPreviewCard v-if="status.card" :card="status.card" />
</StatusSpoiler> </StatusSpoiler>
<StatusCard <StatusCard
v-if="status.reblog" v-if="status.reblog"
@ -115,6 +116,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
:actions="false" :actions="false"
/> />
</div> </div>
<StatusLink v-if="status.card" :card="status.card" />
<StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" /> <StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" />
</div> </div>
</div> </div>

View file

@ -42,6 +42,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
/> />
</StatusSpoiler> </StatusSpoiler>
</div> </div>
<StatusPreviewCard v-if="status.card" :card="status.card" />
<div flex="~ gap-1" items-center text-secondary text-sm> <div flex="~ gap-1" items-center text-secondary text-sm>
<div flex> <div flex>
<div>{{ createdAt }}</div> <div>{{ createdAt }}</div>

View file

@ -0,0 +1,47 @@
<script setup lang="ts">
import type { Card } from 'masto'
const prop = defineProps<{
card: Card
}>()
const alt = $computed(() => `${prop.card.title} - ${prop.card.title}`)
// TODO: handle card.type: 'photo' | 'video' | 'rich';
</script>
<template>
<div
v-if="card"
border="~ base"
display-block
rounded-lg
>
<NuxtLink display-block :to="card.url">
<CommonBlurhash
v-if="card.image"
:blurhash="card.blurhash"
:src="card.image"
:width="card.width"
:height="card.height"
:alt="alt"
display-block
rounded-lg
rounded-b-none
object-cover
w-full
/>
<div p4 max-h-2xl>
<p v-if="card.providerName" text-secondary line-clamp-1 text-ellipsis>
{{ card.providerName }}
</p>
<strong v-if="card.title" line-clamp-1 text-ellipsis>{{ card.title }}</strong>
<p v-if="card.description" text-secondary line-clamp-2 text-ellipsis>
{{ card.description }}
</p>
<p v-else text-secondary line-clamp-2 text-ellipsis>
{{ card.url }}
</p>
</div>
</NuxtLink>
</div>
</template>