diff options
| author | Hazelnoot <acomputerdog@gmail.com> | 2024-11-17 10:26:31 -0500 |
|---|---|---|
| committer | Hazelnoot <acomputerdog@gmail.com> | 2024-11-20 22:22:30 -0500 |
| commit | 5b48032681347af28cbb1c5bd94d5f55949b61aa (patch) | |
| tree | 9fdc1f594fce147221b880efe6758bec3a4f6a78 /packages/frontend/src/components/SkFollowingRecentNotes.vue | |
| parent | add following feed to the deck UI (diff) | |
| download | sharkey-5b48032681347af28cbb1c5bd94d5f55949b61aa.tar.gz sharkey-5b48032681347af28cbb1c5bd94d5f55949b61aa.tar.bz2 sharkey-5b48032681347af28cbb1c5bd94d5f55949b61aa.zip | |
restore animation and styling in following-feed
Diffstat (limited to 'packages/frontend/src/components/SkFollowingRecentNotes.vue')
| -rw-r--r-- | packages/frontend/src/components/SkFollowingRecentNotes.vue | 24 |
1 files changed, 23 insertions, 1 deletions
diff --git a/packages/frontend/src/components/SkFollowingRecentNotes.vue b/packages/frontend/src/components/SkFollowingRecentNotes.vue index 35fa83812f..6daa8feba5 100644 --- a/packages/frontend/src/components/SkFollowingRecentNotes.vue +++ b/packages/frontend/src/components/SkFollowingRecentNotes.vue @@ -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> |