From 1fcfd8e64573f8437be0aacd4187284b356e4625 Mon Sep 17 00:00:00 2001
From: Xeltica <7106976+Xeltica@users.noreply.github.com>
Date: Sat, 7 Nov 2020 12:31:23 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=98=E3=83=83=E3=83=80=E3=83=BC=E3=81=AB?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=BF=E3=83=96?=
 =?UTF-8?q?=E3=81=AE=E3=82=A4=E3=83=B3=E3=82=B8=E3=82=B1=E3=83=BC=E3=82=BF?=
 =?UTF-8?q?=E3=83=BC=E3=82=92=E5=AE=9F=E8=A3=85=20(#6803)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Implemente indicators on headers

* 微調整
---
 src/client/ui/_common_/header.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue
index af7f1c2b6..87a562190 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;