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

Author: Miodec

frontend/src/styles/keymap.scss

@@ -49,15 +49,15 @@
       }
     }
 
-    &.keySpace {
+    &.layoutIndicator {
       width: 100%;
       &:hover {
         cursor: pointer;
         color: var(--main-color);
       }
     }
 
-    &.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%;

frontend/src/ts/elements/keymap.ts

@@ -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 {

frontend/src/ts/event-handlers/keymap.ts

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

frontend/src/ts/test/shift-tracker.ts

@@ -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;
     }