diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkNotesTimeline.vue | 13 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkPagination.vue | 42 | ||||
| -rw-r--r-- | packages/frontend/src/pages/note.vue | 2 |
4 files changed, 34 insertions, 24 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ea6e2efd3..d602b88f88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ - Enhance: ユーザーのノート、フォロー、フォロワーページへのリンクをユーザーポップアップに追加 - Enhance: プッシュ通知を行うための権限確認をより確実に行うように - Enhance: 投稿フォームのチュートリアルを追加 +- Enhance: 「自動でもっと見る」をほとんどの箇所で利用可能に - Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正 - Fix: ナビゲーションバーのリアルタイムモード切替ボタンの状態をよりわかりやすく表示するように - Fix: ページのタイトルが長いとき、はみ出る問題を修正 diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue index d94cf3924c..b03bf6d09f 100644 --- a/packages/frontend/src/components/MkNotesTimeline.vue +++ b/packages/frontend/src/components/MkNotesTimeline.vue @@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl"> +<MkPagination :paginator="paginator" :direction="direction" :autoLoad="autoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl" :forceDisableInfiniteScroll="forceDisableInfiniteScroll"> <template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template> <template #default="{ items: notes }"> @@ -40,26 +40,23 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup generic="T extends IPaginator<Misskey.entities.Note>"> import * as Misskey from 'misskey-js'; +import type { MkPaginationOptions } from '@/components/MkPagination.vue'; import type { IPaginator } from '@/utility/paginator.js'; import MkNote from '@/components/MkNote.vue'; import MkPagination from '@/components/MkPagination.vue'; import { i18n } from '@/i18n.js'; -import { globalEvents, useGlobalEvent } from '@/events.js'; +import { useGlobalEvent } from '@/events.js'; import { isSeparatorNeeded, getSeparatorInfo } from '@/utility/timeline-date-separate.js'; -const props = withDefaults(defineProps<{ +const props = withDefaults(defineProps<MkPaginationOptions & { paginator: T; noGap?: boolean; - - direction?: 'up' | 'down' | 'both'; - autoLoad?: boolean; - pullToRefresh?: boolean; - withControl?: boolean; }>(), { autoLoad: true, direction: 'down', pullToRefresh: true, withControl: true, + forceDisableInfiniteScroll: false, }); useGlobalEvent('noteDeleted', (noteId) => { diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index 72b41eb7df..a4c8ca0095 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only :leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''" :enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''" :leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''" - mode="out-in" + :mode="prefer.s.animation ? 'out-in' : undefined" > <MkLoading v-if="paginator.fetching.value"/> @@ -26,14 +26,14 @@ SPDX-License-Identifier: AGPL-3.0-only <div v-else key="_root_" class="_gaps"> <div v-if="direction === 'up' || direction === 'both'" v-show="upButtonVisible"> - <MkButton v-if="!upButtonLoading" :class="$style.more" primary rounded @click="upButtonClick"> + <MkButton v-if="!upButtonLoading" v-appear="shouldEnableInfiniteScroll ? upButtonClick : null" :class="$style.more" primary rounded @click="upButtonClick"> {{ i18n.ts.loadMore }} </MkButton> <MkLoading v-else/> </div> <slot :items="getValue(paginator.items)" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot> <div v-if="direction === 'down' || direction === 'both'" v-show="downButtonVisible"> - <MkButton v-if="!downButtonLoading" :class="$style.more" primary rounded @click="downButtonClick"> + <MkButton v-if="!downButtonLoading" v-appear="shouldEnableInfiniteScroll ? downButtonClick : null" :class="$style.more" primary rounded @click="downButtonClick"> {{ i18n.ts.loadMore }} </MkButton> <MkLoading v-else/> @@ -44,6 +44,24 @@ SPDX-License-Identifier: AGPL-3.0-only </component> </template> +<script lang="ts"> +export type MkPaginationOptions = { + autoLoad?: boolean; + /** + * ページネーションを進める方向 + * - up: 上方向 + * - down: 下方向 (default) + * - both: 双方向 + * + * NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない + */ + direction?: 'up' | 'down' | 'both'; + pullToRefresh?: boolean; + withControl?: boolean; + forceDisableInfiniteScroll?: boolean; +}; +</script> + <script lang="ts" setup generic="T extends IPaginator"> import { isLink } from '@@/js/is-link.js'; import { onMounted, computed, watch, unref } from 'vue'; @@ -56,24 +74,18 @@ import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; import MkPaginationControl from '@/components/MkPaginationControl.vue'; import * as os from '@/os.js'; -const props = withDefaults(defineProps<{ +const props = withDefaults(defineProps<MkPaginationOptions & { paginator: T; - - // ページネーションを進める方向 - // up: 上方向 - // down: 下方向 (default) - // both: 双方向 - // NOTE: この方向はページネーションの方向であって、アイテムの並び順ではない - direction?: 'up' | 'down' | 'both'; - - autoLoad?: boolean; - pullToRefresh?: boolean; - withControl?: boolean; }>(), { autoLoad: true, direction: 'down', pullToRefresh: true, withControl: false, + forceDisableInfiniteScroll: false, +}); + +const shouldEnableInfiniteScroll = computed(() => { + return prefer.r.enableInfiniteScroll.value && !props.forceDisableInfiniteScroll; }); function onContextmenu(ev: MouseEvent) { diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue index c93ec4272a..2bbd7b2511 100644 --- a/packages/frontend/src/pages/note.vue +++ b/packages/frontend/src/pages/note.vue @@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only <Transition :name="prefer.s.animation ? 'fade' : ''" mode="out-in"> <div v-if="note"> <div v-if="showNext" class="_margin"> - <MkNotesTimeline direction="up" :withControl="false" :pullToRefresh="false" class="" :paginator="showNext === 'channel' ? nextChannelPaginator : nextUserPaginator" :noGap="true"/> + <MkNotesTimeline direction="up" :withControl="false" :pullToRefresh="false" class="" :paginator="showNext === 'channel' ? nextChannelPaginator : nextUserPaginator" :noGap="true" :forceDisableInfiniteScroll="true" /> </div> <div class="_margin"> |