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