Theaninova/DeviceManager
1
0
Fork 0
mirror of https://github.com/CharaChorder/DeviceManager.git synced 2026-01-22 18:02:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

layout prototype

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-07 00:45:06 +02:00
parent cbba6dfa09
commit 8ae383d260
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/components/LayoutCC1.svelte
View File

@@ -12,13 +12,13 @@
{/each} {/each}
</fieldset> </fieldset>
<div class="col" style="gap: 0"> <div class="col layout" style="gap: 0">
<div class="row" style="gap: 156px"> <div class="row" style="gap: 156px">
<div class="row"> <div class="row">
<RingInput {activeLayer} /> <RingInput {activeLayer} />
<div class="col"> <div class="col">
<RingInput {activeLayer} /> <RingInput {activeLayer} />
<RingInput {activeLayer} /> <RingInput {activeLayer} type="secondary" />
</div> </div>
<div class="col"> <div class="col">
<RingInput {activeLayer} /> <RingInput {activeLayer} />
@@ -62,7 +62,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 16px; margin-block-end: -36px;
padding: 0; padding: 0;
border: none; border: none;

7
src/lib/components/RingInput.svelte
View File

@@ -8,7 +8,10 @@
["j", "k", "l"], ["j", "k", "l"],
] ]
export let layerNames = ["Primary Layer", "Number Layer", "Function Layer"] /** @type {'primary' | 'secondary' | 'tertiary'} */
export let type = "primary"
const layerNames = ["Primary Layer", "Number Layer", "Function Layer"]
const virtualLayerMap = [1, 0, 2] const virtualLayerMap = [1, 0, 2]
const characterOffset = 8 const characterOffset = 8
@@ -24,7 +27,7 @@
} }
</script> </script>
<div class="radial"> <div class="radial {type}">
{#each layout as keys, quadrant} {#each layout as keys, quadrant}
<button title={getKeyDescriptions(keys)}> <button title={getKeyDescriptions(keys)}>
{#each keys as value, layer} {#each keys as value, layer}