From 9ab703ab5eac41e93c3ca164ef173aa82b25d19f Mon Sep 17 00:00:00 2001 From: adzukimame <88547072+adzukimame@users.noreply.github.com> Date: Thu, 28 Nov 2024 23:11:40 +0900 Subject: [PATCH] =?UTF-8?q?cherry-pick:=20blink=E3=82=A2=E3=83=8B=E3=83=A1?= =?UTF-8?q?=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=8C=E5=8B=95=E4=BD=9C?= =?UTF-8?q?=E3=81=97=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E3=81=AE=E3=82=92?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3=20(#321)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(frontend): blinkアニメーションが動作していないのを修正 Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com> --- packages/frontend/src/components/MkLaunchPad.vue | 5 ++--- packages/frontend/src/components/MkMenu.vue | 9 ++++----- packages/frontend/src/style.scss | 6 +++++- packages/frontend/src/ui/_common_/navbar-for-mobile.vue | 5 ++--- packages/frontend/src/ui/_common_/navbar.vue | 6 ++---- packages/frontend/src/ui/deck.vue | 8 ++++---- packages/frontend/src/ui/universal.vue | 5 ++--- 7 files changed, 21 insertions(+), 23 deletions(-) diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue index 9261c7adb9cb..9fbbb9959e4d 100644 --- a/packages/frontend/src/components/MkLaunchPad.vue +++ b/packages/frontend/src/components/MkLaunchPad.vue @@ -12,13 +12,13 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ item.text }}
{{ item.indicateValue }} - +
{{ item.text }}
{{ item.indicateValue }} - + @@ -140,7 +140,6 @@ function close() { left: 32px; color: var(--MI_THEME-indicator); font-size: 8px; - animation: global-blink 1s infinite; @media (max-width: 500px) { top: 16px; diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue index 2a97661be0ca..8d8c0eede219 100644 --- a/packages/frontend/src/components/MkMenu.vue +++ b/packages/frontend/src/components/MkMenu.vue @@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ item.text }} - +
{{ item.text }} - +
@@ -637,7 +637,6 @@ onBeforeUnmount(() => { align-items: center; color: var(--MI_THEME-indicator); font-size: 12px; - animation: global-blink 1s infinite; } .divider { diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index da8c62307001..b0e9bb9e588c 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -488,7 +488,11 @@ html[data-color-scheme=dark] ._woodenFrame { transform: scale(0.9); } -@keyframes global-blink { +._blink { + animation: blink 1s infinite; +} + +@keyframes blink { 0% { opacity: 1; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 90% { opacity: 0; transform: scale(0.5); } diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue index 348d451c3c6f..162cc507c666 100644 --- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue +++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue @@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
{{ navbarItemDef[item].title }} - + {{ navbarItemDef[item].indicateValue }} @@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.settings }} @@ -257,7 +257,6 @@ function more() { left: 20px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue index 811bb4159e2d..be970f3d8d86 100644 --- a/packages/frontend/src/ui/_common_/navbar.vue +++ b/packages/frontend/src/ui/_common_/navbar.vue @@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}" > {{ navbarItemDef[item].title }} - + {{ navbarItemDef[item].indicateValue }} @@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only {{ i18n.ts.settings }} @@ -353,7 +353,6 @@ function more(ev: MouseEvent) { left: 20px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; @@ -558,7 +557,6 @@ function more(ev: MouseEvent) { left: 24px; color: var(--MI_THEME-navIndicator); font-size: 8px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue index c6ff47ae5faf..74e36aa40949 100644 --- a/packages/frontend/src/ui/deck.vue +++ b/packages/frontend/src/ui/deck.vue @@ -48,11 +48,11 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -94,6 +94,8 @@ import { computed, ref, shallowRef } from 'vue'; import { v4 as uuid } from 'uuid'; import XCommon from './_common_/common.vue'; import { deckStore, columnTypes, addColumn as addColumnToStore, loadDeck, getProfiles, deleteProfile as deleteProfile_ } from './deck/deck-store.js'; +import type { ColumnType } from './deck/deck-store.js'; +import type { MenuItem } from '@/types/menu.js'; import XSidebar from '@/ui/_common_/navbar.vue'; import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue'; import MkButton from '@/components/MkButton.vue'; @@ -115,7 +117,6 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue'; import XDirectColumn from '@/ui/deck/direct-column.vue'; import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue'; import { mainRouter } from '@/router/main.js'; -import { MenuItem } from '@/types/menu.js'; const columnComponents = { main: XMainColumn, @@ -479,7 +480,6 @@ body { left: 0; color: var(--MI_THEME-indicator); font-size: 16px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 5c36af816a33..f8a2012238a1 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -19,11 +19,11 @@ SPDX-License-Identifier: AGPL-3.0-only
- + @@ -447,7 +447,6 @@ $widgets-hide-threshold: 1090px; left: 0; color: var(--MI_THEME-indicator); font-size: 16px; - animation: global-blink 1s infinite; &:has(.itemIndicateValueIcon) { animation: none;