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

feat: direct messages bubbles (#262)

zio/stable
patak 2022-12-01 08:32:07 +01:00 committed by GitHub
parent 12bb0bbb2d
commit a28f14cb70
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/status/StatusCard.vue
View File

@ -81,7 +81,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<StatusActionsMore :status="status" mr--2 /> <StatusActionsMore :status="status" mr--2 />
</div> </div>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
<div> <div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
<StatusSpoiler :enabled="status.sensitive"> <StatusSpoiler :enabled="status.sensitive">
<template #spoiler> <template #spoiler>
<p>{{ status.spoilerText }}</p> <p>{{ status.spoilerText }}</p>

30
components/status/StatusDetails.vue
View File

@ -26,19 +26,23 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
</AccountHoverWrapper> </AccountHoverWrapper>
</NuxtLink> </NuxtLink>
<StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" /> <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
<StatusSpoiler :enabled="status.sensitive"> <div
<template #spoiler> :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
<p text-2xl> >
{{ status.spoilerText }} <StatusSpoiler :enabled="status.sensitive">
</p> <template #spoiler>
</template> <p text-2xl>
<StatusBody :status="status" :with-action="false" text-2xl /> {{ status.spoilerText }}
<StatusPoll v-if="status.poll" :poll="status.poll" /> </p>
<StatusMedia </template>
v-if="status.mediaAttachments?.length" <StatusBody :status="status" :with-action="false" text-2xl />
:status="status" <StatusPoll v-if="status.poll" :poll="status.poll" />
/> <StatusMedia
</StatusSpoiler> v-if="status.mediaAttachments?.length"
:status="status"
/>
</StatusSpoiler>
</div>
<div flex="~ gap-1" items-center text-secondary text-sm> <div flex="~ gap-1" items-center text-secondary text-sm>
<div flex> <div flex>
<div>{{ createdAt }}</div> <div>{{ createdAt }}</div>

2
styles/vars.css
View File

@ -7,6 +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-text-base: #232323; --c-text-base: #232323;
--c-text-code: #7ca72f; --c-text-code: #7ca72f;
@ -24,6 +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-text-base: #fff; --c-text-base: #fff;
--c-text-code: #90be3d; --c-text-code: #90be3d;

1
unocss.config.ts
View File

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