Add hotkeys
This commit is contained in:
73
src/lib/Setting/Pages/HotkeySettings.svelte
Normal file
73
src/lib/Setting/Pages/HotkeySettings.svelte
Normal file
@@ -0,0 +1,73 @@
|
||||
<script lang="ts">
|
||||
import { language } from "src/lang";
|
||||
import { DBState } from "src/ts/stores.svelte";
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{#if window.innerWidth < 768}
|
||||
<span class="text-red-500">
|
||||
{language.screenTooSmall}
|
||||
</span>
|
||||
|
||||
{:else}
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{language.hotkey}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each DBState.db.hotkeys as hotkey}
|
||||
<tr>
|
||||
<td>{language.hotkeyDesc[hotkey.action]}</td>
|
||||
<td>
|
||||
|
||||
<button
|
||||
class:text-textcolor={hotkey.ctrl}
|
||||
class:text-textcolor2={!hotkey.ctrl}
|
||||
onclick={() => {
|
||||
hotkey.ctrl = !hotkey.ctrl;
|
||||
}}
|
||||
>
|
||||
Ctrl
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class:text-textcolor={hotkey.shift}
|
||||
class:text-textcolor2={!hotkey.shift}
|
||||
onclick={() => {
|
||||
hotkey.shift = !hotkey.shift;
|
||||
}}
|
||||
>
|
||||
Shift
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<button
|
||||
class:text-textcolor={hotkey.alt}
|
||||
class:text-textcolor2={!hotkey.alt}
|
||||
onclick={() => {
|
||||
hotkey.alt = !hotkey.alt;
|
||||
}}
|
||||
>
|
||||
Alt
|
||||
</button>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
value={hotkey.key === ' ' ? "SPACE" : hotkey.key?.toLocaleUpperCase()}
|
||||
class="bg-bgcolor border-none w-16"
|
||||
onkeydown={(e) => {
|
||||
e.preventDefault();
|
||||
hotkey.key = e.key;
|
||||
}}
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
@@ -21,6 +21,7 @@
|
||||
import ThanksPage from "./Pages/ThanksPage.svelte";
|
||||
import ModuleSettings from "./Pages/Module/ModuleSettings.svelte";
|
||||
import { isLite } from "src/ts/lite";
|
||||
import HotkeySettings from "./Pages/HotkeySettings.svelte";
|
||||
|
||||
let openLoreList = $state(false)
|
||||
if(window.innerWidth >= 900 && $SettingsMenuIndex === -1 && !$MobileGUI){
|
||||
@@ -122,6 +123,15 @@
|
||||
<UserIcon />
|
||||
<span>{language.account} & {language.files}</span>
|
||||
</button>
|
||||
<button class="flex gap-2 items-center hover:text-textcolor"
|
||||
class:text-textcolor={$SettingsMenuIndex === 15}
|
||||
class:text-textcolor2={$SettingsMenuIndex !== 15}
|
||||
onclick={() => {
|
||||
$SettingsMenuIndex = 15
|
||||
}}>
|
||||
<ActivityIcon />
|
||||
<span>{language.hotkey}</span>
|
||||
</button>
|
||||
{#if !$isLite}
|
||||
<button class="flex gap-2 items-center hover:text-textcolor"
|
||||
class:text-textcolor={$SettingsMenuIndex === 6}
|
||||
@@ -186,6 +196,8 @@
|
||||
<PromptSettings onGoBack={() => {
|
||||
$SettingsMenuIndex = 1
|
||||
}}/>
|
||||
{:else if $SettingsMenuIndex === 15}
|
||||
<HotkeySettings/>
|
||||
{:else if $SettingsMenuIndex === 77}
|
||||
<ThanksPage/>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user