[web] Make hover style of buttons identical everywhere
This commit is contained in:
parent
4ae2903b4d
commit
7edce91474
|
@ -103,7 +103,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="navbar-brand is-flex-grow-1">
|
||||
<navbar-item-link :to="{ name: 'queue' }" exact class="mr-auto">
|
||||
<navbar-item-link :to="{ name: 'queue' }" class="mr-auto">
|
||||
<mdicon class="icon" name="playlist-play" size="24" />
|
||||
</navbar-item-link>
|
||||
<navbar-item-link
|
||||
|
|
|
@ -1,10 +1,5 @@
|
|||
<template>
|
||||
<a
|
||||
class="navbar-item"
|
||||
:class="{ 'is-active': is_active }"
|
||||
:href="full_path()"
|
||||
@click.stop.prevent="open_link()"
|
||||
>
|
||||
<a class="navbar-item" :href="href" @click.stop.prevent="open">
|
||||
<slot />
|
||||
</a>
|
||||
</template>
|
||||
|
@ -15,47 +10,21 @@ import * as types from '@/store/mutation_types'
|
|||
export default {
|
||||
name: 'NavbarItemLink',
|
||||
props: {
|
||||
exact: Boolean,
|
||||
to: { required: true, type: Object }
|
||||
},
|
||||
|
||||
computed: {
|
||||
is_active() {
|
||||
if (this.exact) {
|
||||
return this.$route.path === this.to
|
||||
}
|
||||
return this.$route.path.startsWith(this.to)
|
||||
},
|
||||
|
||||
show_burger_menu: {
|
||||
get() {
|
||||
return this.$store.state.show_burger_menu
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.SHOW_BURGER_MENU, value)
|
||||
}
|
||||
},
|
||||
|
||||
show_player_menu: {
|
||||
get() {
|
||||
return this.$store.state.show_player_menu
|
||||
},
|
||||
set(value) {
|
||||
this.$store.commit(types.SHOW_PLAYER_MENU, value)
|
||||
}
|
||||
href() {
|
||||
return this.$router.resolve(this.to).href
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
full_path() {
|
||||
const resolved = this.$router.resolve(this.to)
|
||||
return resolved.href
|
||||
},
|
||||
open_link() {
|
||||
if (this.show_burger_menu) {
|
||||
open() {
|
||||
if (this.$store.state.show_burger_menu) {
|
||||
this.$store.commit(types.SHOW_BURGER_MENU, false)
|
||||
}
|
||||
if (this.show_player_menu) {
|
||||
if (this.$store.state.show_player_menu) {
|
||||
this.$store.commit(types.SHOW_PLAYER_MENU, false)
|
||||
}
|
||||
this.$router.push(this.to)
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
<mdicon class="icon" name="music-box-multiple" size="16" />
|
||||
<b v-text="$t('navigation.playlists')" />
|
||||
</navbar-item-link>
|
||||
<navbar-item-link :to="{ name: 'music' }" exact>
|
||||
<navbar-item-link :to="{ name: 'music' }">
|
||||
<mdicon class="icon" name="music" size="16" />
|
||||
<b v-text="$t('navigation.music')" />
|
||||
</navbar-item-link>
|
||||
|
|
Loading…
Reference in New Issue