MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): tabs display

This commit is contained in:
ArneBo 2025-01-18 19:17:59 +01:00
parent 040b9df215
commit 374e0c3313
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/components/ui/Tabs.vue
View File

@ -2,6 +2,8 @@
import { TABS_INJECTION_KEY } from '~/injection-keys' import { TABS_INJECTION_KEY } from '~/injection-keys'
import { provide, reactive, ref, watch } from 'vue' import { provide, reactive, ref, watch } from 'vue'
import Button from "~/components/ui/Button.vue";
const currentTab = ref() const currentTab = ref()
const tabs = reactive([] as string[]) const tabs = reactive([] as string[])
const icons = reactive([] as string[]) const icons = reactive([] as string[])
@ -22,15 +24,16 @@ watch(() => tabs.length, (to, from) => {
<template> <template>
<div class="funkwhale tabs"> <div class="funkwhale tabs">
<div class="tabs-header"> <div class="tabs-header">
<button <Button
v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }" v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }"
ghost
@click="currentTab = tab" @click="currentTab = tab"
@keydown.left="currentTab = tabs[(tabs.findIndex(t => t === currentTab) - 1 + tabs.length) % tabs.length]" @keydown.left="currentTab = tabs[(tabs.findIndex(t => t === currentTab) - 1 + tabs.length) % tabs.length]"
@keydown.right="currentTab = tabs[(tabs.findIndex(t => t === currentTab) + 1) % tabs.length]" class="tabs-item"> @keydown.right="currentTab = tabs[(tabs.findIndex(t => t === currentTab) + 1) % tabs.length]" class="tabs-item">
<div class="is-spacing">{{ tab }}</div> <div class="is-spacing">{{ tab }}</div>
<label v-if="icons[index]" class="is-icon">{{ icons[index] }}</label> <label v-if="icons[index]" class="is-icon">{{ icons[index] }}</label>
<label>{{ tab }}</label> <label>{{ tab }}</label>
</button> </Button>
<div class="tabs-right"> <div class="tabs-right">
<slot name="tabs-right" /> <slot name="tabs-right" />

22
front/src/components/ui/tabs.scss
View File

@ -22,13 +22,31 @@
outline:1px dotted currentColor; outline:1px dotted currentColor;
} }
> .tabs-item { > button.tabs-item {
font-size: 1rem; font-size: 1rem;
padding: 8px; padding: 8px;
min-width: 96px; min-width: 96px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
font-weight: normal;
border: none;
&:hover {
background-color: transparent;
&::after {
content: '';
display: block;
height: 4px;
background-color: var(--fw-secondary);
margin: 0 auto;
width: calc(10% + 2rem);
position: absolute;
inset: auto 0 0px 0;
border-radius: 100vh;
}
}
.is-spacing { .is-spacing {
height: 0; height: 0;
@ -53,7 +71,7 @@
margin: 0 auto; margin: 0 auto;
width: calc(10% + 2rem); width: calc(10% + 2rem);
position: absolute; position: absolute;
inset: auto 0 -2.5px 0; inset: auto 0 0px 0;
border-radius: 100vh; border-radius: 100vh;
} }
} }