ui: redesign spoiler

This commit is contained in:
Anthony Fu 2022-11-30 10:07:13 +08:00
parent afed995138
commit ba93e6d235
5 changed files with 30 additions and 9 deletions

View file

@ -49,8 +49,9 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<div v-if="rebloggedBy" pl8> <div v-if="rebloggedBy" pl8>
<div flex="~ wrap" gap-1 items-center text-secondary text-sm> <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
<div i-ri:repeat-fill mr-1 /> <div i-ri:repeat-fill mr-1 />
<AccountInlineInfo font-bold :account="rebloggedBy" /> <i18n-t keypath="status.reblogged">
reblogged <AccountInlineInfo font-bold :account="rebloggedBy" />
</i18n-t>
</div> </div>
</div> </div>
<div flex gap-4> <div flex gap-4>
@ -82,7 +83,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<div> <div>
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>
{{ status.spoilerText }} <p>{{ status.spoilerText }}</p>
</template> </template>
<StatusBody :status="status" /> <StatusBody :status="status" />
<StatusPoll v-if="status.poll" :poll="status.poll" /> <StatusPoll v-if="status.poll" :poll="status.poll" />

View file

@ -27,7 +27,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>
{{ status.spoilerText }} <p text-2xl>
{{ status.spoilerText }}
</p>
</template> </template>
<StatusBody :status="status" :with-action="false" text-2xl /> <StatusBody :status="status" :with-action="false" text-2xl />
<StatusPoll v-if="status.poll" :poll="status.poll" /> <StatusPoll v-if="status.poll" :poll="status.poll" />

View file

@ -10,11 +10,19 @@ watchEffect(() => {
</script> </script>
<template> <template>
<div v-if="enabled" flex flex-col items-start gap-2> <div v-if="enabled" flex flex-col items-start>
<slot name="spoiler" /> <div class="content-rich">
<button btn-outline px-2 py-1 text-3 @click="toggleContent()"> <slot name="spoiler" />
{{ showContent ? 'Show less' : 'Show more' }} </div>
</button> <div flex="~ gap-1 center" w-full>
<div border="t base" w-5 h-1px />
<button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
<div v-if="showContent" i-ri:eye-line />
<div v-else i-ri:eye-close-line />
{{ showContent ? $t('status.spoiler_show_less') : $t('status.spoiler_show_more') }}
</button>
<div border="t base" flex-auto h-1px />
</div>
</div> </div>
<slot v-if="!enabled || showContent" /> <slot v-if="!enabled || showContent" />
</template> </template>

View file

@ -104,6 +104,11 @@
"loading": "Loading...", "loading": "Loading...",
"uploading": "Uploading..." "uploading": "Uploading..."
}, },
"status": {
"spoiler_show_less": "Show less",
"spoiler_show_more": "Show more",
"reblogged": "{0} reblogged"
},
"tab": { "tab": {
"media": "Media", "media": "Media",
"notifications_all": "All", "notifications_all": "All",

View file

@ -104,6 +104,11 @@
"loading": "加载中...", "loading": "加载中...",
"uploading": "上传中..." "uploading": "上传中..."
}, },
"status": {
"reblogged": "{0} 转发了",
"spoiler_show_less": "隐藏",
"spoiler_show_more": "显示更多"
},
"tab": { "tab": {
"media": "媒体", "media": "媒体",
"notifications_all": "全部", "notifications_all": "全部",