mirror of
https://git.joinsharkey.org/Sharkey/Sharkey.git
synced 2024-11-10 02:23:09 +02:00
🎨
This commit is contained in:
parent
b055f516c0
commit
b5fa8767da
1 changed files with 29 additions and 19 deletions
|
@ -1,23 +1,33 @@
|
|||
<template>
|
||||
<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
|
||||
<div :class="$style.tabsInner">
|
||||
<button v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
|
||||
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)">
|
||||
<div :class="$style.tabInner">
|
||||
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
|
||||
<div v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
|
||||
:class="$style.tabTitle">{{ t.title }}</div>
|
||||
<Transition v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
|
||||
@after-leave="afterLeave">
|
||||
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
|
||||
</Transition>
|
||||
<div ref="el" :class="$style.tabs" @wheel="onTabWheel">
|
||||
<div :class="$style.tabsInner">
|
||||
<button
|
||||
v-for="t in tabs" :ref="(el) => tabRefs[t.key] = (el as HTMLElement)" v-tooltip.noDelay="t.title"
|
||||
class="_button" :class="[$style.tab, { [$style.active]: t.key != null && t.key === props.tab, [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
@mousedown="(ev) => onTabMousedown(t, ev)" @click="(ev) => onTabClick(t, ev)"
|
||||
>
|
||||
<div :class="$style.tabInner">
|
||||
<i v-if="t.icon" :class="[$style.tabIcon, t.icon]"></i>
|
||||
<div
|
||||
v-if="!t.iconOnly || (!defaultStore.reactiveState.animation.value && t.key === tab)"
|
||||
:class="$style.tabTitle"
|
||||
>
|
||||
{{ t.title }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div ref="tabHighlightEl"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"></div>
|
||||
<Transition
|
||||
v-else mode="in-out" @enter="enter" @after-enter="afterEnter" @leave="leave"
|
||||
@after-leave="afterLeave"
|
||||
>
|
||||
<div v-show="t.key === tab" :class="[$style.tabTitle, $style.animate]">{{ t.title }}</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="tabHighlightEl"
|
||||
:class="[$style.tabHighlight, { [$style.animate]: defaultStore.reactiveState.animation.value }]"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -206,8 +216,8 @@ onUnmounted(() => {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.tabIcon+.tabTitle {
|
||||
padding-left: 8px;
|
||||
.tabIcon + .tabTitle {
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.tabTitle {
|
||||
|
|
Loading…
Reference in a new issue