misty.cafe/mistykey
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

use SkTransitionGroup in all locations that hardcode use of TransitionGroup

Browse source
This commit is contained in:
Hazelnoot 2025-05-29 12:43:12 -04:00
parent 2f91c66ba2
commit 18a6f47082
6 changed files with 41 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/pages/chat/XMessage.vue
View file

@ -28,12 +28,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkA v-if="isSearchResult && 'toRoom' in message && message.toRoom != null" :to="`/chat/room/${message.toRoomId}`">{{ message.toRoom.name }}</MkA>
<MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA>
</div>
<TransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''"
:moveClass="prefer.s.animation ? $style.transition_reaction_move : ''"
<SkTransitionGroup
:enterActiveClass="$style.transition_reaction_enterActive"
:leaveActiveClass="$style.transition_reaction_leaveActive"
:enterFromClass="$style.transition_reaction_enterFrom"
:leaveToClass="$style.transition_reaction_leaveTo"
:moveClass="$style.transition_reaction_move"
tag="div" :class="$style.reactions"
>
<div v-for="record in message.reactions" :key="record.reaction + record.user.id" :class="[$style.reaction, record.user.id === $i.id ? $style.reactionMy : null]" @click="onReactionClick(record)">
@ -45,7 +45,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:class="$style.reactionIcon"
/>
</div>
</TransitionGroup>
</SkTransitionGroup>
</div>
</div>
</template>
@ -73,6 +73,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
import { prefer } from '@/preferences.js';
import { DI } from '@/di.js';
import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const $i = ensureSignin();

15
packages/frontend/src/pages/chat/room.vue
View file

@ -31,12 +31,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
</div>
<TransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
<SkTransitionGroup
:enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="$style.transition_x_enterFrom"
:leaveToClass="$style.transition_x_leaveTo"
:moveClass="$style.transition_x_move"
tag="div" class="_gaps"
>
<div v-for="item in timeline.toReversed()" :key="item.id">
@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
</div>
</div>
</TransitionGroup>
</SkTransitionGroup>
</div>
<div v-if="user && (!user.canChat || user.host !== null)">
@ -111,6 +111,7 @@ import { useRouter } from '@/router.js';
import { useMutationObserver } from '@/use/use-mutation-observer.js';
import MkInfo from '@/components/MkInfo.vue';
import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const $i = ensureSignin();
const router = useRouter();