mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2025-01-19 08:13:14 +09:00
Code

Update MkPullToRefresh.vue

Browse Source
This commit is contained in:
syuilo 2023-10-23 20:37:38 +09:00
parent 1105741bd2
commit 9705a7c8ec
1 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
packages/frontend/src/components/MkPullToRefresh.vue
View File

@ -6,12 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="rootEl"> <div ref="rootEl">
<div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight / 3}px;`"> <div v-if="isPullStart" :class="$style.frame" :style="`--frame-min-height: ${currentHeight / 3}px;`">
<div :class="$style.contents"> <div :class="$style.frameContent">
<i v-if="!isRefreshing" :class="['ti', 'ti-arrow-bar-to-down', { [$style.refresh]: isPullEnd }]"></i> <MkLoading v-if="isRefreshing" :class="$style.loader" :em="true"/>
<MkLoading v-else :em="true"/> <i v-else class="ti ti-arrow-bar-to-down" :class="[$style.icon, { [$style.refresh]: isPullEnd }]"></i>
<p v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</p> <div :class="$style.text">
<p v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</p> <template v-if="isPullEnd">{{ i18n.ts.releaseToRefresh }}</template>
<p v-else>{{ i18n.ts.pullDownToRefresh }}</p> <template v-else-if="isRefreshing">{{ i18n.ts.refreshing }}</template>
<template v-else>{{ i18n.ts.pullDownToRefresh }}</template>
</div>
</div> </div>
</div> </div>
<div :class="{ [$style.slotClip]: isPullStart }"> <div :class="{ [$style.slotClip]: isPullStart }">
@ -201,37 +203,32 @@ defineExpose({
-webkit-mask-image: -webkit-linear-gradient(90deg, #000 0%, #000 80%, transparent); -webkit-mask-image: -webkit-linear-gradient(90deg, #000 0%, #000 80%, transparent);
pointer-events: none; pointer-events: none;
}
> .contents { .frameContent {
position: absolute; position: absolute;
bottom: 0;
width: 100%;
margin: 5px 0;
display: flex;
flex-direction: column;
align-items: center;
font-size: 14px;
bottom: 0; > .icon, > .loader {
width: 100%; margin: 6px 0;
}
> .icon {
transition: transform .25s;
&.refresh {
transform: rotate(180deg);
}
}
> .text {
margin: 5px 0; margin: 5px 0;
display: flex;
flex-direction: column;
align-items: center;
margin: 5px 0;
font-size: 14px;
> i, > div {
margin: 6px 0;
}
> i {
transition: transform .25s;
&.refresh {
transform: rotate(180deg);
}
}
> p {
margin: 5px 0;
}
} }
} }