MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2024-12-26 23:25:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

[web-src] make outputs and settings buttons clickable

Browse Source
This commit is contained in:
chme 2019-09-21 08:01:21 +02:00
parent 1631aa04c6
commit e8ead500c5
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web-src/src/components/NavbarTop.vue
View File

@ -34,7 +34,10 @@
<div class="navbar-end"> <div class="navbar-end">
<!-- Outputs dropdown --> <!-- Outputs dropdown -->
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown"
:class="{ 'is-active': show_outputs_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
@click="show_outputs_menu = !show_outputs_menu"
v-click-outside="on_click_outside_outputs">
<a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Volume</span></a> <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-volume-high"></i></span> <span class="is-hidden-desktop has-text-weight-bold">Volume</span></a>
<div class="navbar-dropdown is-right"> <div class="navbar-dropdown is-right">
@ -120,7 +123,10 @@
</div> </div>
<!-- Settings drop down --> <!-- Settings drop down -->
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown"
:class="{ 'is-active': show_settings_menu, 'is-hoverable': !show_outputs_menu && !show_settings_menu }"
@click="show_settings_menu = !show_settings_menu"
v-click-outside="on_click_outside_settings">
<a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop has-text-weight-bold">forked-daapd</span></a> <a class="navbar-link is-arrowless"><span class="icon is-hidden-mobile is-hidden-tablet-only"><i class="mdi mdi-settings"></i></span> <span class="is-hidden-desktop has-text-weight-bold">forked-daapd</span></a>
<div class="navbar-dropdown is-right"> <div class="navbar-dropdown is-right">
@ -159,7 +165,10 @@ export default {
playing: false, playing: false,
loading: false, loading: false,
stream_volume: 10 stream_volume: 10,
show_outputs_menu: false,
show_settings_menu: false
} }
}, },
@ -198,6 +207,14 @@ export default {
this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu) this.$store.commit(types.SHOW_BURGER_MENU, !this.show_burger_menu)
}, },
on_click_outside_outputs () {
this.show_outputs_menu = false
},
on_click_outside_settings () {
this.show_settings_menu = false
},
set_volume: function (newVolume) { set_volume: function (newVolume) {
webapi.player_volume(newVolume) webapi.player_volume(newVolume)
}, },