mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-03 23:30:09 -05:00
[web] Simplify the navigation bar
This commit is contained in:
Alain Nussbaumer
parent
56aee6ad05
commit
05d9447c3c
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<a :href="href" @click.stop.prevent="open">
|
<a :href="$router.resolve(to).href" @click.stop.prevent="open">
|
||||||
<slot />
|
<slot />
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
@ -12,25 +12,13 @@ export default {
|
|||||||
props: {
|
props: {
|
||||||
to: { required: true, type: Object }
|
to: { required: true, type: Object }
|
||||||
},
|
},
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
return { uiStore: useUIStore() }
|
return { uiStore: useUIStore() }
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
|
||||||
href() {
|
|
||||||
return this.$router.resolve(this.to).href
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
open() {
|
open() {
|
||||||
if (this.uiStore.show_burger_menu) {
|
this.uiStore.show_burger_menu = false
|
||||||
this.uiStore.show_burger_menu = false
|
this.uiStore.show_player_menu = false
|
||||||
}
|
|
||||||
if (this.uiStore.show_player_menu) {
|
|
||||||
this.uiStore.show_player_menu = false
|
|
||||||
}
|
|
||||||
this.$router.push(this.to)
|
this.$router.push(this.to)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,54 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<nav class="navbar is-light is-fixed-top" :style="zindex">
|
<nav class="navbar is-fixed-top" :style="zindex">
|
||||||
<div class="navbar-brand is-flex-grow-1">
|
<div class="navbar-brand is-flex-grow-1">
|
||||||
<control-link
|
<control-link
|
||||||
v-if="settingsStore.show_menu_item_playlists"
|
v-for="menu in menus.filter((menu) => menu.show && menu.icon)"
|
||||||
|
:key="menu.name"
|
||||||
|
:to="{ name: menu.name }"
|
||||||
class="navbar-item"
|
class="navbar-item"
|
||||||
:to="{ name: 'playlists' }"
|
|
||||||
>
|
>
|
||||||
<mdicon class="icon" name="music-box-multiple" size="16" />
|
<mdicon class="icon" :name="menu.icon" size="16" />
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_music"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: 'music' }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="music" size="16" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_podcasts"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: 'podcasts' }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="microphone" size="16" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_audiobooks"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: 'audiobooks' }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="book-open-variant" size="16" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_radio"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: 'radio' }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="radio" size="16" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_files"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: 'files' }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="folder-open" size="16" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="settingsStore.show_menu_item_search"
|
|
||||||
class="navbar-item"
|
|
||||||
:to="{ name: searchStore.search_source }"
|
|
||||||
>
|
|
||||||
<mdicon class="icon" name="magnify" size="16" />
|
|
||||||
</control-link>
|
</control-link>
|
||||||
<a
|
<a
|
||||||
class="navbar-item ml-auto"
|
class="navbar-item ml-auto"
|
||||||
@ -65,92 +24,38 @@
|
|||||||
>
|
>
|
||||||
<div class="dropdown-menu is-mobile">
|
<div class="dropdown-menu is-mobile">
|
||||||
<div class="dropdown-content">
|
<div class="dropdown-content">
|
||||||
<control-link class="dropdown-item" :to="{ name: 'playlists' }">
|
<template
|
||||||
<span class="icon-text">
|
v-for="menu in menus.filter((menu) => menu.show)"
|
||||||
<mdicon class="icon" name="music-box-multiple" size="16" />
|
:key="menu.name"
|
||||||
</span>
|
|
||||||
<b v-text="$t('navigation.playlists')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link class="dropdown-item" :to="{ name: 'music' }">
|
|
||||||
<span class="icon-text">
|
|
||||||
<mdicon class="icon" name="music" size="16" />
|
|
||||||
</span>
|
|
||||||
<b v-text="$t('navigation.music')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link class="dropdown-item" :to="{ name: 'music-artists' }">
|
|
||||||
<span class="pl-5" v-text="$t('navigation.artists')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link class="dropdown-item" :to="{ name: 'music-albums' }">
|
|
||||||
<span class="pl-5" v-text="$t('navigation.albums')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link class="dropdown-item" :to="{ name: 'music-genres' }">
|
|
||||||
<span class="pl-5" v-text="$t('navigation.genres')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
v-if="spotify_enabled"
|
|
||||||
class="dropdown-item"
|
|
||||||
:to="{ name: 'music-spotify' }"
|
|
||||||
>
|
>
|
||||||
<span class="pl-5" v-text="$t('navigation.spotify')" />
|
<hr v-if="menu.separator" class="my-3" />
|
||||||
</control-link>
|
<a
|
||||||
<control-link class="dropdown-item" :to="{ name: 'podcasts' }">
|
v-else-if="menu.action"
|
||||||
<span class="icon-text">
|
class="dropdown-item"
|
||||||
<mdicon class="icon" name="microphone" size="16" />
|
@click.stop.prevent="menu.action"
|
||||||
</span>
|
v-text="$t(menu.label)"
|
||||||
<b v-text="$t('navigation.podcasts')" />
|
/>
|
||||||
</control-link>
|
<control-link
|
||||||
<control-link class="dropdown-item" :to="{ name: 'audiobooks' }">
|
v-else
|
||||||
<span class="icon-text">
|
:to="{ name: menu.name }"
|
||||||
<mdicon class="icon" name="book-open-variant" size="16" />
|
class="dropdown-item"
|
||||||
</span>
|
>
|
||||||
<b v-text="$t('navigation.audiobooks')" />
|
<span v-if="menu.icon" class="icon-text">
|
||||||
</control-link>
|
<mdicon class="icon" :name="menu.icon" size="16" />
|
||||||
<control-link class="dropdown-item" :to="{ name: 'radio' }">
|
</span>
|
||||||
<span class="icon-text">
|
<span
|
||||||
<mdicon class="icon" name="radio" size="16" />
|
:class="{
|
||||||
</span>
|
'pl-5': menu.sub,
|
||||||
<b v-text="$t('navigation.radio')" />
|
'has-text-weight-semibold': menu.icon
|
||||||
</control-link>
|
}"
|
||||||
<control-link class="dropdown-item" :to="{ name: 'files' }">
|
v-text="$t(menu.label)"
|
||||||
<span class="icon-text">
|
/>
|
||||||
<mdicon class="icon" name="folder-open" size="16" />
|
</control-link>
|
||||||
</span>
|
</template>
|
||||||
<b v-text="$t('navigation.files')" />
|
|
||||||
</control-link>
|
|
||||||
<control-link
|
|
||||||
class="dropdown-item"
|
|
||||||
:to="{ name: searchStore.search_source }"
|
|
||||||
>
|
|
||||||
<span class="icon-text">
|
|
||||||
<mdicon class="icon" name="magnify" size="16" />
|
|
||||||
</span>
|
|
||||||
<b v-text="$t('navigation.search')" />
|
|
||||||
</control-link>
|
|
||||||
<hr class="my-3" />
|
|
||||||
<control-link
|
|
||||||
class="dropdown-item"
|
|
||||||
:to="{ name: 'settings-webinterface' }"
|
|
||||||
>
|
|
||||||
{{ $t('navigation.settings') }}
|
|
||||||
</control-link>
|
|
||||||
<a
|
|
||||||
class="dropdown-item"
|
|
||||||
@click.stop.prevent="open_update_dialog()"
|
|
||||||
v-text="$t('navigation.update-library')"
|
|
||||||
/>
|
|
||||||
<control-link class="dropdown-item" :to="{ name: 'about' }">
|
|
||||||
{{ $t('navigation.about') }}
|
|
||||||
</control-link>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
|
||||||
v-show="show_settings_menu"
|
|
||||||
class="is-overlay"
|
|
||||||
@click="show_settings_menu = false"
|
|
||||||
/>
|
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -164,7 +69,6 @@ import { useUIStore } from '@/stores/ui'
|
|||||||
export default {
|
export default {
|
||||||
name: 'NavbarTop',
|
name: 'NavbarTop',
|
||||||
components: { ControlLink },
|
components: { ControlLink },
|
||||||
|
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
searchStore: useSearchStore(),
|
searchStore: useSearchStore(),
|
||||||
@ -173,16 +77,88 @@ export default {
|
|||||||
uiStore: useUIStore()
|
uiStore: useUIStore()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show_settings_menu: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
spotify_enabled() {
|
menus() {
|
||||||
return this.servicesStore.spotify.webapi_token_valid
|
return [
|
||||||
|
{
|
||||||
|
name: 'playlists',
|
||||||
|
label: 'navigation.playlists',
|
||||||
|
icon: 'music-box-multiple',
|
||||||
|
show: this.settingsStore.show_menu_item_playlists
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'music',
|
||||||
|
label: 'navigation.music',
|
||||||
|
icon: 'music',
|
||||||
|
show: this.settingsStore.show_menu_item_music
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'music-artists',
|
||||||
|
label: 'navigation.artists',
|
||||||
|
show: true,
|
||||||
|
sub: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'music-albums',
|
||||||
|
label: 'navigation.albums',
|
||||||
|
show: true,
|
||||||
|
sub: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'music-genres',
|
||||||
|
label: 'navigation.genres',
|
||||||
|
show: true,
|
||||||
|
sub: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'music-spotify',
|
||||||
|
label: 'navigation.spotify',
|
||||||
|
show: this.servicesStore.spotify.webapi_token_valid,
|
||||||
|
sub: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'podcasts',
|
||||||
|
label: 'navigation.podcasts',
|
||||||
|
icon: 'microphone',
|
||||||
|
show: this.settingsStore.show_menu_item_podcasts
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'audiobooks',
|
||||||
|
label: 'navigation.audiobooks',
|
||||||
|
icon: 'book-open-variant',
|
||||||
|
show: this.settingsStore.show_menu_item_audiobooks
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'radio',
|
||||||
|
label: 'navigation.radio',
|
||||||
|
icon: 'radio',
|
||||||
|
show: this.settingsStore.show_menu_item_radio
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'files',
|
||||||
|
label: 'navigation.files',
|
||||||
|
icon: 'folder-open',
|
||||||
|
show: this.settingsStore.show_menu_item_files
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: this.searchStore.search_source,
|
||||||
|
label: 'navigation.search',
|
||||||
|
icon: 'magnify',
|
||||||
|
show: this.settingsStore.show_menu_item_search
|
||||||
|
},
|
||||||
|
{ separator: true, show: true },
|
||||||
|
{
|
||||||
|
name: 'settings-webinterface',
|
||||||
|
label: 'navigation.settings',
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'navigation.update-library',
|
||||||
|
action: this.open_update_dialog,
|
||||||
|
show: true
|
||||||
|
},
|
||||||
|
{ name: 'about', label: 'navigation.about', show: true }
|
||||||
|
]
|
||||||
},
|
},
|
||||||
zindex() {
|
zindex() {
|
||||||
if (this.uiStore.show_player_menu) {
|
if (this.uiStore.show_player_menu) {
|
||||||
@ -191,20 +167,9 @@ export default {
|
|||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
|
||||||
$route(to, from) {
|
|
||||||
this.show_settings_menu = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
on_click_outside_settings() {
|
|
||||||
this.show_settings_menu = !this.show_settings_menu
|
|
||||||
},
|
|
||||||
open_update_dialog() {
|
open_update_dialog() {
|
||||||
this.uiStore.show_update_dialog = true
|
this.uiStore.show_update_dialog = true
|
||||||
this.show_settings_menu = false
|
|
||||||
this.uiStore.show_burger_menu = false
|
this.uiStore.show_burger_menu = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user