mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-02 17:55:52 +02:00
Code Releases Activity

enhance(frontend): ページネーションの並び順を逆にできるように

Browse Source
This commit is contained in:
syuilo
2025-06-25 20:26:20 +09:00
parent 4d72d6caf4
commit eee9a5f853
21 changed files with 137 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/components/MkNoteDraftsDialog.vue
View File

@@ -17,14 +17,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template #header>
{{ i18n.ts.drafts }} ({{ currentDraftsCount }}/{{ $i?.policies.noteDraftLimit }})
</template>
<div :class="$style.drafts" class="_gaps">
<MkPagination ref="pagingEl" :pagination="paging">
<div class="_spacer">
<MkPagination ref="pagingEl" :pagination="paging" withControl>
<template #empty>
<MkResult type="empty" :text="i18n.ts._drafts.noDrafts"/>
</template>
<template #default="{ items }">
<div class="_spacer _gaps_s">
<div class="_gaps_s">
<div
v-for="draft in (items as unknown as Misskey.entities.NoteDraft[])"
:key="draft.id"
@@ -157,12 +157,6 @@ async function deleteDraft(draft: Misskey.entities.NoteDraft) {
</script>
<style lang="scss" module>
.drafts {
overflow-x: hidden;
overflow-x: clip;
overflow-y: auto;
}
.draft {
padding: 16px;
gap: 16px;

4
packages/frontend/src/components/MkNotesTimeline.vue
View File

@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad" :pullToRefresh="pullToRefresh">
<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad" :pullToRefresh="pullToRefresh" :withControl="withControl">
<template #empty><MkResult type="empty" :text="i18n.ts.noNotes"/></template>
<template #default="{ items: notes }">
@@ -45,8 +45,10 @@ const props = withDefaults(defineProps<{
noGap?: boolean;
disableAutoLoad?: boolean;
pullToRefresh?: boolean;
withControl?: boolean;
}>(), {
pullToRefresh: true,
withControl: true,
});
const pagingComponent = useTemplateRef('pagingComponent');

98
packages/frontend/src/components/MkPagination.vue
View File

@@ -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"/>
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<div v-else-if="paginator.items.value.length === 0" key="_empty_">
<slot name="empty"><MkResult type="empty"/></slot>
<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>
<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/>
<!-- :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"/>
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<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;