teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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 }, params: { server, account },
}, },
display: t('tab.posts_with_replies'), display: t('tab.posts_with_replies'),
icon: 'i-ri:chat-3-line', icon: 'i-ri:chat-1-line',
}, },
{ {
name: 'account-media', name: 'account-media',

2
components/status/StatusActions.vue
View file

@ -38,7 +38,7 @@ const reply = () => {
:content="$t('action.reply')" :content="$t('action.reply')"
:text="status.repliesCount || ''" :text="status.repliesCount || ''"
color="text-blue" hover="text-blue" group-hover="bg-blue/10" 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" :command="command"
@click="reply" @click="reply"
> >

2
components/status/StatusActionsMore.vue
View file

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

50
components/status/StatusCard.vue
View file

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