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

fix: include media within content warning

Browse source
This commit is contained in:
Daniel Roe 2022-11-25 12:57:02 +00:00
parent a5b9f25777
commit 019a36c9bb
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
4 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/status/StatusBody.vue
View file

@ -5,21 +5,11 @@ const { status } = defineProps<{
status: Status status: Status
}>() }>()
const { translation } = useTranslation(status) const { translation } = useTranslation(status)
const [showContent, toggleContent] = $(useToggle(!status.sensitive))
</script> </script>
<template> <template>
<div class="status-body" whitespace-pre-wrap break-words> <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 <ContentRichSetup
v-if="showContent"
:content="translation.visible ? translation.text : status.content" :content="translation.visible ? translation.text : status.content"
:emojis="status.emojis" :emojis="status.emojis"
/> />

15
components/status/StatusCard.vue
View file

@ -90,11 +90,16 @@ const timeago = useTimeAgo(() => status.createdAt, {
</div> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div> <div>
<StatusBody :status="status" /> <StatusSpoiler :enabled="status.sensitive">
<StatusMedia <template #spoiler>
v-if="status.mediaAttachments?.length" {{ status.spoilerText }}
:status="status" </template>
/> <StatusBody :status="status" />
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
</StatusSpoiler>
<StatusCard <StatusCard
v-if="status.reblog" v-if="status.reblog"
:status="status.reblog" border="~ rounded" :status="status.reblog" border="~ rounded"

15
components/status/StatusDetails.vue
View file

@ -18,11 +18,16 @@ const date = useFormattedDateTime(status.createdAt)
<div flex flex-col gap-2 py3 px-4> <div flex flex-col gap-2 py3 px-4>
<AccountInfo :account="status.account" /> <AccountInfo :account="status.account" />
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
<StatusBody :status="status" text-2xl /> <StatusSpoiler :enabled="status.sensitive">
<StatusMedia <template #spoiler>
v-if="status.mediaAttachments?.length" {{ status.spoilerText }}
:status="status" </template>
/> <StatusBody :status="status" text-2xl />
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
</StatusSpoiler>
<div> <div>
<span op50 text-sm> <span op50 text-sm>
{{ date }} · {{ status.application?.name || 'Unknown client' }} {{ date }} · {{ status.application?.name || 'Unknown client' }}

16
components/status/StatusSpoiler.vue Normal file
View file

@ -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>