diff options
| author | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-29 13:55:05 +0900 |
|---|---|---|
| committer | syuilo <4439005+syuilo@users.noreply.github.com> | 2025-03-29 13:55:05 +0900 |
| commit | 33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f (patch) | |
| tree | 23a851c01e7fe7a26a11589e89527d4e2d04b13b /packages | |
| parent | 🎨 (diff) | |
| download | sharkey-33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f.tar.gz sharkey-33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f.tar.bz2 sharkey-33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f.zip | |
Revert "🎨"
This reverts commit 3451c9a0dedb95d7b22cece61202a9cb027c374d.
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/components/MkPagination.vue | 65 |
1 files changed, 41 insertions, 24 deletions
diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index d23346971f..d90db1748c 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -4,34 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> -<MkLoading v-if="fetching"/> +<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="fetching"/> -<MkError v-else-if="error" @retry="init()"/> + <MkError v-else-if="error" @retry="init()"/> -<div v-else-if="empty" key="_empty_" class="empty"> - <slot name="empty"> - <div class="_fullinfo"> - <img :src="infoImageUrl" draggable="false"/> - <div>{{ i18n.ts.nothing }}</div> - </div> - </slot> -</div> - -<div v-else ref="rootEl" class="_gaps"> - <div v-show="pagination.reversed && more" key="_more_"> - <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead"> - {{ i18n.ts.loadMore }} - </MkButton> - <MkLoading v-else class="loading"/> + <div v-else-if="empty" key="_empty_" class="empty"> + <slot name="empty"> + <div class="_fullinfo"> + <img :src="infoImageUrl" draggable="false"/> + <div>{{ i18n.ts.nothing }}</div> + </div> + </slot> </div> - <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot> - <div v-show="!pagination.reversed && more" key="_more_"> - <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore"> - {{ i18n.ts.loadMore }} - </MkButton> - <MkLoading v-else class="loading"/> + + <div v-else ref="rootEl" class="_gaps"> + <div v-show="pagination.reversed && more" key="_more_"> + <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead"> + {{ i18n.ts.loadMore }} + </MkButton> + <MkLoading v-else class="loading"/> + </div> + <slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot> + <div v-show="!pagination.reversed && more" key="_more_"> + <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore"> + {{ i18n.ts.loadMore }} + </MkButton> + <MkLoading v-else class="loading"/> + </div> </div> -</div> +</Transition> </template> <script lang="ts"> @@ -483,6 +491,15 @@ defineExpose({ </script> <style lang="scss" module> +.transition_fade_enterActive, +.transition_fade_leaveActive { + transition: opacity 0.125s ease; +} +.transition_fade_enterFrom, +.transition_fade_leaveTo { + opacity: 0; +} + .more { margin-left: auto; margin-right: auto; |