From ad62cadb7d972516459e76a7344f2a656e1594a2 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 27 Jun 2023 19:25:01 -0700
Subject: [PATCH] fix: :wheelchair: don't animate indicator dot if animation is
 off

Closes #10372
---
 .../client/src/components/MkLaunchPad.vue     | 19 ++++++++++--
 packages/client/src/components/MkMenu.vue     | 31 ++++++++++++++++---
 packages/client/src/style.scss                |  9 ++++++
 .../src/ui/_common_/navbar-for-mobile.vue     | 11 ++++++-
 packages/client/src/ui/_common_/navbar.vue    | 15 ++++++++-
 packages/client/src/ui/deck.vue               | 13 ++++++--
 packages/client/src/ui/universal.vue          | 17 ++++++++--
 7 files changed, 102 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index b1f42ec76b..bc268f2e95 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/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;
+			}
 		}
 	}
 
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index 2d8fde610b..dea14ef053 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/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;
 		}
 	}
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 966e44f924..d110e516e0 100644
--- a/packages/client/src/style.scss
+++ b/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 {
diff --git a/packages/client/src/ui/_common_/navbar-for-mobile.vue b/packages/client/src/ui/_common_/navbar-for-mobile.vue
index 39abb7c261..03a8e6d8a7 100644
--- a/packages/client/src/ui/_common_/navbar-for-mobile.vue
+++ b/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;
 				}
 
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 7905c331c7..f63be18cbe 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/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;
 					}
 
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 270a92a5ee..944ee17e5c 100644
--- a/packages/client/src/ui/deck.vue
+++ b/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;
 			}
 
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index c9e66cf345..e7a1f97f37 100644
--- a/packages/client/src/ui/universal.vue
+++ b/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;
 			}