diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkNoteDraftsDialog.vue | 12 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkNotesTimeline.vue | 4 | ||||
| -rw-r--r-- | packages/frontend/src/components/MkPagination.vue | 96 |
3 files changed, 67 insertions, 45 deletions
diff --git a/packages/frontend/src/components/MkNoteDraftsDialog.vue b/packages/frontend/src/components/MkNoteDraftsDialog.vue index b4aff8d16f..eb103a8423 100644 --- a/packages/frontend/src/components/MkNoteDraftsDialog.vue +++ b/packages/frontend/src/components/MkNoteDraftsDialog.vue @@ -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; diff --git a/packages/frontend/src/components/MkNotesTimeline.vue b/packages/frontend/src/components/MkNotesTimeline.vue index a500bab8e6..401cef62bb 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 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'); 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; |