From 9a78bbf0f1db488e979377b1fbb2d5f6f4ae750e Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Sat, 14 Jan 2023 15:01:28 +0900 Subject: [PATCH] refactor(client): use css modules --- .../frontend/src/components/MkPagination.vue | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue index a78e7e064a..2b3ccb88ce 100644 --- a/packages/frontend/src/components/MkPagination.vue +++ b/packages/frontend/src/components/MkPagination.vue @@ -1,5 +1,11 @@ <template> -<Transition :name="$store.state.animation ? 'fade' : ''" mode="out-in"> +<Transition + :enter-active-class="$store.state.animation ? $style.transition_fade_enterActive : ''" + :leave-active-class="$store.state.animation ? $style.transition_fade_leaveActive : ''" + :enter-from-class="$store.state.animation ? $style.transition_fade_enterFrom : ''" + :leave-to-class="$store.state.animation ? $style.transition_fade_leaveTo : ''" + mode="out-in" +> <MkLoading v-if="fetching"/> <MkError v-else-if="error" @retry="init()"/> @@ -14,15 +20,15 @@ </div> <div v-else ref="rootEl"> - <div v-show="pagination.reversed && more" key="_more_" class="cxiknjgy _margin"> - <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> + <div v-show="pagination.reversed && more" key="_more_" class="_margin"> + <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> {{ i18n.ts.loadMore }} </MkButton> <MkLoading v-else class="loading"/> </div> <slot :items="items" :fetching="fetching || moreFetching"></slot> - <div v-show="!pagination.reversed && more" key="_more_" class="cxiknjgy _margin"> - <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" class="button" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> + <div v-show="!pagination.reversed && more" key="_more_" class="_margin"> + <MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? fetchMore : null" :class="$style.more" :disabled="moreFetching" :style="{ cursor: moreFetching ? 'wait' : 'pointer' }" primary @click="fetchMore"> {{ i18n.ts.loadMore }} </MkButton> <MkLoading v-else class="loading"/> @@ -95,7 +101,7 @@ const isBackTop = ref(false); const empty = computed(() => items.value.length === 0); const error = ref(false); const { - enableInfiniteScroll + enableInfiniteScroll, } = defaultStore.reactiveState; const contentEl = $computed(() => props.pagination.pageEl || rootEl); @@ -292,7 +298,7 @@ const prepend = (item: MisskeyEntity): void => { function unshiftItems(newItems: MisskeyEntity[]) { const length = newItems.length + items.value.length; - items.value = [ ...newItems, ...items.value ].slice(0, props.displayLimit); + items.value = [...newItems, ...items.value].slice(0, props.displayLimit); if (length >= props.displayLimit) more.value = true; } @@ -331,7 +337,7 @@ onActivated(() => { }); onDeactivated(() => { - isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl?.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; + isBackTop.value = props.pagination.reversed ? window.scrollY >= (rootEl ? rootEl.scrollHeight - window.innerHeight : 0) : window.scrollY === 0; }); function toBottom() { @@ -372,20 +378,18 @@ defineExpose({ }); </script> -<style lang="scss" scoped> -.fade-enter-active, -.fade-leave-active { +<style lang="scss" module> +.transition_fade_enterActive, +.transition_fade_leaveActive { transition: opacity 0.125s ease; } -.fade-enter-from, -.fade-leave-to { +.transition_fade_enterFrom, +.transition_fade_leaveTo { opacity: 0; } -.cxiknjgy { - > .button { - margin-left: auto; - margin-right: auto; - } +.more { + margin-left: auto; + margin-right: auto; } </style>