zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: improve conversations (#358)

zio/stable
patak 2022-12-07 00:51:29 +01:00 committed by GitHub
parent 28c4c6a3e8
commit 36a35b5fcc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/conversation/ConversationCard.vue
View File

@ -1,17 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Conversation } from 'masto' import type { Conversation } from 'masto'
const props = defineProps<{ const { conversation } = defineProps<{
conversation: Conversation conversation: Conversation
}>() }>()
const withAccounts = $computed(() =>
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
)
</script> </script>
<template> <template>
<article flex flex-col gap-2> <article flex flex-col gap-2>
<div flex gap-2 text-sm px-2> <div absolute flex gap-2 text-sm text-secondary font-bold left-3 px2 pt2>
<p mr-1>
{{ $t('conversation.with') }} {{ $t('conversation.with') }}
<AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" /> </p>
<AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />
</div> </div>
<StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" /> <StatusCard v-if="conversation.lastStatus" :decorated="true" :status="conversation.lastStatus" :actions="false" />
</article> </article>
</template> </template>

2
components/status/StatusCard.vue
View File

@ -96,7 +96,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
</div> </div>
<StatusActionsMore :status="status" mr--2 /> <StatusActionsMore :status="status" mr--2 />
</div> </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"> <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
<template #spoiler> <template #spoiler>
<p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p> <p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>

2
components/status/StatusDetails.vue
View File

@ -26,7 +26,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
</AccountHoverWrapper> </AccountHoverWrapper>
</NuxtLink> </NuxtLink>
<div <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"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>

4
styles/vars.css
View File

@ -7,7 +7,7 @@
--c-bg-active: #f6f6f6; --c-bg-active: #f6f6f6;
--c-bg-code: #00000006; --c-bg-code: #00000006;
--c-bg-selection: #8885; --c-bg-selection: #8885;
--c-bg-fade: #EA9E4422; --c-bg-fade: #EA9E4411;
--c-text-base: #232323; --c-text-base: #232323;
--c-text-code: #7ca72f; --c-text-code: #7ca72f;
@ -25,7 +25,7 @@
--c-bg-base: #111; --c-bg-base: #111;
--c-bg-active: #191919; --c-bg-active: #191919;
--c-bg-code: #ffffff06; --c-bg-code: #ffffff06;
--c-bg-fade: #EA9E4422; --c-bg-fade: #EA9E4411;
--c-text-base: #fff; --c-text-base: #fff;
--c-text-code: #90be3d; --c-text-code: #90be3d;