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 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;