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 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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/frontend/src/components/MkImgWithBlurhash.vue
View file

@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
<template> <template>
<div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''"> <div ref="root" :class="['chromatic-ignore', $style.root, { [$style.cover]: cover }]" :title="title ?? ''">
<TransitionGroup <SkTransitionGroup
:duration="prefer.s.animation && props.transition?.duration || undefined" :animate="props.transition != null"
:enterActiveClass="prefer.s.animation && props.transition?.enterActiveClass || undefined" :duration="props.transition?.duration"
:leaveActiveClass="prefer.s.animation && (props.transition?.leaveActiveClass ?? $style.transition_leaveActive) || undefined" :enterActiveClass="props.transition?.enterActiveClass"
:enterFromClass="prefer.s.animation && props.transition?.enterFromClass || undefined" :leaveActiveClass="(props.transition?.leaveActiveClass ?? $style.transition_leaveActive)"
:leaveToClass="prefer.s.animation && props.transition?.leaveToClass || undefined" :enterFromClass="props.transition?.enterFromClass"
:enterToClass="prefer.s.animation && props.transition?.enterToClass || undefined" :leaveToClass="props.transition?.leaveToClass"
:leaveFromClass="prefer.s.animation && props.transition?.leaveFromClass || undefined" :enterToClass="props.transition?.enterToClass"
:leaveFromClass="props.transition?.leaveFromClass"
> >
<canvas <canvas
v-show="hide" v-show="hide"
@ -42,7 +43,7 @@ SPDX-License-Identifier: AGPL-3.0-only
tabindex="-1" tabindex="-1"
style="-webkit-user-drag: none;" style="-webkit-user-drag: none;"
/> />
</TransitionGroup> </SkTransitionGroup>
</div> </div>
</template> </template>
@ -85,6 +86,7 @@ import { computed, nextTick, onMounted, onUnmounted, useTemplateRef, watch, ref
import { v4 as uuid } from 'uuid'; import { v4 as uuid } from 'uuid';
import { render } from 'buraha'; import { render } from 'buraha';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
transition?: { transition?: {

15
packages/frontend/src/components/global/StackingRouterView.vue
View file

@ -4,12 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<TransitionGroup <SkTransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''" :enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''" :leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''" :enterFromClass="$style.transition_x_enterFrom"
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''" :leaveToClass="$style.transition_x_leaveTo"
:moveClass="prefer.s.animation ? $style.transition_x_move : ''" :moveClass="$style.transition_x_move"
:duration="200" :duration="200"
tag="div" :class="$style.tabs" tag="div" :class="$style.tabs"
> >
@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
</TransitionGroup> </SkTransitionGroup>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -47,6 +47,7 @@ import { prefer } from '@/preferences.js';
import MkLoadingPage from '@/pages/_loading_.vue'; import MkLoadingPage from '@/pages/_loading_.vue';
import { DI } from '@/di.js'; import { DI } from '@/di.js';
import { deepEqual } from '@/utility/deep-equal.js'; import { deepEqual } from '@/utility/deep-equal.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const props = defineProps<{ const props = defineProps<{
router?: Router; router?: Router;

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 && '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> <MkA v-if="isSearchResult && 'toUser' in message && message.toUser != null && isMe" :to="`/chat/user/${message.toUserId}`">@{{ message.toUser.username }}</MkA>
</div> </div>
<TransitionGroup <SkTransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_reaction_enterActive : ''" :enterActiveClass="$style.transition_reaction_enterActive"
:leaveActiveClass="prefer.s.animation ? $style.transition_reaction_leaveActive : ''" :leaveActiveClass="$style.transition_reaction_leaveActive"
:enterFromClass="prefer.s.animation ? $style.transition_reaction_enterFrom : ''" :enterFromClass="$style.transition_reaction_enterFrom"
:leaveToClass="prefer.s.animation ? $style.transition_reaction_leaveTo : ''" :leaveToClass="$style.transition_reaction_leaveTo"
:moveClass="prefer.s.animation ? $style.transition_reaction_move : ''" :moveClass="$style.transition_reaction_move"
tag="div" :class="$style.reactions" 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)"> <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" :class="$style.reactionIcon"
/> />
</div> </div>
</TransitionGroup> </SkTransitionGroup>
</div> </div>
</div> </div>
</template> </template>
@ -73,6 +73,7 @@ import MkReactionIcon from '@/components/MkReactionIcon.vue';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { DI } from '@/di.js'; import { DI } from '@/di.js';
import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js'; import { getHTMLElementOrNull } from '@/utility/get-dom-node-or-null.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const $i = ensureSignin(); 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> <MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
</div> </div>
<TransitionGroup <SkTransitionGroup
:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''" :enterActiveClass="$style.transition_x_enterActive"
:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''" :leaveActiveClass="$style.transition_x_leaveActive"
:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''" :enterFromClass="$style.transition_x_enterFrom"
:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''" :leaveToClass="$style.transition_x_leaveTo"
:moveClass="prefer.s.animation ? $style.transition_x_move : ''" :moveClass="$style.transition_x_move"
tag="div" class="_gaps" tag="div" class="_gaps"
> >
<div v-for="item in timeline.toReversed()" :key="item.id"> <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> <span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
</div> </div>
</div> </div>
</TransitionGroup> </SkTransitionGroup>
</div> </div>
<div v-if="user && (!user.canChat || user.host !== null)"> <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 { useMutationObserver } from '@/use/use-mutation-observer.js';
import MkInfo from '@/components/MkInfo.vue'; import MkInfo from '@/components/MkInfo.vue';
import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js'; import { makeDateSeparatedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const $i = ensureSignin(); const $i = ensureSignin();
const router = useRouter(); const router = useRouter();

5
packages/frontend/src/widgets/WidgetFederation.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="wbrkwalb"> <div class="wbrkwalb">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="instances"> <SkTransitionGroup v-else tag="div" name="chart" class="instances">
<div v-for="(instance, i) in instances" :key="instance.id" class="instance"> <div v-for="(instance, i) in instances" :key="instance.id" class="instance">
<img :src="getInstanceIcon(instance)" alt=""/> <img :src="getInstanceIcon(instance)" alt=""/>
<div class="body"> <div class="body">
@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkMiniChart class="chart" :src="charts[i].requests.received"/> <MkMiniChart class="chart" :src="charts[i].requests.received"/>
</div> </div>
</TransitionGroup> </SkTransitionGroup>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -37,6 +37,7 @@ import { misskeyApi, misskeyApiGet } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js'; import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const name = 'federation'; const name = 'federation';

5
packages/frontend/src/widgets/WidgetTrends.vue
View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="wbrkwala"> <div class="wbrkwala">
<MkLoading v-if="fetching"/> <MkLoading v-if="fetching"/>
<TransitionGroup v-else tag="div" :name="prefer.s.animation ? 'chart' : ''" class="tags"> <SkTransitionGroup v-else tag="div" name="chart" class="tags">
<div v-for="stat in stats" :key="stat.tag"> <div v-for="stat in stats" :key="stat.tag">
<div class="tag"> <div class="tag">
<MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA> <MkA class="a" :to="`/tags/${ encodeURIComponent(stat.tag) }`" :title="stat.tag">#{{ stat.tag }}</MkA>
@ -18,7 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkMiniChart class="chart" :src="stat.chart"/> <MkMiniChart class="chart" :src="stat.chart"/>
</div> </div>
</TransitionGroup> </SkTransitionGroup>
</div> </div>
</MkContainer> </MkContainer>
</template> </template>
@ -35,6 +35,7 @@ import MkMiniChart from '@/components/MkMiniChart.vue';
import { misskeyApiGet } from '@/utility/misskey-api.js'; import { misskeyApiGet } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
const name = 'hashtags'; const name = 'hashtags';