mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-27 01:33:09 +02:00
ヘッダーに表示されるタブのインジケーターを実装 (#6803)
* Implemente indicators on headers * 微調整
This commit is contained in:
parent
c6dd932a0b
commit
1fcfd8e645
1 changed files with 14 additions and 2 deletions
|
@ -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">
|
<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"/>
|
<Fa v-if="tab.icon" :icon="tab.icon" :key="tab.icon" class="icon"/>
|
||||||
<span v-if="tab.title" class="text">{{ tab.title }}</span>
|
<span v-if="tab.title" class="text">{{ tab.title }}</span>
|
||||||
|
<Fa class="indicator" v-if="tab.indicate" :icon="faCircle"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
@ -27,7 +28,7 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
|
import { faChevronLeft, faCircle } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
props: {
|
props: {
|
||||||
|
@ -45,7 +46,7 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
canBack: false,
|
canBack: false,
|
||||||
height: 0,
|
height: 0,
|
||||||
faChevronLeft
|
faChevronLeft, faCircle
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -131,6 +132,17 @@ export default defineComponent({
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
padding: 0 16px;
|
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 {
|
> .icon + .text {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
|
|
Loading…
Reference in a new issue