Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add an option to collapse replies

Browse source
This commit is contained in:
Sugar 2024-06-11 15:11:14 +02:00
parent 8f3549b494
commit c9d0b81555
6 changed files with 68 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/frontend/src/components/MkNote.vue
View file

@ -12,7 +12,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="[$style.root, { [$style.showActionsOnlyHover]: defaultStore.state.showNoteActionsOnlyHover }]"
:tabindex="!isDeleted ? '-1' : undefined"
>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="appearNote.reply && replyCollapsed" :class="$style.collapsedReply">
<MkAvatar :class="$style.collapsedReplyAvatar" :user="appearNote.reply.user" link preview/>
<Mfm :text="getNoteSummary(appearNote.reply)" :plain="true" :nowrap="true" :author="appearNote.reply.user" :nyaize="'respect'" :class="$style.collapsedReplyText" @click="replyCollapsed = false"/>
</div>
<MkNoteSub v-if="appearNote.reply && !renoteCollapsed && !replyCollapsed" :note="appearNote.reply" :class="$style.replyTo"/>
<div v-if="pinned" :class="$style.tip"><i class="ph-push-pin ph-bold ph-lg"></i> {{ i18n.ts.pinnedNote }}</div>
<!--<div v-if="appearNote._prId_" class="tip"><i class="ph-megaphone ph-bold ph-lg"></i> {{ i18n.ts.promotion }}<button class="_textButton hide" @click="readPromo()">{{ i18n.ts.hideThisNote }} <i class="ph-x ph-bold ph-lg"></i></button></div>-->
<!--<div v-if="appearNote._featuredId_" class="tip"><i class="ph-lightning ph-bold ph-lg"></i> {{ i18n.ts.featured }}</div>-->
@ -310,6 +314,7 @@ const renoteCollapsed = ref(
(appearNote.value.myReaction != null)
)
);
const replyCollapsed = ref(defaultStore.state.collapseReplies && !renoteCollapsed.value);
const defaultLike = computed(() => defaultStore.state.like ? defaultStore.state.like : null);
const animated = computed(() => parsed.value ? checkAnimationFromMfm(parsed.value) : null);
const allowAnim = ref(defaultStore.state.advancedMfm && defaultStore.state.animatedMfm ? true : false);
@ -919,7 +924,7 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-right: 4px;
}
.collapsedRenoteTarget {
.collapsedRenoteTarget, .collapsedReply {
display: flex;
align-items: center;
line-height: 28px;
@ -927,7 +932,12 @@ function emitUpdReaction(emoji: string, delta: number) {
padding: 0 32px 18px;
}
.collapsedRenoteTargetAvatar {
.collapsedReply {
padding: 28px 32px 0;
opacity: 0.7;
}
.collapsedRenoteTargetAvatar, .collapsedReplyAvatar {
flex-shrink: 0;
display: inline-block;
width: 28px;
@ -936,12 +946,15 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.collapsedRenoteTargetText {
opacity: 0.7;
}
.collapsedRenoteTargetText, .collapsedReplyText {
overflow: hidden;
flex-shrink: 1;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 90%;
opacity: 0.7;
cursor: pointer;
&:hover {
@ -1154,6 +1167,10 @@ function emitUpdReaction(emoji: string, delta: number) {
margin-top: 4px;
}
.collapsedReply {
padding: 28px 16px 0;
}
.article {
padding: 14px 16px;
}