From 7ccc660b05f27959e5497d61b4b21506ecf53ee6 Mon Sep 17 00:00:00 2001 From: Botvid Johansson Date: Thu, 13 Feb 2025 17:52:01 +0100 Subject: [PATCH] =?UTF-8?q?b=C3=A4ttre=20focus=20mellan=20meny=20och=20l?= =?UTF-8?q?=C3=A4gg=20till-rutan?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/create.svelte | 148 ++++++++++++++++--------------- src/components/menu.svelte | 164 +++++++++++++++++++---------------- src/lib/stores.svelte.ts | 53 ++++++----- src/modules/keyboard.ts | 3 +- src/routes/+page.svelte | 39 +++++---- 5 files changed, 220 insertions(+), 187 deletions(-) diff --git a/src/components/create.svelte b/src/components/create.svelte index 3bbe77e..8f1cb57 100644 --- a/src/components/create.svelte +++ b/src/components/create.svelte @@ -12,25 +12,25 @@ import { Badge } from '$lib/components/ui/badge'; import { Separator } from '$lib/components/ui/separator'; import { db, createShortform, type List, type Shortform } from '../db/main'; - import { cacheShortform } from "../modules/shortforms"; - import { liveQuery } from "dexie"; + import { cacheShortform } from '../modules/shortforms'; + import { liveQuery } from 'dexie'; - import { ScrollArea } from "$lib/components/ui/scroll-area/index.js"; + import { ScrollArea } from '$lib/components/ui/scroll-area/index.js'; $: abbForm = { - shortform: "", - phrase: "", - target: "", - errors: [], + shortform: '', + phrase: '', + target: '', + errors: [] }; let importing = false; let progress = 0; const handleCreate = async (e) => { -// abbForm.errors = [] - e.preventDefault() - - /* + // abbForm.errors = [] + e.preventDefault(); + + /* id?: number; listid: number; shortform: string; @@ -42,55 +42,59 @@ */ const sf = { listid: abbForm.target.value, - shortform: abbForm.shortform.replace(/\s/g,"").toLowerCase(), - phrase: abbForm.phrase.trim(), + shortform: abbForm.shortform.replace(/\s/g, '').toLowerCase(), + phrase: abbForm.phrase.trim(), last_used: new Date(0), uses: 0, remind: 0, - updated: Date.now(), - } + updated: Date.now() + }; //appState.open = "" - db.shortforms.where("[listid+shortform]").equals([sf.listid, sf.shortform]).first() - .then(existing => { - sf.id = existing.id - db.shortforms.put(sf).then(result => { - cacheShortform(sf); - appState.open = "" + db.shortforms + .where('[listid+shortform]') + .equals([sf.listid, sf.shortform]) + .first() + .then((existing) => { + sf.id = existing.id; + db.shortforms.put(sf).then((result) => { + cacheShortform(sf); + appState.open = ''; + }); }) - }) - .catch(() => { - db.shortforms.put(sf).then(result => { - cacheShortform(sf); - appState.open = "" - }) - }) + .catch(() => { + db.shortforms.put(sf).then((result) => { + cacheShortform(sf); + appState.open = ''; + }); + }); }; const cancelCreate = () => { - abbForm.shortform = "" - abbForm.phrase = "" - abbForm.target = {} - abbForm.errors = [] - appState.open = "" + abbForm.shortform = ''; + abbForm.phrase = ''; + abbForm.target = {}; + abbForm.errors = []; + appState.open = ''; }; const onSelectedChange = (v) => { - console.log(v) - abbForm.target = v - } - let selectedLists = [] + console.log(v); + abbForm.target = v; + }; + let selectedLists = []; onMount(() => { - db.lists.get(shortforms.standardList).then(l => { - selectedLists.push({ value: l.id, label: l.name }) - abbForm.target = { value: l.id, label: l.name } - }) - console.log("fokusera på input och mata med medhavd data") - const el = document.getElementById("shortformEl") - el.focus() - - + db.lists.get(shortforms.standardList).then((l) => { + selectedLists.push({ value: l.id, label: l.name }); + abbForm.target = { value: l.id, label: l.name }; + }); + console.log('fokusera på input och mata med medhavd data'); + const el = document.getElementById('shortformEl'); + if (el) { + setTimeout(() => { + el.focus(); + }, 15); + } }); - @@ -99,10 +103,22 @@ -
+
- +
@@ -110,32 +126,29 @@
- + - + - {#each selectedLists as list} - {list.name} - {/each} + {#each selectedLists as list} + {list.name} + {/each}
{#if abbForm.errors.length > 0} - - - + + + {/if}
- - - Inställningar - - - {appState.open="create"}}> - Lägg till förkortning - F2 - - - Statistik - F12 - - - - - - Förkortningar - F12 - - - Förinskriven text - F12 - - - Textinställningar - F12 - - - Tangentbord - F12 - - - - - - Anslut - - - Distanstolkning - F12 - - - Lokalt nätverk - F12 - - - - - - - Hjälp - F12 - - Feedback - F12 - - Användarkonto - F12 - - - - Logga ut - ⇧⌘Q - - + { + appState.menuOpen = v; + }} + {closeFocus} +> + + + + + Inställningar + + + { + appState.open = 'create'; + }} + > + Lägg till förkortning + F2 + + + Statistik + F12 + + + + + + Förkortningar + F12 + + + Förinskriven text + F12 + + + Textinställningar + F12 + + + Tangentbord + F12 + + + + + + Anslut + + + Distanstolkning + F12 + + + Lokalt nätverk + F12 + + + + + + + Hjälp + F12 + + Feedback + F12 + + Användarkonto + F12 + + + + Logga ut + ⇧⌘Q + + diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts index 2bb8af6..38c6ab6 100644 --- a/src/lib/stores.svelte.ts +++ b/src/lib/stores.svelte.ts @@ -4,29 +4,29 @@ const colorSetting = { } const colorThemes = [ - { - bg: "white", - fg: "black", + { + bg: "white", + fg: "black", }, - { - bg: "black", - fg: "white", + { + bg: "black", + fg: "white", }, - { - bg: "black", - fg: "yellow", + { + bg: "black", + fg: "yellow", }, - { - bg: "yellow", - fg: "black", + { + bg: "yellow", + fg: "black", }, - { - bg: "blue", - fg: "yellow", + { + bg: "blue", + fg: "yellow", }, - { - bg: "yellow", - fg: "blue", + { + bg: "yellow", + fg: "blue", } ] @@ -58,29 +58,34 @@ export const selectNextColor = () => { textSettings.colors = colorThemes[(selectedColor % 6)] } -export const toggleMenuOpen = () => { - appState.menuOpen = !appState.menuOpen +export const toggleMenuOpen = (force = undefined) => { + if (force == undefined) { + appState.menuOpen = !appState.menuOpen + } else { + appState.menuOpen = force + } } + export const incTextSize = () => { console.log(textSettings.size) if (textSettings.size < 200) { textSettings.size += 5 return - } + } if (textSettings.size > 200) { textSettings.size = 200 return - } + } } export const decTextSize = () => { if (textSettings.size > 15) { textSettings.size -= 5 return - } + } if (textSettings.size <= 15) { textSettings.size = 15 return - } + } } diff --git a/src/modules/keyboard.ts b/src/modules/keyboard.ts index 84824ad..2b1e167 100644 --- a/src/modules/keyboard.ts +++ b/src/modules/keyboard.ts @@ -9,7 +9,7 @@ export const defaultExpanders: Map = new Map(); export const hotkeys: Map = new Map(); defaultExpanders.set("\n", { - key: { keyCode: 13, shiftKey: false }, + key: { keyCode: 188, shiftKey: false }, symbol: "\n", fullstop: true, }); @@ -136,6 +136,7 @@ hotkeys.set("F8", { hotkeys.set("F2", { action: (e) => { e.preventDefault() + toggleMenuOpen(false) appState.open = "create" } }) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 609c856..0075005 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -4,48 +4,49 @@ import Create from '../components/create.svelte'; import Dashboard from '../components/dashboard.svelte'; import { db, deleteShortformList, type Shortform } from '../db/main'; - import Menu from "../components/menu.svelte"; + import Menu from '../components/menu.svelte'; import { Button } from '$lib/components/ui/button'; - import { appState } from '$lib/stores.svelte' - let loaded = false + import { appState } from '$lib/stores.svelte'; + let loaded = false; $effect(() => { - appState.open + appState.open; if (loaded) { - if (appState.open == "") { - textarea.focus() + if (appState.open == '') { + textarea.focus(); } - if (appState.open == "dashboard") { - console.log("should open dashboard") - showDashboard = true + if (appState.open == 'dashboard') { + console.log('should open dashboard'); + showDashboard = true; } } - loaded = true - - }) + loaded = true; + }); import { hotkeys } from '../modules/keyboard'; let showDashboard: boolean = true; - import { Toaster } from "$lib/components/ui/sonner"; + import { Toaster } from '$lib/components/ui/sonner'; const handleHotkeys = (e: KeyboardEvent) => { hotkeys.get(e.key)?.action(e); }; - let textarea = null - + let textarea = null; + -SKRIVERT + SKRIVERT
- {#if appState.open == "create"} -
+ {#if appState.open == 'create'} +
{/if}