Skip to content

Commit

Permalink
refactor(keymap): rework how space keys and layout indicator are handled
Browse files Browse the repository at this point in the history
  • Loading branch information
Miodec committed Nov 4, 2024
1 parent 64cbbfc commit cc7a2be
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 14 deletions.
12 changes: 6 additions & 6 deletions frontend/src/styles/keymap.scss
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,15 @@
}
}

&.keySpace {
&.layoutIndicator {
width: 100%;
&:hover {
cursor: pointer;
color: var(--main-color);
}
}

&.keySplitSpace {
&.keySpace.right {
width: 100%;
opacity: 0;
}
Expand Down Expand Up @@ -153,7 +153,7 @@
.r5 {
grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}
}
Expand Down Expand Up @@ -181,7 +181,7 @@
.r5 {
grid-template-columns: 1fr 2fr 3fr 1fr 3fr 2fr 1fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}
}
Expand Down Expand Up @@ -434,7 +434,7 @@
.r5 {
grid-template-columns: 5fr 3fr 1fr 3fr 4.5fr;
}
.keySplitSpace {
.keySpace.right {
opacity: 1;
}

Expand All @@ -443,7 +443,7 @@
margin-left: -5%;
margin-top: 21%;
}
div.keySplitSpace {
div.keySpace.right {
transform: rotate(-10deg);
margin-left: -33%;
margin-top: 20%;
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/ts/elements/keymap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/ts/event-handlers/keymap.ts
Original file line number Diff line number Diff line change
@@ -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",
});
Expand Down
4 changes: 1 addition & 3 deletions frontend/src/ts/test/shift-tracker.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit cc7a2be

Please sign in to comment.