feat(ui): colorize reply and reblog
This commit is contained in:
Anthony Fu
parent
c64106c98a
commit
2211383258
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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()"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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') }}
|
||||
|
|
|
|||
Loading…
Reference in a new issue