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

feat(front): Implement header component in playlists list

This commit is contained in:
ArneBo 2025-01-27 13:51:24 +01:00
parent 5fae9acab8
commit 557e485166
2 changed files with 9 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/components/ui/Header.vue
View File

@ -31,7 +31,7 @@ const { style, ...fallthroughProps } = useAttrs()
</div> </div>
<Layout stack no-gap style="flex-grow: 1;"> <Layout stack no-gap style="flex-grow: 1;">
<Layout flex no-gap <Layout flex no-gap
style="align-self: baseline;" style="align-self: stretch;"
> >
<!-- Set distance between baseline and previous row --> <!-- Set distance between baseline and previous row -->
<Spacer v <Spacer v
@ -42,8 +42,7 @@ const { style, ...fallthroughProps } = useAttrs()
<Spacer grow /> <Spacer grow />
<!-- Action! You can either specify `to` or `onClick`. --> <!-- Action! You can either specify `to` or `onClick`. -->
<component v-if="action" :is="'onClick' in action ? actionComponents.Button : actionComponents.Link" <component v-if="action" :is="'onClick' in action ? actionComponents.Button : actionComponents.Link"
ghost force-underline thin-font min-content align-self="baseline" force-underline thin-font min-content align-self="baseline"
:style="`margin-right: ${('primary' in props || 'secondary' in props || 'destructive' in props) ? '0px' : '-16px'}`"
v-bind="{...fallthroughProps, ...action}" v-bind="{...fallthroughProps, ...action}"
> >
{{ action?.text }} {{ action?.text }}

19
front/src/views/playlists/List.vue
View File

@ -20,6 +20,7 @@ import Button from '~/components/ui/Button.vue'
import Input from '~/components/ui/Input.vue' import Input from '~/components/ui/Input.vue'
import Alert from '~/components/ui/Alert.vue' import Alert from '~/components/ui/Alert.vue'
import Spacer from '~/components/ui/Spacer.vue' import Spacer from '~/components/ui/Spacer.vue'
import Header from '~/components/ui/Header.vue'
import useSharedLabels from '~/composables/locale/useSharedLabels' import useSharedLabels from '~/composables/locale/useSharedLabels'
import useOrdering from '~/composables/navigation/useOrdering' import useOrdering from '~/composables/navigation/useOrdering'
@ -111,20 +112,12 @@ const paginateOptions = computed(() => sortedUniq([12, 30, 50, paginateBy.value]
<template> <template>
<Layout stack main> <Layout stack main>
<Layout <Header
flex :h1="t('views.playlists.List.header.browse')"
style="justify-content: space-between;" :action="{ onClick: () => store.commit('playlists/showModal', true), text: t('views.playlists.List.button.manage') }"
v-if="store.state.auth.authenticated"
>
<h1>{{ t('views.playlists.List.header.browse') }}</h1>
<Button
primary
icon="bi-music-note-list" icon="bi-music-note-list"
@click="store.commit('playlists/showModal', true)" primary
> />
{{ t('views.playlists.List.button.manage') }}
</Button>
</Layout>
<template > <template >
</template> </template>