fix: ♿ don't animate indicator dot if animation is off

Closes #10372

packages/client/src/components/MkLaunchPad.vue

@@ -29,7 +29,12 @@
 					>
 						<i class="icon" :class="item.icon"></i>
 						<div class="text">{{ item.text }}</div>
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</button>
@@ -41,7 +46,12 @@
 					>
 						<i class="icon" :class="item.icon"></i>
 						<div class="text">{{ item.text }}</div>
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</MkA>
@@ -163,13 +173,16 @@ function close() {
 				left: 32px;
 				color: var(--indicator);
 				font-size: 8px;
-				animation: blink 1s infinite;
 
 				@media (max-width: 500px) {
 					top: 16px;
 					left: 16px;
 				}
 			}
+
+			> .animateIndicator {
+				animation: blink 1s infinite;
+			}
 		}
 	}
 

packages/client/src/components/MkMenu.vue

@@ -52,7 +52,12 @@
 						<span :style="item.textStyle || ''">{{
 							item.text
 						}}</span>
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</MkA>
@@ -74,7 +79,12 @@
 						<span :style="item.textStyle || ''">{{
 							item.text
 						}}</span>
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</a>
@@ -92,7 +102,12 @@
 							class="avatar"
 							disableLink
 						/><MkUserName :user="item.user" />
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</button>
@@ -158,7 +173,12 @@
 						<span :style="item.textStyle || ''">{{
 							item.text
 						}}</span>
-						<span v-if="item.indicate" class="indicator"
+						<span
+							v-if="item.indicate"
+							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="ph-circle ph-fill"></i
 						></span>
 					</button>
@@ -483,6 +503,9 @@ onBeforeUnmount(() => {
 			left: 13px;
 			color: var(--indicator);
 			font-size: 12px;
+		}
+
+		> .animateIndicator {
 			animation: blink 1s infinite;
 		}
 	}

packages/client/src/style.scss

@@ -710,6 +710,15 @@ hr {
 			transform: scale3d(1, 1, 1);
 		}
 	}
+
+	@keyframes blink {
+		0% {
+			opacity: 1;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
 }
 
 ._anime_bounce {

packages/client/src/ui/_common_/navbar-for-mobile.vue

@@ -62,6 +62,9 @@
 						<span
 							v-if="navbarItemDef[item].indicated"
 							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="icon ph-circle ph-fill"></i
 						></span>
 					</component>
@@ -82,7 +85,10 @@
 						class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
 					></i
 					><span class="text">{{ i18n.ts.more }}</span>
-					<span v-if="otherMenuItemIndicated" class="indicator"
+					<span
+						v-if="otherMenuItemIndicated"
+						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
@@ -341,6 +347,9 @@ function more() {
 					left: 20px;
 					color: var(--navIndicator);
 					font-size: 8px;
+				}
+
+				> .animateIndicator {
 					animation: blink 1s infinite;
 				}
 

packages/client/src/ui/_common_/navbar.vue

@@ -66,6 +66,9 @@
 						<span
 							v-if="navbarItemDef[item].indicated"
 							class="indicator"
+							:class="{
+								animateIndicator: $store.state.animation,
+							}"
 							><i class="icon ph-circle ph-fill"></i
 						></span>
 					</component>
@@ -88,6 +91,7 @@
 							updateAvailable
 						"
 						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 					></span
 					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
@@ -102,7 +106,10 @@
 						class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"
 					></i
 					><span class="text">{{ i18n.ts.more }}</span>
-					<span v-if="otherMenuItemIndicated" class="indicator"
+					<span
+						v-if="otherMenuItemIndicated"
+						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 						><i class="icon ph-circle ph-fill"></i
 					></span>
 				</button>
@@ -419,6 +426,9 @@ function more(ev: MouseEvent) {
 						left: 20px;
 						color: var(--navIndicator);
 						font-size: 8px;
+					}
+
+					> .animateIndicator {
 						animation: blink 1s infinite;
 					}
 
@@ -602,6 +612,9 @@ function more(ev: MouseEvent) {
 						left: 24px;
 						color: var(--navIndicator);
 						font-size: 8px;
+					}
+
+					> .animateIndicator {
 						animation: blink 1s infinite;
 					}
 

packages/client/src/ui/deck.vue

@@ -119,7 +119,10 @@
 				@click="drawerMenuShowing = true"
 			>
 				<i class="ph-list ph-bold ph-lg"></i
-				><span v-if="menuIndicated" class="indicator"
+				><span
+					v-if="menuIndicated"
+					class="indicator"
+					:class="{ animateIndicator: $store.state.animation }"
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
@@ -136,7 +139,10 @@
 				@click="mainRouter.push('/my/notifications')"
 			>
 				<i class="ph-bell ph-bold ph-lg"></i
-				><span v-if="$i?.hasUnreadNotification" class="indicator"
+				><span
+					v-if="$i?.hasUnreadNotification"
+					class="indicator"
+					:class="{ animateIndicator: $store.state.animation }"
 					><i class="ph-circle ph-fill"></i
 				></span>
 			</button>
@@ -551,6 +557,9 @@ async function deleteProfile() {
 				left: 0;
 				color: var(--indicator);
 				font-size: 16px;
+			}
+
+			> .animateIndicator {
 				animation: blink 1s infinite;
 			}
 

packages/client/src/ui/universal.vue

@@ -39,7 +39,10 @@
 			>
 				<div class="button-wrapper">
 					<i class="ph-list ph-bold ph-lg"></i
-					><span v-if="menuIndicated" class="indicator"
+					><span
+						v-if="menuIndicated"
+						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -74,7 +77,10 @@
 					:class="buttonAnimIndex === 1 ? 'on' : ''"
 				>
 					<i class="ph-bell ph-bold ph-lg"></i
-					><span v-if="$i?.hasUnreadNotification" class="indicator"
+					><span
+						v-if="$i?.hasUnreadNotification"
+						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -95,6 +101,7 @@
 					><span
 						v-if="$i?.hasUnreadMessagingMessage"
 						class="indicator"
+						:class="{ animateIndicator: $store.state.animation }"
 						><i class="ph-circle ph-fill"></i
 					></span>
 				</div>
@@ -692,6 +699,9 @@ console.log(mainRouter.currentRoute.value.name);
 					left: 0;
 					color: var(--indicator);
 					font-size: 16px;
+				}
+
+				> .animateIndicator {
 					animation: blink 1s infinite;
 				}
 			}
@@ -713,6 +723,9 @@ console.log(mainRouter.currentRoute.value.name);
 				left: 0;
 				color: var(--indicator);
 				font-size: 16px;
+			}
+
+			> .animateIndicator {
 				animation: blink 1s infinite;
 			}