69 lines
2.2 KiB
Vue
69 lines
2.2 KiB
Vue
<template>
|
|
<div class="columns is-multiline">
|
|
<div class="column is-12 mt-2">
|
|
<div class="card">
|
|
<header class="card-header">
|
|
<p class="card-header-title">WebUI Settings</p>
|
|
<span class="card-header-icon">
|
|
<span class="icon"><i class="fas fa-cog" /></span>
|
|
</span>
|
|
</header>
|
|
<div class="card-content">
|
|
<div class="field">
|
|
<label class="label" for="random_bg">Backgrounds</label>
|
|
<div class="control">
|
|
<input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
|
|
<label for="random_bg" class="is-unselectable"> Enable</label>
|
|
<p class="help">Use random background image from your media backends.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field">
|
|
<label class="label" for="random_bg_opacity">
|
|
Background Visibility: (<code>{{ bg_opacity }}</code>)
|
|
</label>
|
|
<div class="control">
|
|
<input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50" max="1.00"
|
|
step="0.05">
|
|
<p class="help">How visible the background image should be.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field" v-if="bg_enable">
|
|
<label class="label" for="random_bg_opacity">
|
|
Reload the currently displayed background image.
|
|
</label>
|
|
<div class="control">
|
|
<button class="button is-info" @click="$emit('reload_bg')" :class="{ 'is-loading': isLoading }"
|
|
:disabled="isLoading">
|
|
<span class="icon-text">
|
|
<span class="icon"><i class="fas fa-sync-alt" /></span>
|
|
<span>Reload</span>
|
|
</span>
|
|
</button>
|
|
<p class="help">Change the displayed picture.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
import { useStorage } from '@vueuse/core'
|
|
|
|
defineProps({
|
|
isLoading: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
const bg_enable = useStorage('random_bg', true)
|
|
const bg_opacity = useStorage('random_bg_opacity', 0.85)
|
|
|
|
</script>
|