mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-04 04:26:54 +08:00
refactor(keymap): rework how space keys and layout indicator are handled
This commit is contained in:
parent
64cbbfcfc4
commit
cc7a2be286
4 changed files with 12 additions and 14 deletions
|
@ -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%;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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",
|
||||
});
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
Loading…
Add table
Reference in a new issue