rework settings

This commit is contained in:
Joseph Montanaro 2023-04-25 21:17:29 -07:00
parent a8aafa1519
commit 31532cd76e
3 changed files with 23 additions and 47 deletions

View File

@ -2,6 +2,8 @@
import { onMount } from 'svelte';
import { slide } from 'svelte/transition';
let extraClasses;
export {extraClasses as class};
export let slideDuration = 150;
let animationClass = "";
@ -49,7 +51,7 @@
</style>
<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass}">
<div in:slide="{{duration: slideDuration}}" class="alert alert-error shadow-lg {animationClass} {extraClasses}">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
<span>

View File

@ -1,13 +0,0 @@
<script>
export let title;
</script>
<div class="divider"></div>
<div class="grid grid-cols-2 items-center">
<h3 class="text-lg font-bold">{title}</h3>
<slot name="input"></slot>
</div>
<p class="mt-3">
<slot name="description"></slot>
</p>

View File

@ -1,12 +1,12 @@
<script>
import { invoke } from '@tauri-apps/api/tauri';
window.invoke = invoke;
import { appState } from '../lib/state.js';
import Nav from '../ui/Nav.svelte';
import Link from '../ui/Link.svelte';
import Setting from '../ui/Setting.svelte';
import ErrorAlert from '../ui/ErrorAlert.svelte';
// import Setting from '../ui/settings/Setting.svelte';
import { Setting, NumericSetting } from '../ui/settings';
async function save() {
try {
@ -16,6 +16,8 @@
}
}
window.state = $appState;
</script>
@ -26,40 +28,25 @@
<h2 class="text-2xl font-bold text-center">Settings</h2>
<Setting title="Start minimized">
<input slot="input" type="checkbox" bind:checked="{$appState.config.start_minimized}" class="justify-self-end toggle toggle-success" />
<input slot="input" type="checkbox" bind:checked="{$appState.config.start_minimized}" class="toggle toggle-success" />
<svelte:fragment slot="description">Minimize to the system tray at startup.</svelte:fragment>
</Setting>
<div class="divider"></div>
<div class="grid grid-cols-2 items-center">
<h3 class="text-lg font-bold">Start minimized</h3>
<input type="checkbox" bind:checked="{$appState.config.start_minimized}" class="justify-self-end toggle toggle-success" />
</div>
<p class="mt-3">Minimize to the system tray at startup.</p>
<div class="divider"></div>
<div class="grid grid-cols-2 items-center">
<h3 class="text-lg font-bold">Re-hide delay</h3>
<div class="justify-self-end">
<span class="mr-2">(Milliseconds)</span>
<input type="text" bind:value="{$appState.config.rehide_ms}" class="input input-sm input-bordered text-right max-w-[4rem]" />
</div>
</div>
<p class="mt-3">
<NumericSetting title="Re-hide delay" bind:value={$appState.config.rehide_ms} min={0} unit="Milliseconds">
<svelte:fragment slot="description">
How long to wait after a request is approved/denied before minimizing
the window to tray. Only applicable if the window was minimized
to tray before the request was received.
</p>
</svelte:fragment>
</NumericSetting>
<div class="divider"></div>
<div class="grid grid-cols-2 items-center">
<h3 class="text-lg font-bold">Update credentials</h3>
<div class="justify-self-end">
<Link target="EnterCredentials">
<Setting title="Update credentials">
<Link slot="input" target="EnterCredentials">
<button class="btn btn-sm btn-primary">Update</button>
</Link>
</div>
</div>
<p class="mt-3">Update or re-enter your encrypted credentials.</p>
<svelte:fragment slot="description">
Update or re-enter your encrypted credentials.
</svelte:fragment>
</Setting>
</div>
{/await}