mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-03 23:30:09 -05:00
[web] Create control for tab list
This commit is contained in:
Alain Nussbaumer
parent
6b0e57c221
commit
a82c80eb65
45
web-src/src/components/ControlTabList.vue
Normal file
45
web-src/src/components/ControlTabList.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<section class="section py-0 tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered my-0">
|
||||
<div class="column is-four-fifths py-0">
|
||||
<div class="tabs is-centered is-small">
|
||||
<ul>
|
||||
<router-link
|
||||
v-for="link in links"
|
||||
:key="link.to.name"
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: link.to.name }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" :name="link.icon" size="16" />
|
||||
<span class="is-hidden-mobile" v-text="$t(link.label)" />
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ControlTabList',
|
||||
props: { links: { required: true, type: Array } }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tabs-section {
|
||||
background: var(--bulma-body-background-color);
|
||||
position: sticky;
|
||||
top: var(--bulma-navbar-height);
|
||||
width: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
</style>
|
||||
@ -1,69 +1,33 @@
|
||||
<template>
|
||||
<section class="section tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered my-0">
|
||||
<div class="column is-four-fifths py-0">
|
||||
<div class="tabs is-centered is-small">
|
||||
<ul>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'audiobooks-artists' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon
|
||||
class="icon is-small"
|
||||
name="account-music"
|
||||
size="16"
|
||||
/>
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.audiobooks.tabs.authors')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'audiobooks-albums' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="album" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.audiobooks.tabs.audiobooks')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'audiobooks-genres' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="speaker" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.audiobooks.tabs.genres')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<control-tab-list :links="links" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ControlTabList from '@/components/ControlTabList.vue'
|
||||
|
||||
export default {
|
||||
name: 'TabsAudiobooks'
|
||||
name: 'TabsAudiobooks',
|
||||
components: { ControlTabList },
|
||||
computed: {
|
||||
links() {
|
||||
return [
|
||||
{
|
||||
to: { name: 'audiobooks-artists' },
|
||||
icon: 'account-music',
|
||||
label: 'page.audiobooks.tabs.authors'
|
||||
},
|
||||
{
|
||||
to: { name: 'audiobooks-albums' },
|
||||
icon: 'album',
|
||||
label: 'page.audiobooks.tabs.audiobooks'
|
||||
},
|
||||
{
|
||||
to: { name: 'audiobooks-genres' },
|
||||
icon: 'speaker',
|
||||
label: 'page.audiobooks.tabs.genres'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,130 +1,54 @@
|
||||
<template>
|
||||
<section class="section tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered my-0">
|
||||
<div class="column is-four-fifths py-0">
|
||||
<div class="tabs is-centered is-small">
|
||||
<ul>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-history' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="history" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.history')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-artists' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon
|
||||
class="icon is-small"
|
||||
name="account-music"
|
||||
size="16"
|
||||
/>
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.artists')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-albums' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="album" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.albums')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-genres' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="speaker" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.genres')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-composers' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon
|
||||
class="icon is-small"
|
||||
name="book-open-page-variant"
|
||||
size="16"
|
||||
/>
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.composers')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-if="spotify_enabled"
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'music-spotify' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<mdicon class="icon is-small" name="spotify" size="16" />
|
||||
<span
|
||||
class="is-hidden-mobile"
|
||||
v-text="$t('page.music.tabs.spotify')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<control-tab-list :links="links" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ControlTabList from '@/components/ControlTabList.vue'
|
||||
import { useServicesStore } from '@/stores/services'
|
||||
|
||||
export default {
|
||||
name: 'TabsMusic',
|
||||
|
||||
components: { ControlTabList },
|
||||
setup() {
|
||||
return { servicesStore: useServicesStore() }
|
||||
},
|
||||
|
||||
computed: {
|
||||
spotify_enabled() {
|
||||
return this.servicesStore.spotify.webapi_token_valid
|
||||
links() {
|
||||
const links = [
|
||||
{
|
||||
to: { name: 'music-history' },
|
||||
icon: 'history',
|
||||
label: 'page.music.tabs.history'
|
||||
},
|
||||
{
|
||||
to: { name: 'music-artists' },
|
||||
icon: 'account-music',
|
||||
label: 'page.music.tabs.artists'
|
||||
},
|
||||
{
|
||||
to: { name: 'music-albums' },
|
||||
icon: 'album',
|
||||
label: 'page.music.tabs.albums'
|
||||
},
|
||||
{
|
||||
to: { name: 'music-genres' },
|
||||
icon: 'speaker',
|
||||
label: 'page.music.tabs.genres'
|
||||
},
|
||||
{
|
||||
to: { name: 'music-composers' },
|
||||
icon: 'book-open-page-variant',
|
||||
label: 'page.music.tabs.composers'
|
||||
}
|
||||
]
|
||||
if (this.servicesStore.spotify.webapi_token_valid) {
|
||||
links.push({
|
||||
to: { name: 'music-spotify' },
|
||||
icon: 'spotify',
|
||||
label: 'page.music.tabs.spotify'
|
||||
})
|
||||
}
|
||||
return links
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,66 +1,34 @@
|
||||
<template>
|
||||
<section class="section tabs-section">
|
||||
<div class="container">
|
||||
<div class="columns is-centered my-0">
|
||||
<div class="column is-four-fifths py-0">
|
||||
<div class="tabs is-centered is-small">
|
||||
<ul>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'settings-webinterface' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<span v-text="$t('page.settings.tabs.general')" />
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'settings-remotes-outputs' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<span
|
||||
v-text="$t('page.settings.tabs.remotes-and-outputs')"
|
||||
/>
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'settings-artwork' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<span v-text="$t('page.settings.tabs.artwork')" />
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
<router-link
|
||||
v-slot="{ navigate, isActive }"
|
||||
:to="{ name: 'settings-online-services' }"
|
||||
custom
|
||||
>
|
||||
<li :class="{ 'is-active': isActive }">
|
||||
<a @click="navigate" @keypress.enter="navigate">
|
||||
<span v-text="$t('page.settings.tabs.online-services')" />
|
||||
</a>
|
||||
</li>
|
||||
</router-link>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<control-tab-list :links="links" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ControlTabList from '@/components/ControlTabList.vue'
|
||||
|
||||
export default {
|
||||
name: 'TabsSettings'
|
||||
name: 'TabsSettings',
|
||||
components: { ControlTabList },
|
||||
computed: {
|
||||
links() {
|
||||
return [
|
||||
{
|
||||
to: { name: 'settings-webinterface' },
|
||||
label: 'page.settings.tabs.general'
|
||||
},
|
||||
{
|
||||
to: { name: 'settings-remotes-outputs' },
|
||||
label: 'page.settings.tabs.remotes-and-outputs'
|
||||
},
|
||||
{
|
||||
to: { name: 'settings-artwork' },
|
||||
label: 'page.settings.tabs.artwork'
|
||||
},
|
||||
{
|
||||
to: { name: 'settings-online-services' },
|
||||
label: 'page.settings.tabs.online-services'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -3,16 +3,6 @@
|
||||
@use 'bulma/bulma';
|
||||
@use 'bulma/sass/utilities/mixins';
|
||||
|
||||
.tabs-section {
|
||||
background: var(--bulma-body-background-color);
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
position: sticky;
|
||||
top: var(--bulma-navbar-height);
|
||||
width: 100%;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.is-disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user