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

110
src/components/create.svelte
View File

@ -12,23 +12,23 @@
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()
e.preventDefault();
/*
id?: number;
@ -42,55 +42,59 @@
*/
const sf = {
listid: abbForm.target.value,
shortform: abbForm.shortform.replace(/\s/g,"").toLowerCase(),
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 => {
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 = ""
})
appState.open = '';
});
})
.catch(() => {
db.shortforms.put(sf).then(result => {
db.shortforms.put(sf).then((result) => {
cacheShortform(sf);
appState.open = ""
})
})
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);
}
});
</script>
<Card.Root class="mx-auto w-[490px]">
@ -99,10 +103,22 @@
<Card.Description></Card.Description>
</Card.Header>
<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">
<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 class="grid grid-cols-4 items-center gap-4">
<Label>Text</Label>
@ -110,24 +126,21 @@
</div>
<div class="grid grid-cols-4 items-center gap-4">
<Label>Mål</Label>
<Select.Root selected={abbForm.target} onSelectedChange={onSelectedChange}>
<Select.Root selected={abbForm.target} {onSelectedChange}>
<Select.Trigger class="w-[290px]">
<Select.Value placeholder="Ingen lista vald" />
</Select.Trigger>
<Select.Content>
{#each selectedLists as list}
<Select.Item
value={list.id}
label={list.name}
>{list.name}</Select.Item>
<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
{/each}
</Select.Content>
</Select.Root>
</div>
{#if abbForm.errors.length > 0}
<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>
<ul class="p-6">
{#each abbForms.errors as error}
@ -147,4 +160,3 @@
</Card.Footer>
-->
</Card.Root>

30
src/components/menu.svelte
View File

@ -1,13 +1,21 @@
<script>
import { appState } from "$lib/stores.svelte"
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index";
import { appState } from '$lib/stores.svelte';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
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>
<DropdownMenu.Root open={appState.menuOpen} onOpenChange={(v) => {appState.menuOpen = v}} closeFocus="textarea#doc.textarea">
<DropdownMenu.Root
open={appState.menuOpen}
onOpenChange={(v) => {
appState.menuOpen = v;
}}
{closeFocus}
>
<DropdownMenu.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="absolute top-2 right-2" size="icon">
<Button builders={[builder]} variant="ghost" class="absolute right-2 top-2" size="icon">
<Gear class="h-4 w-4" />
</Button>
</DropdownMenu.Trigger>
@ -15,7 +23,11 @@
<DropdownMenu.Label>Inställningar</DropdownMenu.Label>
<DropdownMenu.Separator />
<DropdownMenu.Group>
<DropdownMenu.Item on:click={() => {appState.open="create"}}>
<DropdownMenu.Item
on:click={() => {
appState.open = 'create';
}}
>
Lägg till förkortning
<DropdownMenu.Shortcut>F2</DropdownMenu.Shortcut>
</DropdownMenu.Item>
@ -64,10 +76,12 @@
Hjälp
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>Feedback
<DropdownMenu.Item
>Feedback
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Item>Användarkonto
<DropdownMenu.Item
>Användarkonto
<DropdownMenu.Shortcut>F12</DropdownMenu.Shortcut>
</DropdownMenu.Item>
<DropdownMenu.Separator />

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

@ -58,9 +58,14 @@ export const selectNextColor = () => {
textSettings.colors = colorThemes[(selectedColor % 6)]
}
export const toggleMenuOpen = () => {
export const toggleMenuOpen = (force = undefined) => {
if (force == undefined) {
appState.menuOpen = !appState.menuOpen
} else {
appState.menuOpen = force
}
}
export const incTextSize = () => {
console.log(textSettings.size)

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();
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"
}
})

35
src/routes/+page.svelte
View File

@ -4,41 +4,42 @@
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;
</script>
<svelte:head>
<title>SKRIVERT</title>
</svelte:head>
<svelte:window on:keydown={handleHotkeys} />
<div class="h-dvh w-full overflow-hidden" role="application">
{#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">
{#if appState.open == 'create'}
<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 />
</div>
{/if}