feat: threads improvements (#562)

This commit is contained in:
patak 2022-12-26 08:37:42 +01:00 committed by GitHub
parent baa2696d31
commit d9e8703882
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 78 deletions

View file

@ -9,6 +9,7 @@ const props = withDefaults(
hover?: boolean
faded?: boolean
showReplyTo?: boolean
connectReply?: boolean
}>(),
{ actions: true, showReplyTo: true },
)
@ -60,6 +61,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
const isDM = $computed(() => status.visibility === 'direct')
const isSelf = $computed(() => status.account.id === currentUser.value?.account.id)
</script>
<template>
@ -84,6 +86,9 @@ const isDM = $computed(() => status.visibility === 'direct')
<div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
<AccountAvatar :account="rebloggedBy" />
</div>
<div v-if="connectReply" w-full h-full flex justify-center>
<div h-full class="w-2.5px" bg-border />
</div>
</div>
<div flex="~ col 1" min-w-0>
<div flex items-center space-x-1>
@ -104,39 +109,10 @@ const isDM = $computed(() => status.visibility === 'direct')
</div>
<StatusActionsMore :status="status" mr--2 />
</div>
<div
space-y-3
:class="{
'mt2 pt1 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': isDM,
}"
>
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
<template v-if="status.spoilerText || filterPhrase" #spoiler>
<p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
</template>
<StatusBody :status="status" />
<StatusPoll
v-if="status.poll"
:poll="status.poll"
/>
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:small-picture-only="status.mediaAttachments?.length > 0"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
<div v-if="isDM" />
</StatusSpoiler>
<StatusContent :status="status" :context="context" mb2 :class="{ mt2: isDM }" />
<div>
<StatusActions v-if="(actions !== false && !isZenMode)" :status="status" />
</div>
<StatusActions v-if="(actions !== false && !isZenMode)" :status="status" :class="isDM ? 'mt1' : 'mt2'" />
</div>
</div>
</div>

View file

@ -0,0 +1,58 @@
<script setup lang="ts">
import type { FilterContext, Status } from 'masto'
const { status, context } = defineProps<{
status: Status
context?: FilterContext | 'details'
}>()
const isDM = $computed(() => status.visibility === 'direct')
const isSelf = $computed(() => status.account.id === currentUser.value?.account.id)
const isDetails = $computed(() => context === 'details')
// Content Filter logic
const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
const filter = $computed(() => filterResult?.filter)
// a bit of a hack due to Filter being different in v1 and v2
// clean up when masto.js supports explicit versions: https://github.com/neet/masto.js/issues/722
const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
const isFiltered = $computed(() => filterPhrase && (context && context !== 'details' ? filter?.context.includes(context) : false))
</script>
<template>
<div
space-y-3
:class="{
'pt2 pb0.5 px3.5 br2 border-1 rounded-3 rounded-tl-none': isDM,
'bg-fade border-primary-light': isDM && !isSelf,
'bg-code border-base': isDM && isSelf,
}"
>
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
<template v-if="status.spoilerText || filterPhrase" #spoiler>
<p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
</template>
<StatusBody :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
<StatusPoll
v-if="status.poll"
:poll="status.poll"
/>
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:small-picture-only="status.mediaAttachments?.length > 0"
/>
<StatusCard
v-if="status.reblog"
:status="status.reblog" border="~ rounded"
:actions="false"
/>
<div v-if="isDM" />
</StatusSpoiler>
</div>
</template>

View file

@ -1,10 +1,13 @@
<script setup lang="ts">
import type { Status } from 'masto'
const props = defineProps<{
const props = withDefaults(defineProps<{
status: Status
command?: boolean
}>()
actions?: boolean
}>(), {
actions: true,
})
const status = $computed(() => {
if (props.status.reblog && props.status.reblog)
@ -33,37 +36,7 @@ const isDM = $computed(() => status.visibility === 'direct')
<AccountInfo :account="status.account" />
</AccountHoverWrapper>
</NuxtLink>
<div
space-y-3
:class="{
'pt2 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3': isDM,
}"
>
<StatusSpoiler :enabled="status.sensitive">
<template #spoiler>
<p text-2xl>
{{ status.spoilerText }}
</p>
</template>
<StatusBody :status="status" :with-action="false" text-xl />
<StatusPoll
v-if="status.poll"
:poll="status.poll"
/>
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
full-size
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
:small-picture-only="status.mediaAttachments?.length > 0"
mt-2
/>
<div v-if="isDM" />
</StatusSpoiler>
</div>
<StatusContent :status="status" context="details" />
<div flex="~ gap-1" items-center text-secondary text-sm>
<div flex>
<div>{{ createdAt }}</div>
@ -85,6 +58,8 @@ const isDM = $computed(() => status.visibility === 'direct')
{{ status.application?.name }}
</div>
</div>
<StatusActions :status="status" details :command="command" border="t base" pt-2 />
<div border="t base" pt-2>
<StatusActions v-if="actions" :status="status" details :command="command" />
</div>
</div>
</template>

View file

@ -59,35 +59,38 @@ onReactivated(() => {
<MainContent back>
<template v-if="!pending">
<div v-if="status" min-h-100vh mt--1px>
<template v-if="context">
<template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" context="account" border="t base" :show-reply-to="false" />
</template>
<StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account"
:show-reply-to="false" :connect-reply="true"
/>
</template>
<StatusDetails
ref="main"
:status="status"
command
border="t base"
style="scroll-margin-top: 60px"
:actions="status.visibility !== 'direct'"
/>
<PublishWidget
v-if="currentUser"
ref="publishWidget"
:draft-key="replyDraft!.key"
:initial="replyDraft!.draft"
border="t base"
@published="refreshContext()"
/>
<template v-if="context">
<template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" context="account" border="t base" />
</template>
<template v-for="comment, di of context?.descendants" :key="comment.id">
<StatusCard
:status="comment" :actions="comment.visibility !== 'direct'" context="account"
:connect-reply="comment.id === context?.descendants[di + 1]?.inReplyToId"
:show-reply-to="di !== 0 && comment.inReplyToId !== context?.descendants[di - 1]?.id"
:class="{ 'border-t border-base': di !== 0 && comment.inReplyToId !== context?.descendants[di - 1]?.id }"
/>
</template>
<div border="t base" :style="{ height: `${bottomSpace}px` }" />
<div :style="{ height: `${bottomSpace}px` }" />
</div>
<StatusNotFound v-else :account="$route.params.account" :status="id" />

View file

@ -1,7 +1,7 @@
:root {
--c-primary: #EA9E44;
--c-primary-active: #C16929;
--c-primary-light: #EA9E4466;
--c-primary-light: #EA9E441A;
--c-border: #eee;
--c-bg-base: #fff;

View file

@ -19,6 +19,7 @@ export default defineConfig({
// background
'bg-base': 'bg-$c-bg-base',
'bg-border': 'bg-$c-border',
'bg-active': 'bg-$c-bg-active',
'bg-code': 'bg-$c-bg-code',
'bg-fade': 'bg-$c-bg-fade',