DatseMultimediaSites
/
Sharkey
mirror of https://activitypub.software/TransFem-org/Sharkey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

preserve scroll positions when navigating

This commit is contained in:
Hazel K 2024-10-04 08:58:32 -04:00
parent 4273640530
commit fb7bc2ff01
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/frontend/src/pages/following-feed.vue
View File

@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.root"> <div :class="$style.root">
<MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/> <MkPageHeader v-model:tab="currentTab" :class="$style.header" :tabs="headerTabs" :actions="headerActions" :displayBackButton="true" @update:tab="onChangeTab"/>
<div :class="$style.notes"> <div ref="noteScroll" :class="$style.notes">
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkPullToRefresh :refresher="() => reloadLatestNotes()"> <MkPullToRefresh :refresher="() => reloadLatestNotes()">
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady"> <MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
@ -28,7 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkHorizontalSwipe> </MkHorizontalSwipe>
</div> </div>
<div v-if="isWideViewport" :class="$style.user"> <div v-if="isWideViewport" ref="userScroll" :class="$style.user">
<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs"> <MkHorizontalSwipe v-if="selectedUserId" v-model:tab="currentTab" :tabs="headerTabs">
<UserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/> <UserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withRenotes="withUserRenotes" :withReplies="withUserReplies" :onlyFiles="withOnlyFiles"/>
</MkHorizontalSwipe> </MkHorizontalSwipe>
@ -61,6 +61,8 @@ import MkPageHeader from '@/components/global/MkPageHeader.vue';
import { $i } from '@/account.js'; import { $i } from '@/account.js';
import { checkWordMute } from '@/scripts/check-word-mute.js'; import { checkWordMute } from '@/scripts/check-word-mute.js';
import UserRecentNotes from '@/components/UserRecentNotes.vue'; import UserRecentNotes from '@/components/UserRecentNotes.vue';
import { useScrollPositionManager } from '@/nirax.js';
import { getScrollContainer } from '@/scripts/scroll.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
initialTab?: FollowingFeedTab, initialTab?: FollowingFeedTab,
@ -76,6 +78,8 @@ const router = useRouter();
const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab); const currentTab: Ref<FollowingFeedTab> = ref(props.initialTab);
const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab); const mutualsOnly: Ref<boolean> = computed(() => currentTab.value === mutualsTab);
const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>(); const userRecentNotes = shallowRef<InstanceType<typeof UserRecentNotes>>();
const userScroll = shallowRef<HTMLElement>();
const noteScroll = shallowRef<HTMLElement>();
// We have to disable the per-user feed on small displays, and it must be done through JS instead of CSS. // We have to disable the per-user feed on small displays, and it must be done through JS instead of CSS.
// Otherwise, the second column will waste resources in the background. // Otherwise, the second column will waste resources in the background.
@ -213,6 +217,8 @@ const headerTabs = computed(() => [
} satisfies Tab, } satisfies Tab,
]); ]);
useScrollPositionManager(() => getScrollContainer(userScroll.value ?? null), router);
useScrollPositionManager(() => getScrollContainer(noteScroll.value ?? null), router);
definePageMetadata(() => ({ definePageMetadata(() => ({
title: i18n.ts.following, title: i18n.ts.following,
icon: 'ph-user-check ph-bold ph-lg', icon: 'ph-user-check ph-bold ph-lg',
@ -254,12 +260,12 @@ definePageMetadata(() => ({
.notes { .notes {
grid-area: notes; grid-area: notes;
overflow: auto; overflow-y: auto;
} }
.user { .user {
grid-area: user; grid-area: user;
overflow: auto; overflow-y: auto;
} }
.userInfo { .userInfo {