profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
* Implemente indicators on headers

* 微調整
This commit is contained in:
Xeltica 2020-11-07 12:31:23 +09:00 committed by GitHub
parent c6dd932a0b
commit 1fcfd8e645
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/client/ui/_common_/header.vue
View file

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