ヘッダーに表示されるタブのインジケーターを実装 (#6803)

* Implemente indicators on headers

* 微調整

1 files changed, 14 insertions, 2 deletions

diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index af7f1c2b6a..87a5621902 100644
--- a/src/client/ui/_common_/header.vue
+++ b/src/client/ui/_common_/header.vue
@@ -9,6 +9,7 @@
 				<div class="title" v-for="tab in info.tabs" :key="tab.id" :class="{ _button: tab.onClick, selected: tab.selected }" @click.stop="tab.onClick" v-tooltip="tab.tooltip">
 					<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
 					<span v-if="tab.title" class="text">{{ tab.title }}</span>
+					<Fa class="indicator" v-if="tab.indicate" :icon="faCircle"/>
 				</div>
 			</template>
 			<template v-else>
@@ -27,7 +28,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft, faCircle } from '@fortawesome/free-solid-svg-icons';
 
 export default defineComponent({
 	props: {
@@ -45,7 +46,7 @@ export default defineComponent({
 		return {
 			canBack: false,
 			height: 0,
-			faChevronLeft
+			faChevronLeft, faCircle
 		};
 	},
 
@@ -131,6 +132,17 @@ export default defineComponent({
 			overflow: hidden;
 			text-overflow: ellipsis;
 			padding: 0 16px;
+			position: relative;
+
+			> .indicator {
+				position: absolute;
+				top: initial;
+				right: 8px;
+				top: 8px;
+				color: var(--indicator);
+				font-size: 12px;
+				animation: blink 1s infinite;
+			}
 
 			> .icon + .text {
 				margin-left: 8px;