feat: improve conversations (#358)
This commit is contained in:
parent
28c4c6a3e8
commit
36a35b5fcc
|
@ -1,17 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import type { Conversation } from 'masto'
|
||||
|
||||
const props = defineProps<{
|
||||
const { conversation } = defineProps<{
|
||||
conversation: Conversation
|
||||
}>()
|
||||
|
||||
const withAccounts = $computed(() =>
|
||||
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article flex flex-col gap-2>
|
||||
<div flex gap-2 text-sm px-2>
|
||||
{{ $t('conversation.with') }}
|
||||
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
|
||||
<div absolute flex gap-2 text-sm text-secondary font-bold left-3 px2 pt2>
|
||||
<p mr-1>
|
||||
{{ $t('conversation.with') }}
|
||||
</p>
|
||||
<AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />
|
||||
</div>
|
||||
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
|
||||
<StatusCard v-if="conversation.lastStatus" :decorated="true" :status="conversation.lastStatus" :actions="false" />
|
||||
</article>
|
||||
</template>
|
||||
|
|
|
@ -96,7 +96,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
|
|||
</div>
|
||||
<StatusActionsMore :status="status" mr--2 />
|
||||
</div>
|
||||
<div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
|
||||
<div :class="status.visibility === 'direct' ? 'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''">
|
||||
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
|
||||
<template #spoiler>
|
||||
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>
|
||||
|
|
|
@ -26,7 +26,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
|
|||
</AccountHoverWrapper>
|
||||
</NuxtLink>
|
||||
<div
|
||||
:class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
|
||||
:class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''"
|
||||
>
|
||||
<StatusSpoiler :enabled="status.sensitive">
|
||||
<template #spoiler>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
--c-bg-active: #f6f6f6;
|
||||
--c-bg-code: #00000006;
|
||||
--c-bg-selection: #8885;
|
||||
--c-bg-fade: #EA9E4422;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
|
||||
--c-text-base: #232323;
|
||||
--c-text-code: #7ca72f;
|
||||
|
@ -25,7 +25,7 @@
|
|||
--c-bg-base: #111;
|
||||
--c-bg-active: #191919;
|
||||
--c-bg-code: #ffffff06;
|
||||
--c-bg-fade: #EA9E4422;
|
||||
--c-bg-fade: #EA9E4411;
|
||||
|
||||
--c-text-base: #fff;
|
||||
--c-text-code: #90be3d;
|
||||
|
|
Loading…
Reference in a new issue