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>
|
<template>
|
||||||
<section class="section tabs-section">
|
<control-tab-list :links="links" />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ControlTabList from '@/components/ControlTabList.vue'
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|||||||
@ -1,130 +1,54 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="section tabs-section">
|
<control-tab-list :links="links" />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ControlTabList from '@/components/ControlTabList.vue'
|
||||||
import { useServicesStore } from '@/stores/services'
|
import { useServicesStore } from '@/stores/services'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'TabsMusic',
|
name: 'TabsMusic',
|
||||||
|
components: { ControlTabList },
|
||||||
setup() {
|
setup() {
|
||||||
return { servicesStore: useServicesStore() }
|
return { servicesStore: useServicesStore() }
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
spotify_enabled() {
|
links() {
|
||||||
return this.servicesStore.spotify.webapi_token_valid
|
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>
|
<template>
|
||||||
<section class="section tabs-section">
|
<control-tab-list :links="links" />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import ControlTabList from '@/components/ControlTabList.vue'
|
||||||
|
|
||||||
export default {
|
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>
|
</script>
|
||||||
|
|||||||
@ -3,16 +3,6 @@
|
|||||||
@use 'bulma/bulma';
|
@use 'bulma/bulma';
|
||||||
@use 'bulma/sass/utilities/mixins';
|
@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 {
|
.is-disabled {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user