From e332c1f9a2a268e247c69bcf3a2fde0af7e51878 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?= =?UTF-8?q?=E3=81=AB=E3=82=85?= <17376330+u1-liquid@users.noreply.github.com> Date: Tue, 19 Mar 2024 06:33:47 +0900 Subject: [PATCH] =?UTF-8?q?enhance:=20MisskeyIO#529=20=E3=81=AE=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0=E4=BF=AE=E6=AD=A3=20(MisskeyIO#536)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: kakkokari-gtyih <67428053+kakkokari-gtyih@users.noreply.github.com> --- .../src/components/MkDateSeparatedList.vue | 6 ---- .../frontend/src/components/MkPagination.vue | 32 +++++++++---------- packages/frontend/src/pages/note.vue | 2 ++ 3 files changed, 18 insertions(+), 22 deletions(-) diff --git a/packages/frontend/src/components/MkDateSeparatedList.vue b/packages/frontend/src/components/MkDateSeparatedList.vue index c979830552..7c9463af25 100644 --- a/packages/frontend/src/components/MkDateSeparatedList.vue +++ b/packages/frontend/src/components/MkDateSeparatedList.vue @@ -134,7 +134,6 @@ export default defineComponent({ const classes = { [$style['date-separated-list']]: true, [$style['date-separated-list-nogap']]: props.noGap, - [$style['reversed']]: props.reversed, [$style['direction-down']]: props.direction === 'down', [$style['direction-up']]: props.direction === 'up', }; @@ -211,11 +210,6 @@ export default defineComponent({ } } -.reversed { - display: flex; - flex-direction: column-reverse; -} - .separator { text-align: center; } diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 9ff384b3e5..d1df676d2d 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -25,14 +25,14 @@ SPDX-License-Identifier: AGPL-3.0-only
-
+
{{ i18n.ts.loadMore }}
-
+
{{ i18n.ts.loadMore }} @@ -67,9 +67,9 @@ export type Paging noPaging?: boolean; /** - * items 配列の中身を逆順にする(新しい方が最後) + * fetchの際に、 items 配列を上方向に追加していく（append, prepend等の関数には影響しない） */ - reversed?: boolean; + prepend?: boolean; offsetMode?: boolean; @@ -126,14 +126,14 @@ const BACKGROUND_PAUSE_WAIT_SEC = 10; // https://qiita.com/mkataigi/items/0154aefd2223ce23398e const scrollObserver = ref(); -watch([() => props.pagination.reversed, scrollableElement], () => { +watch([() => props.pagination.prepend, scrollableElement], () => { if (scrollObserver.value) scrollObserver.value.disconnect(); scrollObserver.value = new IntersectionObserver(entries => { backed.value = entries[0].isIntersecting; }, { root: scrollableElement.value, - rootMargin: props.pagination.reversed ? '-100% 0px 100% 0px' : '100% 0px -100% 0px', + rootMargin: props.pagination.prepend ? '-100% 0px 100% 0px' : '100% 0px -100% 0px', threshold: 0.01, }); }, { immediate: true }); @@ -149,7 +149,7 @@ watch([backed, contentEl], () => { if (!backed.value) { if (!contentEl.value) return; - scrollRemove.value = (props.pagination.reversed ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); + scrollRemove.value = (props.pagination.prepend ? onScrollBottom : onScrollTop)(contentEl.value, executeQueue, TOLERANCE); } else { if (scrollRemove.value) scrollRemove.value(); scrollRemove.value = null; @@ -187,7 +187,7 @@ async function init(): Promise { items.value = res; more.value = false; } else { - if (props.pagination.reversed) moreFetching.value = true; + if (props.pagination.prepend) moreFetching.value = true; items.value = res; more.value = true; } @@ -242,7 +242,7 @@ const fetchMore = async (): Promise => { }; if (res.length === 0) { - if (props.pagination.reversed) { + if (props.pagination.prepend) { reverseConcat(res).then(() => { more.value = false; moreFetching.value = false; @@ -253,7 +253,7 @@ const fetchMore = async (): Promise => { moreFetching.value = false; } } else { - if (props.pagination.reversed) { + if (props.pagination.prepend) { reverseConcat(res).then(() => { more.value = true; moreFetching.value = false; @@ -280,14 +280,14 @@ const fetchMoreAhead = async (): Promise => { ...(props.pagination.offsetMode ? { offset: offset.value, } : { - sinceId: items.value[items.value.length - 1].id, + sinceId: items.value[0].id, }), }).then(res => { if (res.length === 0) { - items.value = items.value.concat(res); + items.value = res.concat(items.value); more.value = false; } else { - items.value = items.value.concat(res); + items.value = res.concat(items.value); more.value = true; } offset.value += res.length; @@ -297,7 +297,7 @@ const fetchMoreAhead = async (): Promise => { }); }; -const isTop = (): boolean => isBackTop.value || (props.pagination.reversed ? isBottomVisible : isTopVisible)(contentEl.value!, TOLERANCE); +const isTop = (): boolean => isBackTop.value || (props.pagination.prepend ? isBottomVisible : isTopVisible)(contentEl.value!, TOLERANCE); watch(visibility, () => { if (visibility.value === 'hidden') { @@ -369,7 +369,7 @@ onActivated(() => { }); onDeactivated(() => { - isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl.value ? rootEl.value.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; + isBackTop.value = props.pagination.prepend ? window.scrollY >= (rootEl.value ? rootEl.value.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; }); function toBottom() { @@ -378,7 +378,7 @@ function toBottom() { onBeforeMount(() => { init().then(() => { - if (props.pagination.reversed) { + if (props.pagination.prepend) { nextTick(() => { setTimeout(toBottom, 800); diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue index 0bc3415179..c9a461769b 100644 --- a/packages/frontend/src/pages/note.vue +++ b/packages/frontend/src/pages/note.vue @@ -85,6 +85,7 @@ const prevUserPagination: Paging = { }; const nextUserPagination: Paging = { + prepend: true, endpoint: 'users/notes', limit: 10, params: computed(() => note.value ? ({ @@ -103,6 +104,7 @@ const prevChannelPagination: Paging = { }; const nextChannelPagination: Paging = { + prepend: true, endpoint: 'channels/timeline', limit: 10, params: computed(() => note.value ? ({