mirrors/barkey
1
0
Fork 0
mirror of https://codeberg.org/yeentown/barkey.git synced 2025-07-07 20:44:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

use SkTransitionGroup for all dynamic TransitionGroup components

Browse source
This commit is contained in:
Hazelnoot 2025-05-29 12:41:36 -04:00
parent 197d9db8e6
commit 7a003dec73
5 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/frontend/src/components/MkDateSeparatedList.vue
View file

@ -16,6 +16,7 @@ import { instance } from '@/instance.js';
import { prefer } from '@/preferences.js';
import { getDateText } from '@/utility/timeline-date-separate.js';
import { $i } from '@/i.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
export default defineComponent({
props: {
@ -146,14 +147,12 @@ export default defineComponent({
[$style['direction-up']]: props.direction === 'up',
};
return () => prefer.s.animation ? h(TransitionGroup, {
return () => h(SkTransitionGroup, {
class: classes,
name: 'list',
tag: 'div',
onBeforeLeave,
onLeaveCancelled,
}, { default: renderChildren }) : h('div', {
class: classes,
}, { default: renderChildren });
},
});

7
packages/frontend/src/components/MkNotifications.vue
View file

@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template #default="{ items: notifications }">
<component
:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
<SkTransitionGroup
:class="[$style.notifications]"
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<DynamicNote v-if="['reply', 'quote', 'mention'].includes(notification.type)" :class="$style.item" :note="notification.note" :withHardMute="true" :data-scroll-anchor="notification.id"/>
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
</div>
</component>
</SkTransitionGroup>
</template>
</MkPagination>
</MkPullToRefresh>
@ -45,6 +45,7 @@ import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = defineProps<{
excludeTypes?: typeof notificationTypes[number][];

6
packages/frontend/src/components/MkReactionsViewer.vue
View file

@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
@ -15,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
>
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
<slot v-if="hasMoreReactions" :key="'$more'" name="more"/>
</component>
</SkTransitionGroup>
</template>
<script lang="ts" setup>
@ -25,6 +24,7 @@ import { TransitionGroup } from 'vue';
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
import { prefer } from '@/preferences.js';
import { DI } from '@/di.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
note: Misskey.entities.Note;

6
packages/frontend/src/components/MkTimeline.vue
View file

@ -14,8 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<template #default="{ items: notes }">
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
@ -33,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<DynamicNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
</div>
</component>
</SkTransitionGroup>
</template>
</MkPagination>
</MkPullToRefresh>
@ -54,6 +53,7 @@ import DynamicNote from '@/components/DynamicNote.vue';
import MkPagination from '@/components/MkPagination.vue';
import { i18n } from '@/i18n.js';
import { infoImageUrl } from '@/instance.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{
src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';

6
packages/frontend/src/ui/_common_/common.vue
View file

@ -67,8 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XUpload v-if="uploads.length > 0"/>
<component
:is="prefer.s.animation ? TransitionGroup : 'div'"
<SkTransitionGroup
tag="div"
:class="[$style.notifications, {
[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
@ -87,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{ pointerEvents: getPointerEvents() }">
<XNotification :notification="notification"/>
</div>
</component>
</SkTransitionGroup>
<XStreamIndicator/>
@ -115,6 +114,7 @@ import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js';
import { globalEvents } from '@/events.js';
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
const XUpload = defineAsyncComponent(() => import('./upload.vue'));