47 lines
2.9 KiB
Vue
47 lines
2.9 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50" @click.self="emit('close')">
|
|
<div class="w-[min(720px,96vw)] max-h-[85vh] bg-panel border border-border rounded-2xl shadow-[0_20px_40px_var(--shadow)] flex flex-col">
|
|
<div class="flex items-center justify-between gap-3 px-[18px] py-4 border-b border-border">
|
|
<h3 class="text-[12px] uppercase tracking-[0.08em] text-muted">Einstellungen</h3>
|
|
<button class="w-7 h-7 rounded-lg border border-border bg-panel-2 text-text grid place-items-center cursor-pointer hover:border-accent" @click="emit('close')">x</button>
|
|
</div>
|
|
<div class="px-[18px] py-4 overflow-y-auto flex flex-col gap-3.5">
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="text-[12px] uppercase tracking-[0.08em] text-muted">Allgemein</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Startscreen</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.startScreen">
|
|
<option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
|
|
</select>
|
|
</div>
|
|
<label class="flex items-center gap-2 text-[12px] text-muted">
|
|
<input class="accent-[var(--accent)]" type="checkbox" v-model="store.config.standby.enabled">
|
|
<span>Standby aktiv</span>
|
|
</label>
|
|
<div class="flex items-center justify-between gap-2.5 mt-2">
|
|
<label class="text-[12px] text-muted">Standby</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.standby.screen">
|
|
<option :value="-1">-- Kein --</option>
|
|
<option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Minuten</label>
|
|
<input class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" type="number" min="0" v-model.number="store.config.standby.minutes">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-[18px] py-3 border-t border-border flex justify-end gap-2.5">
|
|
<button class="border border-border bg-transparent text-text px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 active:translate-y-0.5" @click="emit('close')">Schliessen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useEditorStore } from '../stores/editor';
|
|
|
|
const emit = defineEmits(['close']);
|
|
const store = useEditorStore();
|
|
</script>
|