fix: include media within content warning
parent
a5b9f25777
commit
019a36c9bb
|
@ -5,21 +5,11 @@ const { status } = defineProps<{
|
|||
status: Status
|
||||
}>()
|
||||
const { translation } = useTranslation(status)
|
||||
|
||||
const [showContent, toggleContent] = $(useToggle(!status.sensitive))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="status-body" whitespace-pre-wrap break-words>
|
||||
<template v-if="status.sensitive">
|
||||
{{ status.spoilerText }}
|
||||
<button btn-outline px-2 py-1 text-3 @click="toggleContent()">
|
||||
{{ showContent ? 'Show less' : 'Show more' }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<ContentRichSetup
|
||||
v-if="showContent"
|
||||
:content="translation.visible ? translation.text : status.content"
|
||||
:emojis="status.emojis"
|
||||
/>
|
||||
|
|
|
@ -90,11 +90,16 @@ const timeago = useTimeAgo(() => status.createdAt, {
|
|||
</div>
|
||||
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
|
||||
<div>
|
||||
<StatusBody :status="status" />
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
/>
|
||||
<StatusSpoiler :enabled="status.sensitive">
|
||||
<template #spoiler>
|
||||
{{ status.spoilerText }}
|
||||
</template>
|
||||
<StatusBody :status="status" />
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
/>
|
||||
</StatusSpoiler>
|
||||
<StatusCard
|
||||
v-if="status.reblog"
|
||||
:status="status.reblog" border="~ rounded"
|
||||
|
|
|
@ -18,11 +18,16 @@ const date = useFormattedDateTime(status.createdAt)
|
|||
<div flex flex-col gap-2 py3 px-4>
|
||||
<AccountInfo :account="status.account" />
|
||||
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
|
||||
<StatusBody :status="status" text-2xl />
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
/>
|
||||
<StatusSpoiler :enabled="status.sensitive">
|
||||
<template #spoiler>
|
||||
{{ status.spoilerText }}
|
||||
</template>
|
||||
<StatusBody :status="status" text-2xl />
|
||||
<StatusMedia
|
||||
v-if="status.mediaAttachments?.length"
|
||||
:status="status"
|
||||
/>
|
||||
</StatusSpoiler>
|
||||
<div>
|
||||
<span op50 text-sm>
|
||||
{{ date }} · {{ status.application?.name || 'Unknown client' }}
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps<{ enabled: boolean }>()
|
||||
defineSlots<'spoiler'>()
|
||||
|
||||
const [showContent, toggleContent] = $(useToggle(!props.enabled))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="enabled" flex flex-col items-start gap-2>
|
||||
<slot name="spoiler" />
|
||||
<button btn-outline px-2 py-1 text-3 @click="toggleContent()">
|
||||
{{ showContent ? 'Show less' : 'Show more' }}
|
||||
</button>
|
||||
</div>
|
||||
<slot v-if="showContent" />
|
||||
</template>
|
Loading…
Reference in New Issue