usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2025-05-03 13:33:30 +09:00
parent 69edb20465
commit 41447b6837
2 changed files with 56 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,30 +4,28 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => reload()"> <MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad">
<MkPagination ref="pagingComponent" :pagination="pagination" :disableAutoLoad="disableAutoLoad"> <template #empty>
<template #empty> <div class="_fullinfo">
<div class="_fullinfo"> <img :src="infoImageUrl" draggable="false"/>
<img :src="infoImageUrl" draggable="false"/> <div>{{ i18n.ts.noNotes }}</div>
<div>{{ i18n.ts.noNotes }}</div> </div>
</div> </template>
</template>
<template #default="{ items: notes }"> <template #default="{ items: notes }">
<div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]"> <div :class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: pagination.reversed }]">
<template v-for="(note, i) in notes" :key="note.id"> <template v-for="(note, i) in notes" :key="note.id">
<div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id"> <div v-if="note._shouldInsertAd_" :class="[$style.noteWithAd, { '_gaps': !noGap }]" :data-scroll-anchor="note.id">
<MkNote :class="$style.note" :note="note" :withHardMute="true"/> <MkNote :class="$style.note" :note="note" :withHardMute="true"/>
<div :class="$style.ad"> <div :class="$style.ad">
<MkAd :preferForms="['horizontal', 'horizontal-big']"/> <MkAd :preferForms="['horizontal', 'horizontal-big']"/>
</div>
</div> </div>
<MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/> </div>
</template> <MkNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
</div> </template>
</template> </div>
</MkPagination> </template>
</component> </MkPagination>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -36,8 +34,6 @@ import MkNote from '@/components/MkNote.vue';
import MkPagination from '@/components/MkPagination.vue'; import MkPagination from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js'; import { infoImageUrl } from '@/instance.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import { prefer } from '@/preferences.js';
const props = defineProps<{ const props = defineProps<{
pagination: Paging; pagination: Paging;

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

@ -4,43 +4,45 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<Transition <component :is="prefer.s.enablePullToRefresh ? MkPullToRefresh : 'div'" :refresher="() => paginator.reload()">
:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''" <Transition
:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''" :enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''" :leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''" :enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
:css="prefer.s.animation" :leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
mode="out-in" :css="prefer.s.animation"
> mode="out-in"
<MkLoading v-if="paginator.fetching.value"/> >
<MkLoading v-if="paginator.fetching.value"/>
<MkError v-else-if="paginator.error.value" @retry="paginator.init()"/> <MkError v-else-if="paginator.error.value" @retry="paginator.init()"/>
<div v-else-if="paginator.items.value.length === 0" key="_empty_"> <div v-else-if="paginator.items.value.length === 0" key="_empty_">
<slot name="empty"> <slot name="empty">
<div class="_fullinfo"> <div class="_fullinfo">
<img :src="infoImageUrl" draggable="false"/> <img :src="infoImageUrl" draggable="false"/>
<div>{{ i18n.ts.nothing }}</div> <div>{{ i18n.ts.nothing }}</div>
</div>
</slot>
</div>
<div v-else ref="rootEl" class="_gaps">
<div v-show="pagination.reversed && paginator.canFetchMore.value" key="_more_">
<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchNewer">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
</div>
<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot>
<div v-show="!pagination.reversed && paginator.canFetchMore.value" key="_more_">
<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchOlder">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
</div> </div>
</slot>
</div>
<div v-else ref="rootEl" class="_gaps">
<div v-show="pagination.reversed && paginator.canFetchMore.value" key="_more_">
<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchNewer">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
</div> </div>
<slot :items="paginator.items.value" :fetching="paginator.fetching.value || paginator.moreFetching.value"></slot> </Transition>
<div v-show="!pagination.reversed && paginator.canFetchMore.value" key="_more_"> </component>
<MkButton v-if="!paginator.moreFetching.value" v-appear="(prefer.s.enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="paginator.moreFetching.value" primary rounded @click="paginator.fetchOlder">
{{ i18n.ts.loadMore }}
</MkButton>
<MkLoading v-else/>
</div>
</div>
</Transition>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -51,6 +53,7 @@ import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { usePagination } from '@/use/use-pagination.js'; import { usePagination } from '@/use/use-pagination.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
pagination: PagingCtx; pagination: PagingCtx;