feat: publish and show sensitive content

This commit is contained in:
三咲智子 2022-11-25 20:10:45 +08:00
parent f54e135848
commit 43479aaa66
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
2 changed files with 35 additions and 1 deletions

View file

@ -63,6 +63,10 @@ async function pickAttachments() {
await uploadAttachments(files)
}
async function toggleSensitive() {
draft.params.sensitive = !draft.params.sensitive
}
async function uploadAttachments(files: File[]) {
isUploading = true
for (const file of files) {
@ -137,6 +141,16 @@ onUnmounted(() => {
border="2 dashed transparent" p-1
:class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
>
<div v-if="draft.params.sensitive">
<input
v-model="draft.params.spoilerText"
type="text"
placeholder="Write your warning here"
p2 border-rounded w-full bg-transparent
outline-none border="~ base"
>
</div>
<textarea
v-model="draft.params.status"
:placeholder="placeholder"
@ -174,6 +188,13 @@ onUnmounted(() => {
<div flex-auto />
<CommonTooltip placement="bottom" content="Add content warning">
<button btn-action-icon @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line />
</button>
</CommonTooltip>
<CommonDropdown>
<button btn-action-icon w-12>
<div :class="currentVisibility.icon" />

View file

@ -5,10 +5,23 @@ 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>
<ContentRichSetup :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
<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"
/>
</div>
</template>