Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

feat(ui): colorize reply and reblog

Browse source
This commit is contained in:
Anthony Fu 2023-01-08 10:03:23 +01:00
parent c64106c98a
commit 2211383258
5 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountTabs.vue
View file

@ -22,7 +22,7 @@ const tabs = $computed(() => [
params: { server, account },
},
display: t('tab.posts_with_replies'),
icon: 'i-ri:chat-3-line',
icon: 'i-ri:chat-1-line',
},
{
name: 'account-media',

2
components/status/StatusActions.vue
View file

@ -38,7 +38,7 @@ const reply = () => {
:content="$t('action.reply')"
:text="status.repliesCount || ''"
color="text-blue" hover="text-blue" group-hover="bg-blue/10"
icon="i-ri:chat-3-line"
icon="i-ri:chat-1-line"
:command="command"
@click="reply"
>

2
components/status/StatusActionsMore.vue
View file

@ -129,7 +129,7 @@ async function editStatus() {
<template v-if="userSettings.zenMode">
<CommonDropdownItem
:text="$t('action.reply')"
icon="i-ri:chat-3-line"
icon="i-ri:chat-1-line"
:command="command"
@click="reply()"
/>

50
components/status/StatusCard.vue
View file

@ -98,35 +98,35 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
<!-- Upper border -->
<div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
<!-- Line connecting to previous status -->
<template v-if="status.inReplyToAccountId">
<StatusReplyingTo
v-if="showReplyTo"
ml-6 pt-1 pl-5
:status="status"
:is-self-reply="isSelfReply"
:class="faded ? 'text-secondary-light' : ''"
/>
<div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
<template v-if="showReplyTo">
<div w="1px" h="0.5" border="x base" mt-3 />
<div w="1px" h="0.5" border="x base" />
<div w="1px" h="0.5" border="x base" />
</template>
<div w="1px" h-10 border="x base" />
</div>
</template>
<slot name="meta">
<!-- Line connecting to previous status -->
<template v-if="status.inReplyToAccountId">
<StatusReplyingTo
v-if="showReplyTo"
ml-6 pt-1 pl-5
:status="status"
:is-self-reply="isSelfReply"
:class="faded ? 'text-secondary-light' : ''"
/>
<div flex="~ col gap-1" items-center pos="absolute top-0 left-0" w="20.5" z--1>
<template v-if="showReplyTo">
<div w="1px" h="0.5" border="x base" mt-3 />
<div w="1px" h="0.5" border="x base" />
<div w="1px" h="0.5" border="x base" />
</template>
<div w="1px" h-10 border="x base" />
</div>
</template>
<!-- Reblog status & Meta -->
<div flex="~ col" justify-between>
<slot name="meta">
<!-- Reblog status -->
<div flex="~ col" justify-between>
<div
v-if="rebloggedBy && !collapseRebloggedBy"
flex="~" items-center
p="t-1 b-0.5 x-1px"
relative text-secondary ws-nowrap
>
<div i-ri:repeat-fill me-46px text-primary w-16px h-16px />
<div i-ri:repeat-fill me-46px text-green w-16px h-16px />
<div absolute top-1 ms-24px w-32px h-32px rounded-full>
<AccountHoverWrapper :account="rebloggedBy">
<NuxtLink :to="getAccountRoute(rebloggedBy)">
@ -136,14 +136,14 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
</div>
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
</div>
</slot>
</div>
</div>
</slot>
<div flex gap-3 :class="{ 'text-secondary': faded }">
<!-- Avatar -->
<div relative>
<div v-if="collapseRebloggedBy" absolute flex items-center justify-center top--6px px-2px py-3px rounded-full bg-base>
<div i-ri:repeat-fill text-primary w-16px h-16px />
<div i-ri:repeat-fill text-green w-16px h-16px />
</div>
<AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountRoute(status.account)" rounded-full>

10
components/status/StatusReplyingTo.vue
View file

@ -18,16 +18,18 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
v-if="status.inReplyToId"
flex="~ gap2" items-center h-auto text-sm text-secondary
:to="getStatusInReplyToRoute(status)"
:title=" $t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
:title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
text-blue saturate-50 hover:saturate-100
>
<template v-if="isSelfReply">
<span btn-text p0 mb-1>{{ $t('status.show_full_thread') }}</span>
<div i-ri-discuss-line text-blue />
<span>{{ $t('status.show_full_thread') }}</span>
</template>
<template v-else>
<div i-ri-chat-1-line />
<div i-ri-chat-1-line text-blue />
<i18n-t keypath="status.replying_to">
<template v-if="account">
<AccountInlineInfo :account="account" :link="false" mx1 />
<AccountInlineInfo :account="account" :link="false" />
</template>
<template v-else>
{{ $t('status.someone') }}