[web-src] Style change for update and rescan buttons in About page

This commit is contained in:
chme 2019-08-25 08:17:44 +02:00
parent 4dac88ca1a
commit 936b7f7b5d
2 changed files with 45 additions and 3 deletions

View File

@ -180,3 +180,11 @@ section.fd-tabs-section + section.fd-content {
margin-left: 16px; margin-left: 16px;
margin-right: 16px; margin-right: 16px;
} }
.dropdown-item a {
display: block;
}
.dropdown-item:hover {
background-color: hsl(0, 0%, 96%)
}

View File

@ -24,9 +24,35 @@
</div> </div>
<!-- Right side --> <!-- Right side -->
<div class="level-right buttons"> <div class="level-right">
<a class="button is-small is-outlined is-link" :class="{ 'is-loading': library.updating }" @click="update">Update</a> <div v-if="library.updating"><a class="button is-small is-loading">Update</a></div>
<a class="button is-small is-outlined is-link" :class="{ 'is-loading': library.updating }" @click="update_meta">Force Meta Rescan</a> <div v-else class="dropdown is-right" :class="{ 'is-active': show_update_dropdown }">
<div class="dropdown-trigger">
<div class="buttons has-addons">
<a @click="update" class="button is-small">Update</a>
<a @click="show_update_dropdown = !show_update_dropdown" class="button is-small">
<span class="icon"><i class="mdi" :class="{ 'mdi-chevron-down': !show_update_dropdown, 'mdi-chevron-up': show_update_dropdown }"></i></span>
</a>
</div>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<div class="dropdown-item">
<a @click="update" class="has-text-dark">
<strong>Update</strong><br>
<span class="is-size-7">Adds new, removes deleted and updates modified files.</span>
</a>
</div>
<hr class="dropdown-divider">
<div class="dropdown-item">
<a @click="update_meta" class="has-text-dark">
<strong>Rescan metadata</strong><br>
<span class="is-size-7">Same as update, but also rescans unmodified files.</span>
</a>
</div>
</div>
</div>
</div>
</div> </div>
</nav> </nav>
@ -84,6 +110,12 @@ import webapi from '@/webapi'
export default { export default {
name: 'PageAbout', name: 'PageAbout',
data () {
return {
show_update_dropdown: false
}
},
computed: { computed: {
config () { config () {
return this.$store.state.config return this.$store.state.config
@ -95,10 +127,12 @@ export default {
methods: { methods: {
update: function () { update: function () {
this.show_update_dropdown = false
webapi.library_update() webapi.library_update()
}, },
update_meta: function () { update_meta: function () {
this.show_update_dropdown = false
webapi.library_rescan() webapi.library_rescan()
} }
}, },