mirror/elk
1
0
Fork 0
mirror of https://github.com/elk-zone/elk synced 2024-11-27 14:28:10 +09:00
Code

feat: improve conversations (#358)

Browse Source
This commit is contained in:
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

16
components/conversation/ConversationCard.vue
View File

@ -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>

2
components/status/StatusCard.vue
View File

@ -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>

2
components/status/StatusDetails.vue
View File

@ -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>

4
styles/vars.css
View File

@ -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;