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

feat(ui) Tabs use new button component, correct spacing

This commit is contained in:
ArneBo 2025-01-05 15:48:13 +01:00 committed by upsiflu
parent 601cc3a663
commit 6a4aaada5c
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
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,14 +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 v-for="(tab, index) in tabs" :key="tab" :class="{ 'is-active': currentTab === tab }" <Button
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" />

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

@ -14,7 +14,7 @@
> .tabs-header { > .tabs-header {
display: flex; display: flex;
align-items: end; align-items: end;
padding-bottom: 0px; padding-bottom: 8px;
margin-bottom: 23px; margin-bottom: 23px;
border-bottom: 1px solid var(--fw-border-color); border-bottom: 1px solid var(--fw-border-color);