refactor(keymap): rework how space keys and layout indicator are handled

This commit is contained in:
Miodec 2024-11-04 14:28:40 +01:00
parent 64cbbfcfc4
commit cc7a2be286
4 changed files with 12 additions and 14 deletions

View file

@ -49,7 +49,7 @@
}
}
&.keySpace {
&.layoutIndicator {
width: 100%;
&:hover {
cursor: pointer;
@ -57,7 +57,7 @@
}
}
&.keySplitSpace {
&.keySpace.right {
width: 100%;
opacity: 0;
}
@ -153,7 +153,7 @@
.r5 {
grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}
}
@ -181,7 +181,7 @@
.r5 {
grid-template-columns: 1fr 2fr 3fr 1fr 3fr 2fr 1fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}
}
@ -434,7 +434,7 @@
.r5 {
grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}
@ -443,7 +443,7 @@
margin-left: -5%;
margin-top: 21%;
}
div.keySplitSpace {
div.keySpace.right {
transform: rotate(-10deg);
margin-left: -33%;
margin-top: 20%;

View file

@ -33,7 +33,7 @@ function highlightKey(currentKey: string): void {
currentKey = Hangul.disassemble(currentKey)[0] ?? currentKey;
}
if (currentKey === " ") {
highlightKey = "#keymap .keySpace, #keymap .keySplitSpace";
highlightKey = "#keymap .keySpace";
} else if (currentKey === '"') {
highlightKey = `#keymap .keymapKey[data-key*='${currentKey}']`;
} else {
@ -54,7 +54,7 @@ async function flashKey(key: string, correct?: boolean): Promise<void> {
if (key === undefined) return;
//console.log("key", key);
if (key === " ") {
key = "#keymap .keySpace, #keymap .keySplitSpace";
key = "#keymap .keySpace";
} else if (key === '"') {
key = `#keymap .keymapKey[data-key*='${key}']`;
} else {
@ -209,11 +209,11 @@ export async function refresh(
letterStyle = `style="display: none;"`;
}
rowElement += "<div></div>";
rowElement += `<div class="keymapKey keySpace">
rowElement += `<div class="keymapKey keySpace layoutIndicator left">
<div class="letter" ${letterStyle}>${layoutDisplay}</div>
</div>`;
rowElement += `<div class="keymapSplitSpacer"></div>`;
rowElement += `<div class="keymapKey keySplitSpace">
rowElement += `<div class="keymapKey keySpace right">
<div class="letter"></div>
</div>`;
} else {

View file

@ -1,6 +1,6 @@
import { getCommandline } from "../utils/async-modules";
$("#keymap").on("click", ".r5 .keySpace", async () => {
$("#keymap").on("click", ".r5 .layoutIndicator", async () => {
(await getCommandline()).show({
subgroupOverride: "keymapLayouts",
});

View file

@ -44,9 +44,7 @@ async function updateKeymapLegendCasing(): Promise<void> {
const keymapKeys = [...document.getElementsByClassName("keymapKey")].filter(
(el) => {
const isKeymapKey = el.classList.contains("keymapKey");
const isNotSpace =
!el.classList.contains("keySpace") &&
!el.classList.contains("keySplitSpace");
const isNotSpace = !el.classList.contains("keySpace");
return isKeymapKey && isNotSpace;
}