diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts index c06e54bc..2a281ef9 100644 --- a/src/i18n/de/index.ts +++ b/src/i18n/de/index.ts @@ -30,6 +30,7 @@ const de = { filter: { ALL: "Alle", }, + LIVE_LAYOUT_INFO: "Diese Aktion wurde auf Basis des Systemtastaturlayouts ermittelt.", SHIFT_WARNING: "Diese Aktion hält shift", ALT_CODE_WARNING: "Dieser Alt-Code Hack funktioniert nur unter Windows", }, diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts index 269d07f2..5a736b5b 100644 --- a/src/i18n/en/index.ts +++ b/src/i18n/en/index.ts @@ -29,6 +29,7 @@ const en = { filter: { ALL: "All", }, + LIVE_LAYOUT_INFO: "This output was determined using on your system layout.", SHIFT_WARNING: "This action holds shift", ALT_CODE_WARNING: "This alt-code hack only works on Windows", }, diff --git a/src/lib/assets/keymaps/keymap.d.ts b/src/lib/assets/keymaps/keymap.d.ts index ece7e611..f62d4298 100644 --- a/src/lib/assets/keymaps/keymap.d.ts +++ b/src/lib/assets/keymaps/keymap.d.ts @@ -13,4 +13,5 @@ export interface ActionInfo { description: string variant: "left" | "right" variantOf: number + keyCode: string } diff --git a/src/lib/components/Action.svelte b/src/lib/components/Action.svelte index 30fe727e..646e5141 100644 --- a/src/lib/components/Action.svelte +++ b/src/lib/components/Action.svelte @@ -2,14 +2,23 @@ import {KEYMAP_CODES} from "$lib/serial/keymap-codes" import type {KeyInfo} from "$lib/serial/keymap-codes" import {action as title} from "$lib/title" + import {osLayout} from "$lib/os-layout" + import LL from "../../i18n/i18n-svelte" export let action: number | KeyInfo export let display: "inline-keys" | "keys" = "inline-keys" $: info = typeof action === "number" ? KEYMAP_CODES[action] ?? {code: action} : action + $: dynamicMapping = info.keyCode && $osLayout[JSON.stringify([info.keyCode])] -{#if display === "keys"} +{#if dynamicMapping} + {dynamicMapping} +{:else if display === "keys"} {info.icon ?? info.id ?? `0x${info.code.toString(16)}`} @@ -30,6 +39,16 @@ transition: color 250ms ease; } + .dynamic { + padding: 4px; + border-radius: 1px; + background: var(--md-sys-color-surface-variant); + + &.inline { + padding: 0px; + } + } + .inline-kbd { margin-inline-end: 2px; } diff --git a/src/lib/components/ActionListItem.svelte b/src/lib/components/ActionListItem.svelte index 8c2a7087..0aeb2a16 100644 --- a/src/lib/components/ActionListItem.svelte +++ b/src/lib/components/ActionListItem.svelte @@ -2,6 +2,7 @@ import {KEYMAP_CODES} from "$lib/serial/keymap-codes" import type {KeyInfo} from "$lib/serial/keymap-codes" import LL from "../../i18n/i18n-svelte" + import Action from "$lib/components/Action.svelte" export let id: number | KeyInfo @@ -29,7 +30,7 @@ {@html $LL.actionSearch.ALT_CODE_WARNING()} {/if} - {key.icon || key.id || `0x${key.code.toString(16)}`} + {:else} 0x{key.toString(16)} {/if}