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

denyMoveTransitionを復活させる

Browse source
This commit is contained in:
tamaina 2023-07-25 10:47:31 +00:00
parent cf764eebe3
commit 9f4df717e8
3 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/frontend/src/components/MkNotes.vue
View file

@ -7,7 +7,7 @@
</div> </div>
</template> </template>
<template #default="{ items: notes }"> <template #default="{ items: notes, denyMoveTransition }">
<div :class="[$style.root, { [$style.noGap]: noGap }]"> <div :class="[$style.root, { [$style.noGap]: noGap }]">
<MkDateSeparatedList <MkDateSeparatedList
ref="notes" ref="notes"
@ -18,6 +18,7 @@
:noGap="noGap" :noGap="noGap"
:ad="true" :ad="true"
:class="$style.notes" :class="$style.notes"
:denyMoveTransition="denyMoveTransition"
> >
<MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/> <MkNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
</MkDateSeparatedList> </MkDateSeparatedList>

4
packages/frontend/src/components/MkNotifications.vue
View file

@ -7,8 +7,8 @@
</div> </div>
</template> </template>
<template #default="{ items: notifications }"> <template #default="{ items: notifications, denyMoveTransition }">
<MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true"> <MkDateSeparatedList v-slot="{ item: notification }" :class="$style.list" :items="notifications" :noGap="true" :denyMoveTransition="denyMoveTransition">
<MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/> <MkNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :key="`showNotificationAsNote:${notification.id}`" :note="notification.note"/>
<XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/> <XNotification v-else :key="notification.id" :notification="notification" :withTime="true" :full="true" class="_panel notification"/>
</MkDateSeparatedList> </MkDateSeparatedList>

10
packages/frontend/src/components/MkPagination.vue
View file

@ -26,7 +26,7 @@
</MkButton> </MkButton>
<MkLoading v-else class="loading"/> <MkLoading v-else class="loading"/>
</div> </div>
<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot> <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching" :denyMoveTransition="denyMoveTransition"></slot>
<div v-show="!pagination.reversed && more" key="_more_" class="_margin"> <div v-show="!pagination.reversed && more" key="_more_" class="_margin">
<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore"> <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary rounded @click="fetchMore">
{{ i18n.ts.loadMore }} {{ i18n.ts.loadMore }}
@ -163,6 +163,7 @@ const scrollableElementOrHtml = $computed(() => scrollableElement ?? document.ge
const visibility = useDocumentVisibility(); const visibility = useDocumentVisibility();
const isPausingUpdateByExecutingQueue = ref(false); const isPausingUpdateByExecutingQueue = ref(false);
const denyMoveTransition = ref(false);
//#region scrolling //#region scrolling
const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible; const checkFn = props.pagination.reversed ? isBottomVisible : isTopVisible;
@ -265,6 +266,7 @@ async function adjustScroll(fn: () => void): Promise<void> {
} catch (err) { } catch (err) {
console.error(err, { scrollableElementOrHtml }); console.error(err, { scrollableElementOrHtml });
} }
denyMoveTransition.value = true;
fn(); fn();
return await nextTick(() => { return await nextTick(() => {
try { try {
@ -276,7 +278,8 @@ async function adjustScroll(fn: () => void): Promise<void> {
} catch (err) { } catch (err) {
console.error(err, { scrollableElementOrHtml }); console.error(err, { scrollableElementOrHtml });
} }
return nextTick(); }).then(() => nextTick()).finally(() => {
denyMoveTransition.value = false;
}); });
} }
//#endregion //#endregion
@ -548,17 +551,20 @@ async function executeQueue() {
// Safariでは描画が微妙になるので一定程度スクロールするだけ // Safariでは描画が微妙になるので一定程度スクロールするだけ
scrollBy(scrollableElement, { top: TOLERANCE + 4, behavior: 'instant' }); scrollBy(scrollableElement, { top: TOLERANCE + 4, behavior: 'instant' });
backed = true; backed = true;
denyMoveTransition.value = true;
await nextTick(); await nextTick();
unshiftItems(newItems, Infinity); unshiftItems(newItems, Infinity);
await nextTick(); await nextTick();
} else { } else {
await adjustScroll(() => unshiftItems(newItems, Infinity)); await adjustScroll(() => unshiftItems(newItems, Infinity));
backed = true; backed = true;
denyMoveTransition.value = true;
} }
items.value = new Map([...items.value].slice(0, displayLimit.value)); items.value = new Map([...items.value].slice(0, displayLimit.value));
await nextTick(); await nextTick();
isPausingUpdateByExecutingQueue.value = false; isPausingUpdateByExecutingQueue.value = false;
denyMoveTransition.value = false;
} }
function prependQueue(newItem: MisskeyEntity) { function prependQueue(newItem: MisskeyEntity) {