diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2025-05-11 15:43:16 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-05-11 15:43:16 +0900 |
| commit | 3df421da1a27d76f11f3b43c8b1fc06f98ccdad6 (patch) | |
| tree | 5d5cf1133c154c55483acef26c193e772a5340ea /packages/frontend/src/ui | |
| parent | 🎨 (diff) | |
| download | misskey-3df421da1a27d76f11f3b43c8b1fc06f98ccdad6.tar.gz misskey-3df421da1a27d76f11f3b43c8b1fc06f98ccdad6.tar.bz2 misskey-3df421da1a27d76f11f3b43c8b1fc06f98ccdad6.zip | |
refactor(frontend): MkMarquee のコードの可読性の向上 (#16017)
* fix(frontend/MkMarquee): Composition API に移行
* move animation to scoped environment
* refactor
---------
Co-authored-by: taiyme <53635909+taiyme@users.noreply.github.com>
Diffstat (limited to 'packages/frontend/src/ui')
3 files changed, 9 insertions, 9 deletions
diff --git a/packages/frontend/src/ui/_common_/statusbar-federation.vue b/packages/frontend/src/ui/_common_/statusbar-federation.vue index 16e72fa227..7248e8826b 100644 --- a/packages/frontend/src/ui/_common_/statusbar-federation.vue +++ b/packages/frontend/src/ui/_common_/statusbar-federation.vue @@ -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'; diff --git a/packages/frontend/src/ui/_common_/statusbar-rss.vue b/packages/frontend/src/ui/_common_/statusbar-rss.vue index 4da89a181e..7db0d5267d 100644 --- a/packages/frontend/src/ui/_common_/statusbar-rss.vue +++ b/packages/frontend/src/ui/_common_/statusbar-rss.vue @@ -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'; diff --git a/packages/frontend/src/ui/_common_/statusbar-user-list.vue b/packages/frontend/src/ui/_common_/statusbar-user-list.vue index c5bee51162..13139a1064 100644 --- a/packages/frontend/src/ui/_common_/statusbar-user-list.vue +++ b/packages/frontend/src/ui/_common_/statusbar-user-list.vue @@ -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'; |