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 }"> <template #default="{ items: notes }">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true"> <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> </MkDateSeparatedList>
</template> </template>
</MkPagination> </MkPagination>
@ -42,6 +42,7 @@ const props = defineProps<{
withReplies: boolean; withReplies: boolean;
withBots: boolean; withBots: boolean;
onlyFiles: boolean; onlyFiles: boolean;
selectedUserId?: string | null;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -119,4 +120,25 @@ function checkMute(note: Misskey.entities.Note | undefined | null, mutes: Mutes)
.panel { .panel {
background: var(--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> </style>

View file

@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div ref="noteScroll" :class="$style.notes"> <div ref="noteScroll" :class="$style.notes">
<MkHorizontalSwipe v-model:tab="userList" :tabs="headerTabs"> <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> </MkHorizontalSwipe>
</div> </div>