restore animation and styling in following-feed

This commit is contained in:
Hazelnoot 2024-11-17 10:26:31 -05:00
parent 83472dbd82
commit 5b48032681
2 changed files with 24 additions and 2 deletions

View File

@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #default="{ items: notes }">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" @select="u => selectUser(u.id)"/>
<SkFollowingFeedEntry v-if="!isHardMuted(note)" :isMuted="isSoftMuted(note)" :note="note" :class="props.selectedUserId == note.userId && $style.selected" @select="u => selectUser(u.id)"/>
</MkDateSeparatedList>
</template>
</MkPagination>
@ -42,6 +42,7 @@ const props = defineProps<{
withReplies: boolean;
withBots: boolean;
onlyFiles: boolean;
selectedUserId?: string | null;
}>();
const emit = defineEmits<{
@ -119,4 +120,25 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
.panel {
background: var(--panel);
}
@keyframes border {
from {
border-left: 0 solid var(--accent);
}
to {
border-left: 6px solid var(--accent);
}
}
.selected {
animation: border 0.2s ease-out 0s 1 forwards;
&:first-child {
border-top-left-radius: 5px;
}
&:last-child {
border-bottom-left-radius: 5px;
}
}
</style>

View File

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div ref="noteScroll" :class="$style.notes">
<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs">
<SkFollowingRecentNotes ref="followingRecentNotes" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
<SkFollowingRecentNotes ref="followingRecentNotes" :selectedUserId="selectedUserId" :userList="userList" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles" @userSelected="userSelected" @loaded="listReady"/>
</MkHorizontalSwipe>
</div>