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