mirrors/misskey
1
0
Fork 1
mirror of https://github.com/misskey-dev/misskey.git synced 2026-05-14 09:55:38 +02:00
Code Releases Activity

refactor(frontend): MkMarquee のコードの可読性の向上 (#16017)

Browse Source 
* fix(frontend/MkMarquee): Composition API に移行

* move animation to scoped environment

* refactor

---------

Co-authored-by: taiyme <53635909+taiyme@users.noreply.github.com>
This commit is contained in:
かっこかり
2025-05-11 15:43:16 +09:00
committed by GitHub
parent 2ead6b8adc
commit 3df421da1a
7 changed files with 104 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/frontend/src/ui/_common_/statusbar-federation.vue
View File

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="instance in instances" :key="instance.id" :class="[$style.item, { [$style.colored]: colored }]" :style="{ background: colored ? instance.themeColor : null }">
<img :class="$style.icon" :src="getInstanceIcon(instance)" alt=""/>
<MkA :to="`/instance-info/${instance.host}`" :class="$style.host" class="_monospace">
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
<span></span>
</span>
</MarqueeText>
</MkMarqueeText>
</Transition>
</template>
<template v-else-if="display === 'oneByOne'">
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import MarqueeText from '@/components/MkMarquee.vue';
import MkMarqueeText from '@/components/MkMarqueeText.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useInterval } from '@@/js/use-interval.js';
import { getProxiedImageUrlNullable } from '@/utility/media-proxy.js';

6
packages/frontend/src/ui/_common_/statusbar-rss.vue
View File

@@ -13,11 +13,11 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="item in items" :class="$style.item">
<a :href="item.link" rel="nofollow noopener" target="_blank" :title="item.title">{{ item.title }}</a><span :class="$style.divider"></span>
</span>
</MarqueeText>
</MkMarqueeText>
</Transition>
</template>
<template v-else-if="display === 'oneByOne'">
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import MarqueeText from '@/components/MkMarquee.vue';
import MkMarqueeText from '@/components/MkMarqueeText.vue';
import { useInterval } from '@@/js/use-interval.js';
import { shuffle } from '@/utility/shuffle.js';

6
packages/frontend/src/ui/_common_/statusbar-user-list.vue
View File

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:leaveToClass="$style.transition_change_leaveTo"
mode="default"
>
<MarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<MkMarqueeText :key="key" :duration="marqueeDuration" :reverse="marqueeReverse">
<span v-for="note in notes" :key="note.id" :class="$style.item">
<img :class="$style.avatar" :src="note.user.avatarUrl" decoding="async"/>
<MkA :class="$style.text" :to="notePage(note)">
@@ -21,7 +21,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</MkA>
<span :class="$style.divider"></span>
</span>
</MarqueeText>
</MkMarqueeText>
</Transition>
</template>
<template v-else-if="display === 'oneByOne'">
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<script lang="ts" setup>
import { ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import MarqueeText from '@/components/MkMarquee.vue';
import MkMarqueeText from '@/components/MkMarqueeText.vue';
import { misskeyApi } from '@/utility/misskey-api.js';
import { useInterval } from '@@/js/use-interval.js';
import { getNoteSummary } from '@/utility/get-note-summary.js';