diff options
Diffstat (limited to 'packages/frontend/src/components/MkPagination.vue')
| -rw-r--r-- | packages/frontend/src/components/MkPagination.vue | 96 |
1 files changed, 61 insertions, 35 deletions
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index aded18f220..d34646ba75 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -5,50 +5,60 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <component :is="prefer.s.enablePullToRefresh && pullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()" @contextmenu.prevent.stop="onContextmenu"> - <!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 --> - <Transition - :enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''" - :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" - > - <MkLoading v-if="paginator.fetching.value"/> + <div> + <div v-if="props.withControl" :class="$style.control"> + <MkSelect v-model="order" :class="$style.order" :items="[{ label: i18n.ts._order.newest, value: 'newest' }, { label: i18n.ts._order.oldest, value: 'oldest' }]"> + </MkSelect> + <MkButton iconOnly @click="paginator.reload()"><i class="ti ti-refresh"></i></MkButton> + </div> - <MkError v-else-if="paginator.error.value" @retry="paginator.init()"/> + <!-- :css="prefer.s.animation" にしたいけどバグる(おそらくvueのバグ) https://github.com/misskey-dev/misskey/issues/16078 --> + <Transition + :enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''" + :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" + > + <MkLoading v-if="paginator.fetching.value"/> - <div v-else-if="paginator.items.value.length === 0" key="_empty_"> - <slot name="empty"><MkResult type="empty"/></slot> - </div> + <MkError v-else-if="paginator.error.value" @retry="paginator.init()"/> - <div v-else ref="rootEl" class="_gaps"> - <div v-show="pagination.reversed && paginator.canFetchOlder.value" key="_more_"> - <MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchNewer"> - {{ i18n.ts.loadMore }} - </MkButton> - <MkLoading v-else/> + <div v-else-if="paginator.items.value.length === 0" key="_empty_"> + <slot name="empty"><MkResult type="empty"/></slot> </div> - <slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot> - <div v-show="!pagination.reversed && paginator.canFetchOlder.value" key="_more_"> - <MkButton v-if="!paginator.fetchingOlder.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder"> - {{ i18n.ts.loadMore }} - </MkButton> - <MkLoading v-else/> + + <div v-else key="_root_" class="_gaps"> + <slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.fetchingOlder.value"></slot> + <div v-if="order === 'oldest'"> + <MkButton v-if="!paginator.fetchingNewer.value" :class="$style.more" :wait="paginator.fetchingNewer.value" primary rounded @click="paginator.fetchNewer"> + {{ i18n.ts.loadMore }} + </MkButton> + <MkLoading v-else/> + </div> + <div v-else v-show="paginator.canFetchOlder.value"> + <MkButton v-if="!paginator.fetchingOlder.value" :class="$style.more" :wait="paginator.fetchingOlder.value" primary rounded @click="paginator.fetchOlder"> + {{ i18n.ts.loadMore }} + </MkButton> + <MkLoading v-else/> + </div> </div> - </div> - </Transition> + </Transition> + </div> </component> </template> <script lang="ts" setup generic="T extends PagingCtx"> import { isLink } from '@@/js/is-link.js'; -import type { PagingCtx } from '@/composables/use-pagination.js'; +import { ref, watch } from 'vue'; import type { UnwrapRef } from 'vue'; +import type { PagingCtx } from '@/composables/use-pagination.js'; import MkButton from '@/components/MkButton.vue'; import { i18n } from '@/i18n.js'; import { prefer } from '@/preferences.js'; import { usePagination } from '@/composables/use-pagination.js'; import MkPullToRefresh from '@/components/MkPullToRefresh.vue'; +import MkSelect from '@/components/MkSelect.vue'; import * as os from '@/os.js'; type Paginator = ReturnType<typeof usePagination<T['endpoint']>>; @@ -58,27 +68,32 @@ const props = withDefaults(defineProps<{ disableAutoLoad?: boolean; displayLimit?: number; pullToRefresh?: boolean; + withControl?: boolean; }>(), { displayLimit: 20, pullToRefresh: true, + withControl: false, }); +const order = ref<'newest' | 'oldest'>(props.pagination.order ?? 'newest'); + const paginator: Paginator = usePagination({ ctx: props.pagination, }); -function appearFetchMoreAhead() { - paginator.fetchNewer(); -} - -function appearFetchMore() { - paginator.fetchOlder(); -} +watch(order, (newOrder) => { + paginator.updateCtx({ + ...props.pagination, + order: newOrder, + initialDirection: newOrder === 'oldest' ? 'newer' : 'older', + }); +}, { immediate: false }); function onContextmenu(ev: MouseEvent) { if (ev.target && isLink(ev.target as HTMLElement)) return; if (window.getSelection()?.toString() !== '') return; + // TODO: 並び順設定 os.contextMenu([{ icon: 'ti ti-refresh', text: i18n.ts.reload, @@ -108,6 +123,17 @@ defineExpose({ opacity: 0; } +.control { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.order { + flex: 1; + margin-right: 8px; +} + .more { margin-left: auto; margin-right: auto; |