make keybinds configurable
This commit is contained in:
@ -6,6 +6,7 @@
|
||||
import { appState, completeRequest } from '../lib/state.js';
|
||||
import ErrorAlert from '../ui/ErrorAlert.svelte';
|
||||
import Link from '../ui/Link.svelte';
|
||||
import KeyCombo from '../ui/KeyCombo.svelte';
|
||||
|
||||
|
||||
// Send response to backend, display error if applicable
|
||||
@ -108,17 +109,15 @@
|
||||
<div class="w-full flex justify-between">
|
||||
<Link target={deny} hotkey="Escape">
|
||||
<button class="btn btn-error justify-self-start">
|
||||
Deny
|
||||
<kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Esc</kbd>
|
||||
<span class="mr-2">Deny</span>
|
||||
<KeyCombo keys={['Esc']} />
|
||||
</button>
|
||||
</Link>
|
||||
|
||||
<Link target={approve} hotkey="Enter" shift="{true}">
|
||||
<button class="btn btn-success justify-self-end">
|
||||
Approve
|
||||
<kbd class="ml-2 normal-case px-1 py-0.5 rounded border border-neutral">Shift</kbd>
|
||||
<span class="mx-0.5">+</span>
|
||||
<kbd class="normal-case px-1 py-0.5 rounded border border-neutral">Enter</kbd>
|
||||
<span class="mr-2">Approve</span>
|
||||
<KeyCombo keys={['Shift', 'Enter']} />
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
|
@ -1,11 +1,18 @@
|
||||
<script context="module">
|
||||
import { type } from '@tauri-apps/api/os';
|
||||
const osType = await type();
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import { type } from '@tauri-apps/api/os';
|
||||
|
||||
import { appState } from '../lib/state.js';
|
||||
import Nav from '../ui/Nav.svelte';
|
||||
import Link from '../ui/Link.svelte';
|
||||
import ErrorAlert from '../ui/ErrorAlert.svelte';
|
||||
import SettingsGroup from '../ui/settings/SettingsGroup.svelte';
|
||||
import Keybind from '../ui/settings/Keybind.svelte';
|
||||
import { Setting, ToggleSetting, NumericSetting, FileSetting, TextSetting } from '../ui/settings';
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
@ -14,6 +21,7 @@
|
||||
|
||||
let error = null;
|
||||
async function save() {
|
||||
console.log('updating config');
|
||||
try {
|
||||
await invoke('save_config', {config: $appState.config});
|
||||
}
|
||||
@ -22,12 +30,6 @@
|
||||
$appState.config = await invoke('get_config');
|
||||
}
|
||||
}
|
||||
|
||||
let osType = '';
|
||||
type().then(t => osType = t);
|
||||
|
||||
console.log($appState.config.terminal);
|
||||
window.term = $appState.config.terminal;
|
||||
</script>
|
||||
|
||||
|
||||
@ -36,68 +38,71 @@
|
||||
</Nav>
|
||||
|
||||
{#await invoke('get_config') then config}
|
||||
<div class="max-w-lg mx-auto mt-1.5 p-4">
|
||||
<!-- <h2 class="text-2xl font-bold text-center">Settings</h2> -->
|
||||
<div class="max-w-lg mx-auto mt-1.5 p-4 space-y-16">
|
||||
<SettingsGroup name="General">
|
||||
<ToggleSetting title="Start on login" bind:value={$appState.config.start_on_login} on:update={save}>
|
||||
<svelte:fragment slot="description">
|
||||
Start Creddy when you log in to your computer.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<div class="divider mt-0 mb-8">
|
||||
<h2 class="text-xl font-bold">General</h2>
|
||||
</div>
|
||||
|
||||
<ToggleSetting title="Start on login" divider={false} bind:value={$appState.config.start_on_login} on:update={save}>
|
||||
<svelte:fragment slot="description">
|
||||
Start Creddy when you log in to your computer.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
<ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
|
||||
<svelte:fragment slot="description">
|
||||
Minimize to the system tray at startup.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
|
||||
<ToggleSetting title="Start minimized" bind:value={$appState.config.start_minimized} on:update={save}>
|
||||
<svelte:fragment slot="description">
|
||||
Minimize to the system tray at startup.
|
||||
</svelte:fragment>
|
||||
</ToggleSetting>
|
||||
<NumericSetting title="Re-hide delay" bind:value={$appState.config.rehide_ms} min={0} unit="Milliseconds" on:update={save}>
|
||||
<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.
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
|
||||
<NumericSetting title="Re-hide delay" bind:value={$appState.config.rehide_ms} min={0} unit="Milliseconds" on:update={save}>
|
||||
<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.
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
<NumericSetting
|
||||
title="Listen port"
|
||||
bind:value={$appState.config.listen_port}
|
||||
min={osType === 'Windows_NT' ? 1 : 0}
|
||||
on:update={save}
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Listen for credentials requests on this port.
|
||||
(Should be used with <code>$AWS_CONTAINER_CREDENTIALS_FULL_URI</code>)
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
|
||||
<NumericSetting
|
||||
title="Listen port"
|
||||
bind:value={$appState.config.listen_port}
|
||||
min={osType === 'Windows_NT' ? 1 : 0}
|
||||
on:update={save}
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Listen for credentials requests on this port.
|
||||
(Should be used with <code>$AWS_CONTAINER_CREDENTIALS_FULL_URI</code>)
|
||||
</svelte:fragment>
|
||||
</NumericSetting>
|
||||
<Setting title="Update credentials">
|
||||
<Link slot="input" target="EnterCredentials">
|
||||
<button class="btn btn-sm btn-primary">Update</button>
|
||||
</Link>
|
||||
<svelte:fragment slot="description">
|
||||
Update or re-enter your encrypted credentials.
|
||||
</svelte:fragment>
|
||||
</Setting>
|
||||
|
||||
<Setting title="Update credentials">
|
||||
<Link slot="input" target="EnterCredentials">
|
||||
<button class="btn btn-sm btn-primary">Update</button>
|
||||
</Link>
|
||||
<svelte:fragment slot="description">
|
||||
Update or re-enter your encrypted credentials.
|
||||
</svelte:fragment>
|
||||
</Setting>
|
||||
<FileSetting
|
||||
title="Terminal emulator"
|
||||
bind:value={$appState.config.terminal.exec}
|
||||
on:update={save}
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code> or <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
|
||||
</svelte:fragment>
|
||||
</FileSetting>
|
||||
</SettingsGroup>
|
||||
|
||||
<div class="divider mt-10 mb-8">
|
||||
<h2 class="text-xl font-bold">Terminal</h2>
|
||||
</div>
|
||||
<SettingsGroup name="Hotkeys">
|
||||
<div class="space-y-4">
|
||||
<p>Click on a keybinding to modify it. Use the checkbox to enable or disable a keybinding entirely.</p>
|
||||
|
||||
<div class="grid grid-cols-[auto_1fr_auto] gap-y-3 items-center">
|
||||
<Keybind description="Show Creddy" value={$appState.config.hotkeys.show_window} on:update={save} />
|
||||
<Keybind description="Launch terminal" value={$appState.config.hotkeys.launch_terminal} on:update={save} />
|
||||
</div>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
|
||||
<FileSetting
|
||||
title="Emulator"
|
||||
divider={false}
|
||||
bind:value={$appState.config.terminal.exec}
|
||||
on:update={save}
|
||||
>
|
||||
<svelte:fragment slot="description">
|
||||
Choose your preferred terminal emulator (e.g. <code>gnome-terminal</code>, <code>wt.exe</code>.) May be an absolute path or an executable discoverable on <code>$PATH</code>.
|
||||
</svelte:fragment>
|
||||
</FileSetting>
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
|
Reference in New Issue
Block a user