feat(status): show visibility icon when non-public

closes #920
zio/stable
三咲智子 2023-01-10 15:14:22 +08:00
parent c75a9092c7
commit 8fb9739f69
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
3 changed files with 28 additions and 14 deletions

View File

@ -164,15 +164,18 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
<div flex-auto /> <div flex-auto />
<div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline> <div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline>
<AccountBotIndicator v-if="status.account.bot" me-2 /> <AccountBotIndicator v-if="status.account.bot" me-2 />
<div flex> <div flex="~ gap1" items-center>
<CommonTooltip :content="createdAt"> <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
<NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)"> <div flex>
<time text-sm ws-nowrap hover:underline :datetime="status.createdAt"> <CommonTooltip :content="createdAt">
{{ timeago }} <NuxtLink :title="status.createdAt" :href="statusRoute.href" @click.prevent="go($event)">
</time> <time text-sm ws-nowrap hover:underline :datetime="status.createdAt">
</NuxtLink> {{ timeago }}
</CommonTooltip> </time>
<StatusEditIndicator :status="status" inline /> </NuxtLink>
</CommonTooltip>
<StatusEditIndicator :status="status" inline />
</div>
</div> </div>
</div> </div>
<StatusActionsMore v-if="actions !== false" :status="status" me--2 /> <StatusActionsMore v-if="actions !== false" :status="status" me--2 />

View File

@ -17,8 +17,6 @@ const status = $computed(() => {
const createdAt = useFormattedDateTime(status.createdAt) const createdAt = useFormattedDateTime(status.createdAt)
const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
const { t } = useI18n() const { t } = useI18n()
useHeadFixed({ useHeadFixed({
@ -48,9 +46,7 @@ const isDM = $computed(() => status.visibility === 'direct')
</StatusEditIndicator> </StatusEditIndicator>
</div> </div>
<div>&middot;</div> <div>&middot;</div>
<CommonTooltip :content="$t(`visibility.${visibility.value}`)" placement="bottom"> <StatusVisibilityIndicator :status="status" />
<div :class="visibility.icon" />
</CommonTooltip>
<div v-if="status.application?.name"> <div v-if="status.application?.name">
&middot; &middot;
</div> </div>

View File

@ -0,0 +1,15 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { status } = defineProps<{
status: mastodon.v1.Status
}>()
const visibility = $computed(() => statusVisibilities.find(v => v.value === status.visibility)!)
</script>
<template>
<CommonTooltip :content="$t(`visibility.${visibility.value}`)" placement="bottom">
<div :class="visibility.icon" />
</CommonTooltip>
</template>