qwertyist/skrivert
1
0
Fork 0
Code Issues 4 Releases Wiki Activity

bättre focus mellan meny och lägg till-rutan

Browse Source
This commit is contained in:
botvid johansson 2025-02-13 17:52:01 +01:00
parent 6fdbc88910
commit 7ccc660b05
5 changed files with 220 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/create.svelte
View File

@ -12,25 +12,25 @@
import { Badge } from '$lib/components/ui/badge'; import { Badge } from '$lib/components/ui/badge';
import { Separator } from '$lib/components/ui/separator'; import { Separator } from '$lib/components/ui/separator';
import { db, createShortform, type List, type Shortform } from '../db/main'; import { db, createShortform, type List, type Shortform } from '../db/main';
import { cacheShortform } from "../modules/shortforms"; import { cacheShortform } from '../modules/shortforms';
import { liveQuery } from "dexie"; 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 = { $: abbForm = {
shortform: "", shortform: '',
phrase: "", phrase: '',
target: "", target: '',
errors: [], errors: []
}; };
let importing = false; let importing = false;
let progress = 0; let progress = 0;
const handleCreate = async (e) => { const handleCreate = async (e) => {
// abbForm.errors = [] // abbForm.errors = []
e.preventDefault() e.preventDefault();
/* /*
id?: number; id?: number;
listid: number; listid: number;
shortform: string; shortform: string;
@ -42,55 +42,59 @@
*/ */
const sf = { const sf = {
listid: abbForm.target.value, listid: abbForm.target.value,
shortform: abbForm.shortform.replace(/\s/g,"").toLowerCase(), shortform: abbForm.shortform.replace(/\s/g, '').toLowerCase(),
phrase: abbForm.phrase.trim(), phrase: abbForm.phrase.trim(),
last_used: new Date(0), last_used: new Date(0),
uses: 0, uses: 0,
remind: 0, remind: 0,
updated: Date.now(), updated: Date.now()
} };
//appState.open = "" //appState.open = ""
db.shortforms.where("[listid+shortform]").equals([sf.listid, sf.shortform]).first() db.shortforms
.then(existing => { .where('[listid+shortform]')
sf.id = existing.id .equals([sf.listid, sf.shortform])
db.shortforms.put(sf).then(result => { .first()
cacheShortform(sf); .then((existing) => {
appState.open = "" sf.id = existing.id;
db.shortforms.put(sf).then((result) => {
cacheShortform(sf);
appState.open = '';
});
}) })
}) .catch(() => {
.catch(() => { db.shortforms.put(sf).then((result) => {
db.shortforms.put(sf).then(result => { cacheShortform(sf);
cacheShortform(sf); appState.open = '';
appState.open = "" });
}) });
})
}; };
const cancelCreate = () => { const cancelCreate = () => {
abbForm.shortform = "" abbForm.shortform = '';
abbForm.phrase = "" abbForm.phrase = '';
abbForm.target = {} abbForm.target = {};
abbForm.errors = [] abbForm.errors = [];
appState.open = "" appState.open = '';
}; };
const onSelectedChange = (v) => { const onSelectedChange = (v) => {
console.log(v) console.log(v);
abbForm.target = v abbForm.target = v;
} };
let selectedLists = [] let selectedLists = [];
onMount(() => { onMount(() => {
db.lists.get(shortforms.standardList).then(l => { db.lists.get(shortforms.standardList).then((l) => {
selectedLists.push({ value: l.id, label: l.name }) selectedLists.push({ value: l.id, label: l.name });
abbForm.target = { value: l.id, label: l.name } abbForm.target = { value: l.id, label: l.name };
}) });
console.log("fokusera på input och mata med medhavd data") console.log('fokusera på input och mata med medhavd data');
const el = document.getElementById("shortformEl") const el = document.getElementById('shortformEl');
el.focus() if (el) {
setTimeout(() => {
el.focus();
}, 15);
}
}); });
</script> </script>
<Card.Root class="mx-auto w-[490px]"> <Card.Root class="mx-auto w-[490px]">
@ -99,10 +103,22 @@
<Card.Description></Card.Description> <Card.Description></Card.Description>
</Card.Header> </Card.Header>
<Card.Content class="mx-auto"> <Card.Content class="mx-auto">
<form class="grid gap-4 py-4" method="post" enctype="multipart/form-data" on:submit={handleCreate} autocomplete="off"> <form
class="grid gap-4 py-4"
method="post"
enctype="multipart/form-data"
on:submit={handleCreate}
autocomplete="off"
>
<div class="grid grid-cols-4 items-center gap-4"> <div class="grid grid-cols-4 items-center gap-4">
<Label>Förkortning</Label> <Label>Förkortning</Label>
<Input id="shortformEl" bind:value={abbForm.shortform} focus placeholder="" class="w-[290px]" /> <Input
id="shortformEl"
bind:value={abbForm.shortform}
focus
placeholder=""
class="w-[290px]"
/>
</div> </div>
<div class="grid grid-cols-4 items-center gap-4"> <div class="grid grid-cols-4 items-center gap-4">
<Label>Text</Label> <Label>Text</Label>
@ -110,32 +126,29 @@
</div> </div>
<div class="grid grid-cols-4 items-center gap-4"> <div class="grid grid-cols-4 items-center gap-4">
<Label>Mål</Label> <Label>Mål</Label>
<Select.Root selected={abbForm.target} onSelectedChange={onSelectedChange}> <Select.Root selected={abbForm.target} {onSelectedChange}>
<Select.Trigger class="w-[290px]"> <Select.Trigger class="w-[290px]">
<Select.Value placeholder="Ingen lista vald" /> <Select.Value placeholder="Ingen lista vald" />
</Select.Trigger> </Select.Trigger>
<Select.Content> <Select.Content>
{#each selectedLists as list} {#each selectedLists as list}
<Select.Item <Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
value={list.id} {/each}
label={list.name}
>{list.name}</Select.Item>
{/each}
</Select.Content> </Select.Content>
</Select.Root> </Select.Root>
</div> </div>
{#if abbForm.errors.length > 0} {#if abbForm.errors.length > 0}
<ScrollArea class="max-h-48 rounded-md"> <ScrollArea class="max-h-48 rounded-md">
<div class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4" role="alert"> <div class="border-l-4 border-orange-500 bg-orange-100 p-4 text-orange-700" role="alert">
<p class="font-bold">Fel vid import</p> <p class="font-bold">Fel vid import</p>
<ul class="p-6"> <ul class="p-6">
{#each abbForms.errors as error} {#each abbForms.errors as error}
<li class="list-disc">{error}</li> <li class="list-disc">{error}</li>
{/each} {/each}
</ul> </ul>
</div> </div>
</ScrollArea> </ScrollArea>
{/if} {/if}
<button type="submit" class="hidden" /> <button type="submit" class="hidden" />
</form> </form>
@ -147,4 +160,3 @@
</Card.Footer> </Card.Footer>
--> -->
</Card.Root> </Card.Root>

164
src/components/menu.svelte
View File

@ -1,79 +1,93 @@
<script> <script>
import { appState } from "$lib/stores.svelte" import { appState } from '$lib/stores.svelte';
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index"; import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import Gear from "svelte-radix/Gear.svelte"; import Gear from 'svelte-radix/Gear.svelte';
let closeFocus = 'textarea#doc.textarea';
</script> </script>
<DropdownMenu.Root open={appState.menuOpen} onOpenChange={(v) => {appState.menuOpen = v}} closeFocus="textarea#doc.textarea"> <DropdownMenu.Root
<DropdownMenu.Trigger asChild let:builder> open={appState.menuOpen}
<Button builders={[builder]} variant="ghost" class="absolute top-2 right-2" size="icon"> onOpenChange={(v) => {
<Gear class="h-4 w-4" /> appState.menuOpen = v;
</Button> }}
</DropdownMenu.Trigger> {closeFocus}
<DropdownMenu.Content class="w-56"> >
<DropdownMenu.Label>Inställningar</DropdownMenu.Label> <DropdownMenu.Trigger asChild let:builder>
<DropdownMenu.Separator /> <Button builders={[builder]} variant="ghost" class="absolute right-2 top-2" size="icon">
<DropdownMenu.Group> <Gear class="h-4 w-4" />
<DropdownMenu.Item on:click={() => {appState.open="create"}}> </Button>
Lägg till förkortning </DropdownMenu.Trigger>
<DropdownMenu.Shortcut>F2</DropdownMenu.Shortcut> <DropdownMenu.Content class="w-56">
</DropdownMenu.Item> <DropdownMenu.Label>Inställningar</DropdownMenu.Label>
<DropdownMenu.Item> <DropdownMenu.Separator />
Statistik <DropdownMenu.Group>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Item
</DropdownMenu.Item> on:click={() => {
</DropdownMenu.Group> appState.open = 'create';
<DropdownMenu.Separator /> }}
<DropdownMenu.Group> >
<DropdownMenu.Item> Lägg till förkortning
Förkortningar <DropdownMenu.Shortcut>F2</DropdownMenu.Shortcut>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> </DropdownMenu.Item>
</DropdownMenu.Item> <DropdownMenu.Item>
<DropdownMenu.Item> Statistik
Förinskriven text <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> </DropdownMenu.Item>
</DropdownMenu.Item> </DropdownMenu.Group>
<DropdownMenu.Item> <DropdownMenu.Separator />
Textinställningar <DropdownMenu.Group>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Item>
</DropdownMenu.Item> Förkortningar
<DropdownMenu.Item> <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
Tangentbord </DropdownMenu.Item>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Item>
</DropdownMenu.Item> Förinskriven text
</DropdownMenu.Group> <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
<DropdownMenu.Separator /> </DropdownMenu.Item>
<DropdownMenu.Group> <DropdownMenu.Item>
<DropdownMenu.Sub> Textinställningar
<DropdownMenu.SubTrigger>Anslut</DropdownMenu.SubTrigger> <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
<DropdownMenu.SubContent> </DropdownMenu.Item>
<DropdownMenu.Item> <DropdownMenu.Item>
Distanstolkning Tangentbord
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item> </DropdownMenu.Item>
<DropdownMenu.Item> </DropdownMenu.Group>
Lokalt nätverk <DropdownMenu.Separator />
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Group>
</DropdownMenu.Item> <DropdownMenu.Sub>
</DropdownMenu.SubContent> <DropdownMenu.SubTrigger>Anslut</DropdownMenu.SubTrigger>
</DropdownMenu.Sub> <DropdownMenu.SubContent>
</DropdownMenu.Group> <DropdownMenu.Item>
<DropdownMenu.Separator /> Distanstolkning
<DropdownMenu.Item> <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
Hjälp </DropdownMenu.Item>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> <DropdownMenu.Item>
</DropdownMenu.Item> Lokalt nätverk
<DropdownMenu.Item>Feedback <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> </DropdownMenu.Item>
</DropdownMenu.Item> </DropdownMenu.SubContent>
<DropdownMenu.Item>Användarkonto </DropdownMenu.Sub>
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut> </DropdownMenu.Group>
</DropdownMenu.Item> <DropdownMenu.Separator />
<DropdownMenu.Separator /> <DropdownMenu.Item>
<DropdownMenu.Item> Hjälp
Logga ut <DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut> </DropdownMenu.Item>
</DropdownMenu.Item> <DropdownMenu.Item
</DropdownMenu.Content> >Feedback
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item
>Användarkonto
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item>
Logga ut
<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root> </DropdownMenu.Root>

53
src/lib/stores.svelte.ts
View File

@ -4,29 +4,29 @@ const colorSetting = {
} }
const colorThemes = [ const colorThemes = [
{ {
bg: "white", bg: "white",
fg: "black", fg: "black",
}, },
{ {
bg: "black", bg: "black",
fg: "white", fg: "white",
}, },
{ {
bg: "black", bg: "black",
fg: "yellow", fg: "yellow",
}, },
{ {
bg: "yellow", bg: "yellow",
fg: "black", fg: "black",
}, },
{ {
bg: "blue", bg: "blue",
fg: "yellow", fg: "yellow",
}, },
{ {
bg: "yellow", bg: "yellow",
fg: "blue", fg: "blue",
} }
] ]
@ -58,29 +58,34 @@ export const selectNextColor = () => {
textSettings.colors = colorThemes[(selectedColor % 6)] textSettings.colors = colorThemes[(selectedColor % 6)]
} }
export const toggleMenuOpen = () => { export const toggleMenuOpen = (force = undefined) => {
appState.menuOpen = !appState.menuOpen if (force == undefined) {
appState.menuOpen = !appState.menuOpen
} else {
appState.menuOpen = force
}
} }
export const incTextSize = () => { export const incTextSize = () => {
console.log(textSettings.size) console.log(textSettings.size)
if (textSettings.size < 200) { if (textSettings.size < 200) {
textSettings.size += 5 textSettings.size += 5
return return
} }
if (textSettings.size > 200) { if (textSettings.size > 200) {
textSettings.size = 200 textSettings.size = 200
return return
} }
} }
export const decTextSize = () => { export const decTextSize = () => {
if (textSettings.size > 15) { if (textSettings.size > 15) {
textSettings.size -= 5 textSettings.size -= 5
return return
} }
if (textSettings.size <= 15) { if (textSettings.size <= 15) {
textSettings.size = 15 textSettings.size = 15
return return
} }
} }

3
src/modules/keyboard.ts
View File

@ -9,7 +9,7 @@ export const defaultExpanders: Map<string, ExpanderType> = new Map();
export const hotkeys: Map<string, any> = new Map(); export const hotkeys: Map<string, any> = new Map();
defaultExpanders.set("\n", { defaultExpanders.set("\n", {
key: { keyCode: 13, shiftKey: false }, key: { keyCode: 188, shiftKey: false },
symbol: "\n", symbol: "\n",
fullstop: true, fullstop: true,
}); });
@ -136,6 +136,7 @@ hotkeys.set("F8", {
hotkeys.set("F2", { hotkeys.set("F2", {
action: (e) => { action: (e) => {
e.preventDefault() e.preventDefault()
toggleMenuOpen(false)
appState.open = "create" appState.open = "create"
} }
}) })

39
src/routes/+page.svelte
View File

@ -4,48 +4,49 @@
import Create from '../components/create.svelte'; import Create from '../components/create.svelte';
import Dashboard from '../components/dashboard.svelte'; import Dashboard from '../components/dashboard.svelte';
import { db, deleteShortformList, type Shortform } from '../db/main'; 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 { Button } from '$lib/components/ui/button';
import { appState } from '$lib/stores.svelte' import { appState } from '$lib/stores.svelte';
let loaded = false let loaded = false;
$effect(() => { $effect(() => {
appState.open appState.open;
if (loaded) { if (loaded) {
if (appState.open == "") { if (appState.open == '') {
textarea.focus() textarea.focus();
} }
if (appState.open == "dashboard") { if (appState.open == 'dashboard') {
console.log("should open dashboard") console.log('should open dashboard');
showDashboard = true showDashboard = true;
} }
} }
loaded = true loaded = true;
});
})
import { hotkeys } from '../modules/keyboard'; import { hotkeys } from '../modules/keyboard';
let showDashboard: boolean = true; let showDashboard: boolean = true;
import { Toaster } from "$lib/components/ui/sonner"; import { Toaster } from '$lib/components/ui/sonner';
const handleHotkeys = (e: KeyboardEvent) => { const handleHotkeys = (e: KeyboardEvent) => {
hotkeys.get(e.key)?.action(e); hotkeys.get(e.key)?.action(e);
}; };
let textarea = null let textarea = null;
</script> </script>
<svelte:head> <svelte:head>
<title>SKRIVERT</title> <title>SKRIVERT</title>
</svelte:head> </svelte:head>
<svelte:window on:keydown={handleHotkeys} /> <svelte:window on:keydown={handleHotkeys} />
<div class="h-dvh w-full overflow-hidden" role="application"> <div class="h-dvh w-full overflow-hidden" role="application">
{#if appState.open == "create"} {#if appState.open == 'create'}
<div class="fixed flex top-0 right-0 left-0 z-50 justify-center items-center align-middle w-full md:inset-0 h-[calc(100%-1rem)] max-h-full"> <div
class="fixed left-0 right-0 top-0 z-50 flex h-[calc(100%-1rem)] max-h-full w-full items-center justify-center align-middle md:inset-0"
>
<Create /> <Create />
</div> </div>
{/if} {/if}
<div class="h-full"> <div class="h-full">
<Menu /> <Menu />
<Textarea bind:ref={textarea} /> <Textarea bind:ref={textarea} />
<!-- <Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>--> <!-- <Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
<!-- <Dashboard open={showDashboard} />--> <!-- <Dashboard open={showDashboard} />-->
</div> </div>
</div> </div>