From 7474ba62be8df2e2035c7b58ad0753a0c19d97c5 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Tue, 24 Oct 2023 20:35:54 +0900
Subject: [PATCH] =?UTF-8?q?=E5=85=B1=E9=80=9A=E3=82=B9=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E3=81=8F=E3=81=8F=E3=82=8A=E3=81=A0=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkLaunchPad.vue   | 26 ++++-------------
 packages/frontend/src/style.scss              | 19 +++++++++++++
 packages/frontend/src/ui/_common_/navbar.vue  | 28 ++++++-------------
 packages/frontend/src/ui/classic.sidebar.vue  | 20 +------------
 packages/frontend/src/ui/deck.vue             | 22 +++------------
 packages/frontend/src/ui/universal.vue        | 22 +++------------
 6 files changed, 42 insertions(+), 95 deletions(-)

diff --git a/packages/frontend/src/components/MkLaunchPad.vue b/packages/frontend/src/components/MkLaunchPad.vue
index 32ed36e191..804defd021 100644
--- a/packages/frontend/src/components/MkLaunchPad.vue
+++ b/packages/frontend/src/components/MkLaunchPad.vue
@@ -7,17 +7,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModal ref="modal" v-slot="{ type, maxHeight }" :preferType="preferedModalType" :anchor="anchor" :transparentBg="true" :src="src" @click="modal.close()" @closed="emit('closed')">
 	<div class="szkkfdyq _popup _shadow" :class="{ asDrawer: type === 'drawer' }" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : '' }">
 		<div class="main">
-			<template v-for="item in items">
-				<button v-if="item.action" :key="item.text" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
+			<template v-for="item in items" :key="item.text">
+				<button v-if="item.action" v-click-anime class="_button item" @click="$event => { item.action($event); close(); }">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
+					<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
 					<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</button>
-				<MkA v-else :key="item.text" v-click-anime :to="item.to" class="item" @click.passive="close()">
+				<MkA v-else v-click-anime :to="item.to" class="item" @click.passive="close()">
 					<i class="icon" :class="item.icon"></i>
 					<div class="text">{{ item.text }}</div>
-					<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
+					<span v-if="item.indicate && item.indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter indicatorWithValue"><span>{{ item.indicateValue }}</span></span>
 					<span v-else-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
@@ -123,27 +123,11 @@ function close() {
 				position: absolute;
 				top: 32px;
 				left: 16px;
-				font-size: 8px;
-				display: inline-flex;
-				color: var(--fgOnAccent);
-				font-weight: 700;
-				background: var(--indicator);
-				height: 1.5em;
-				min-width: 1.5em;
-				align-items: center;
-				justify-content: center;
-				border-radius: 99rem;
 
 				@media (max-width: 500px) {
 					top: 16px;
 					left: 8px;
 				}
-
-				> span {
-					display: inline-block;
-					padding: 0 .25em;
-					line-height: 1.5em;
-				}
 			}
 
 			> .indicator {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index c644fc76da..6b18305b4e 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -155,6 +155,25 @@ hr {
 	background: currentColor;
 }
 
+._indicateCounter {
+	display: inline-flex;
+	color: var(--fgOnAccent);
+	font-weight: 700;
+	background: var(--indicator);
+	height: 1.5em;
+	min-width: 1.5em;
+	align-items: center;
+	justify-content: center;
+	border-radius: 99rem;
+
+	> span {
+		display: inline-block;
+		padding: .125em .25em;
+		line-height: 1.5em;
+		font-size: 1em;
+	}
+}
+
 ._noSelect {
 	user-select: none;
 	-webkit-user-select: none;
diff --git a/packages/frontend/src/ui/_common_/navbar.vue b/packages/frontend/src/ui/_common_/navbar.vue
index 182a81c4b9..9a23584f08 100644
--- a/packages/frontend/src/ui/_common_/navbar.vue
+++ b/packages/frontend/src/ui/_common_/navbar.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				>
 					<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
 					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
-						<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
+						<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
 						<i v-else class="_indicatorCircle"></i>
 					</span>
 				</component>
@@ -133,24 +133,6 @@ function more(ev: MouseEvent) {
 	flex-direction: column;
 }
 
-.itemIndicateValueIcon {
-	display: inline-flex;
-	color: var(--fgOnAccent);
-	font-weight: 700;
-	background: var(--navIndicator);
-	height: 1.5em;
-	min-width: 1.5em;
-	align-items: center;
-	justify-content: center;
-	border-radius: 99rem;
-
-	& > span {
-		display: inline-block;
-		padding: 0 .25em;
-		line-height: 1.5em;
-	}
-}
-
 .root:not(.iconOnly) {
 	.body {
 		width: var(--nav-width);
@@ -338,6 +320,7 @@ function more(ev: MouseEvent) {
 			animation: none;
 			left: auto;
 			right: 40px;
+			font-size: 10px;
 		}
 	}
 
@@ -502,6 +485,13 @@ function more(ev: MouseEvent) {
 		color: var(--navIndicator);
 		font-size: 8px;
 		animation: blink 1s infinite;
+
+		&:has(.itemIndicateValueIcon) {
+			animation: none;
+			top: 4px;
+			left: 20px;
+			font-size: 10px;
+		}
 	}
 }
 </style>
diff --git a/packages/frontend/src/ui/classic.sidebar.vue b/packages/frontend/src/ui/classic.sidebar.vue
index 77711707e3..abcedfa920 100644
--- a/packages/frontend/src/ui/classic.sidebar.vue
+++ b/packages/frontend/src/ui/classic.sidebar.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" v-click-anime class="item _button" :class="item" activeClass="active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
 			<i class="ti-fw" :class="navbarItemDef[item].icon"></i><span class="text">{{ navbarItemDef[item].title }}</span>
 			<span v-if="navbarItemDef[item].indicated" class="indicator">
-				<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
+				<span v-if="navbarItemDef[item].indicateValue && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter itemIndicateValueIcon"><span>{{ navbarItemDef[item].indicateValue }}</span></span>
 				<i v-else class="_indicatorCircle"></i>
 			</span>
 		</component>
@@ -227,24 +227,6 @@ watch(defaultStore.reactiveState.menuDisplay, () => {
 				left: auto;
 				right: 20px;
 			}
-
-			& > .itemIndicateValueIcon {
-				display: inline-flex;
-				color: var(--fgOnAccent);
-				font-weight: 700;
-				background: var(--navIndicator);
-				height: 1.5em;
-				min-width: 1.5em;
-				align-items: center;
-				justify-content: center;
-				border-radius: 99rem;
-
-				& > span {
-					display: inline-block;
-					padding: 0 .25em;
-					line-height: 1.5em;
-				}
-			}
 		}
 
 		&:hover {
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 34e394987c..13d6b23eb8 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -55,7 +55,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
 			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
 			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
-				<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
+				<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
 				<i v-else class="_indicatorCircle"></i>
 			</span>
 		</button>
@@ -491,24 +491,10 @@ body {
 	color: var(--indicator);
 	font-size: 16px;
 	animation: blink 1s infinite;
-}
 
-.navButtonIndicateValueIcon {
-	display: inline-flex;
-	color: var(--fgOnAccent);
-	font-weight: 700;
-	background: var(--navIndicator);
-	height: 1em;
-	min-width: 1em;
-	align-items: center;
-	justify-content: center;
-	border-radius: 99rem;
-
-	& > span {
-		display: inline-block;
-		padding: 0 .25em;
-		font-size: .75em;
-		line-height: 1em;
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
 	}
 }
 </style>
diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index c54bd59f17..b776755dc1 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
 			<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
 			<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
-				<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" :class="$style.navButtonIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
+				<span v-if="$i?.unreadNotificationCount && defaultStore.state.showUnreadNotificationCount" class="_indicateCounter" :class="$style.itemIndicateValueIcon"><span>{{ $i.unreadNotificationCount > 99 ? '99+' : $i.unreadNotificationCount }}</span></span>
 				<i v-else class="_indicatorCircle"></i>
 			</span>
 		</button>
@@ -450,24 +450,10 @@ $widgets-hide-threshold: 1090px;
 	color: var(--indicator);
 	font-size: 16px;
 	animation: blink 1s infinite;
-}
 
-.navButtonIndicateValueIcon {
-	display: inline-flex;
-	color: var(--fgOnAccent);
-	font-weight: 700;
-	background: var(--navIndicator);
-	height: 1em;
-	min-width: 1em;
-	align-items: center;
-	justify-content: center;
-	border-radius: 99rem;
-
-	& > span {
-		display: inline-block;
-		padding: 0 .25em;
-		font-size: .75em;
-		line-height: 1em;
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
 	}
 }