mirror of
https://codeberg.org/yeentown/barkey.git
synced 2025-07-07 20:44:34 +00:00
merge: Factor out TransitionGroup dynamic switching into a dedicated component (!1053)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1053 Approved-by: dakkar <dakkar@thenautilus.net> Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
commit
c1af8dfb7f
11 changed files with 92 additions and 42 deletions
|
@ -16,6 +16,7 @@ import { instance } from '@/instance.js';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
import { getDateText } from '@/utility/timeline-date-separate.js';
|
import { getDateText } from '@/utility/timeline-date-separate.js';
|
||||||
import { $i } from '@/i.js';
|
import { $i } from '@/i.js';
|
||||||
|
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
|
@ -146,14 +147,12 @@ export default defineComponent({
|
||||||
[$style['direction-up']]: props.direction === 'up',
|
[$style['direction-up']]: props.direction === 'up',
|
||||||
};
|
};
|
||||||
|
|
||||||
return () => prefer.s.animation ? h(TransitionGroup, {
|
return () => h(SkTransitionGroup, {
|
||||||
class: classes,
|
class: classes,
|
||||||
name: 'list',
|
name: 'list',
|
||||||
tag: 'div',
|
tag: 'div',
|
||||||
onBeforeLeave,
|
onBeforeLeave,
|
||||||
onLeaveCancelled,
|
onLeaveCancelled,
|
||||||
}, { default: renderChildren }) : h('div', {
|
|
||||||
class: classes,
|
|
||||||
}, { default: renderChildren });
|
}, { default: renderChildren });
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -14,8 +14,8 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #default="{ items: notifications }">
|
<template #default="{ items: notifications }">
|
||||||
<component
|
<SkTransitionGroup
|
||||||
:is="prefer.s.animation ? TransitionGroup : 'div'" :class="[$style.notifications]"
|
:class="[$style.notifications]"
|
||||||
:enterActiveClass="$style.transition_x_enterActive"
|
:enterActiveClass="$style.transition_x_enterActive"
|
||||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||||
:enterFromClass="$style.transition_x_enterFrom"
|
: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"/>
|
<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"/>
|
<XNotification v-else :class="$style.item" :notification="notification" :withTime="true" :full="true" :data-scroll-anchor="notification.id"/>
|
||||||
</div>
|
</div>
|
||||||
</component>
|
</SkTransitionGroup>
|
||||||
</template>
|
</template>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
</MkPullToRefresh>
|
</MkPullToRefresh>
|
||||||
|
@ -45,6 +45,7 @@ import { i18n } from '@/i18n.js';
|
||||||
import { infoImageUrl } from '@/instance.js';
|
import { infoImageUrl } from '@/instance.js';
|
||||||
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
import MkPullToRefresh from '@/components/MkPullToRefresh.vue';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
|
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
excludeTypes?: typeof notificationTypes[number][];
|
excludeTypes?: typeof notificationTypes[number][];
|
||||||
|
|
|
@ -4,8 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<component
|
<SkTransitionGroup
|
||||||
:is="prefer.s.animation ? TransitionGroup : 'div'"
|
|
||||||
:enterActiveClass="$style.transition_x_enterActive"
|
:enterActiveClass="$style.transition_x_enterActive"
|
||||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||||
:enterFromClass="$style.transition_x_enterFrom"
|
:enterFromClass="$style.transition_x_enterFrom"
|
||||||
|
@ -14,8 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
tag="div" :class="$style.root"
|
tag="div" :class="$style.root"
|
||||||
>
|
>
|
||||||
<XReaction v-for="[reaction, count] in reactions" :key="reaction" :reaction="reaction" :count="count" :isInitial="initialReactions.has(reaction)" :note="note" @reactionToggled="onMockToggleReaction"/>
|
<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"/>
|
<div v-if="hasMoreReactions" :key="'$more'" :class="$style.moreReactions">
|
||||||
</component>
|
<slot name="more"/>
|
||||||
|
</div>
|
||||||
|
</SkTransitionGroup>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -25,6 +26,7 @@ import { TransitionGroup } from 'vue';
|
||||||
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
|
import XReaction from '@/components/MkReactionsViewer.reaction.vue';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
import { DI } from '@/di.js';
|
import { DI } from '@/di.js';
|
||||||
|
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
note: Misskey.entities.Note;
|
note: Misskey.entities.Note;
|
||||||
|
@ -102,7 +104,7 @@ watch([() => props.note.reactions, () => props.maxNumber], ([newSource, maxNumbe
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.root {
|
.root, .moreReactions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
@ -14,8 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template #default="{ items: notes }">
|
<template #default="{ items: notes }">
|
||||||
<component
|
<SkTransitionGroup
|
||||||
:is="prefer.s.animation ? TransitionGroup : 'div'"
|
|
||||||
:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
|
:class="[$style.root, { [$style.noGap]: noGap, '_gaps': !noGap, [$style.reverse]: paginationQuery.reversed }]"
|
||||||
:enterActiveClass="$style.transition_x_enterActive"
|
:enterActiveClass="$style.transition_x_enterActive"
|
||||||
:leaveActiveClass="$style.transition_x_leaveActive"
|
:leaveActiveClass="$style.transition_x_leaveActive"
|
||||||
|
@ -33,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
</div>
|
</div>
|
||||||
<DynamicNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
|
<DynamicNote v-else :class="$style.note" :note="note" :withHardMute="true" :data-scroll-anchor="note.id"/>
|
||||||
</div>
|
</div>
|
||||||
</component>
|
</SkTransitionGroup>
|
||||||
</template>
|
</template>
|
||||||
</MkPagination>
|
</MkPagination>
|
||||||
</MkPullToRefresh>
|
</MkPullToRefresh>
|
||||||
|
@ -54,6 +53,7 @@ import DynamicNote from '@/components/DynamicNote.vue';
|
||||||
import MkPagination from '@/components/MkPagination.vue';
|
import MkPagination from '@/components/MkPagination.vue';
|
||||||
import { i18n } from '@/i18n.js';
|
import { i18n } from '@/i18n.js';
|
||||||
import { infoImageUrl } from '@/instance.js';
|
import { infoImageUrl } from '@/instance.js';
|
||||||
|
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
|
src: BasicTimelineType | 'mentions' | 'directs' | 'list' | 'antenna' | 'channel' | 'role';
|
||||||
|
|
43
packages/frontend/src/components/SkTransitionGroup.vue
Normal file
43
packages/frontend/src/components/SkTransitionGroup.vue
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
<!--
|
||||||
|
SPDX-FileCopyrightText: hazelnoot and other Sharkey contributors
|
||||||
|
SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<TransitionGroup v-if="animate ?? prefer.s.animation" v-bind="props" :class="props.class">
|
||||||
|
<slot></slot>
|
||||||
|
</TransitionGroup>
|
||||||
|
<component :is="tag" v-else :class="props.class">
|
||||||
|
<slot></slot>
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import type { TransitionGroupProps } from 'vue';
|
||||||
|
import { prefer } from '@/preferences';
|
||||||
|
|
||||||
|
// This is a "best guess" type.
|
||||||
|
// If any valid :class binding produces a type error here, then please change this to match.
|
||||||
|
type ClassBinding = string | Record<string, boolean | undefined>;
|
||||||
|
|
||||||
|
// This can be an inline type, but pulling it out makes TS errors clearer.
|
||||||
|
interface SkTransitionGroupProps extends TransitionGroupProps {
|
||||||
|
/**
|
||||||
|
* Override CSS styles for the TransitionGroup or native element.
|
||||||
|
*/
|
||||||
|
class?: undefined | ClassBinding | ClassBinding[];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* If true, will render a TransitionGroup.
|
||||||
|
* If false, will render a native element.
|
||||||
|
* If null or undefined (default), will respect the value of prefer.s.animation.
|
||||||
|
*/
|
||||||
|
animate?: boolean | undefined | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<SkTransitionGroupProps>(), {
|
||||||
|
tag: 'div',
|
||||||
|
class: undefined,
|
||||||
|
animate: undefined,
|
||||||
|
});
|
||||||
|
</script>
|
|
@ -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;
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -67,8 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
<XUpload v-if="uploads.length > 0"/>
|
<XUpload v-if="uploads.length > 0"/>
|
||||||
|
|
||||||
<component
|
<SkTransitionGroup
|
||||||
:is="prefer.s.animation ? TransitionGroup : 'div'"
|
|
||||||
tag="div"
|
tag="div"
|
||||||
:class="[$style.notifications, {
|
:class="[$style.notifications, {
|
||||||
[$style.notificationsPosition_leftTop]: prefer.s.notificationPosition === 'leftTop',
|
[$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() }">
|
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{ pointerEvents: getPointerEvents() }">
|
||||||
<XNotification :notification="notification"/>
|
<XNotification :notification="notification"/>
|
||||||
</div>
|
</div>
|
||||||
</component>
|
</SkTransitionGroup>
|
||||||
|
|
||||||
<XStreamIndicator/>
|
<XStreamIndicator/>
|
||||||
|
|
||||||
|
@ -115,6 +114,7 @@ import { i18n } from '@/i18n.js';
|
||||||
import { prefer } from '@/preferences.js';
|
import { prefer } from '@/preferences.js';
|
||||||
import { globalEvents } from '@/events.js';
|
import { globalEvents } from '@/events.js';
|
||||||
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
|
||||||
|
import SkTransitionGroup from '@/components/SkTransitionGroup.vue';
|
||||||
|
|
||||||
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
|
const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
|
||||||
const XUpload = defineAsyncComponent(() => import('./upload.vue'));
|
const XUpload = defineAsyncComponent(() => import('./upload.vue'));
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
|
@ -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';
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue