monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 15:26:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

impr(keymap): add param which allows the rightmost column to be visible on matrix layouts

Browse source 
This is helpful when layouts use the rightmost column for
something other than modifiers (for example swedish)

Closes #4623
This commit is contained in:
Miodec 2023-09-13 13:31:54 +01:00
parent f962896d6c
commit 24c90e9d12
4 changed files with 23 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

137
frontend/src/styles/keymap.scss
View file

@ -113,28 +113,13 @@
&.matrix {
.r1,
.r2,
.r3 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.r3,
.r4 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.r5 {
grid-template-columns: 3fr 4fr 3fr;
}
.r1,
.r2,
.r3 {
:nth-child(13) {
opacity: 0;
}
:nth-child(14) {
opacity: 0;
}
grid-template-columns: 1fr 3fr 4fr 3fr 1fr;
}
}
&.split {
@ -187,38 +172,17 @@
}
.r1,
.r2,
.r3 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.r3,
.r4 {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
.r5 {
grid-template-columns: 2fr 3fr 1fr 3fr 2fr;
grid-template-columns: 1fr 2fr 3fr 1fr 3fr 2fr 1fr;
}
.keySplitSpace {
opacity: 1;
}
.r1 {
:nth-child(12) {
opacity: 0;
}
}
.r1,
.r2,
.r3 {
:nth-child(13) {
opacity: 0;
}
:nth-child(14) {
opacity: 0;
}
}
}
&.steno,
&.steno_matrix {
@ -473,87 +437,6 @@
opacity: 1;
}
// div#KeyE.keymapKey,
// div#KeyD.keymapKey {
// margin-top: 6px;
// }
// div#KeyC.keymapKey {
// margin-top: 8px;
// }
// div#KeyR.keymapKey,
// div#KeyF.keymapKey {
// margin-top: 12px;
// }
// div#KeyV.keymapKey {
// margin-top: 14px;
// }
// div#KeyT.keymapKey,
// div#KeyG.keymapKey {
// margin-top: 18px;
// }
// div#KeyB.keymapKey {
// margin-top: 20px;
// }
// div#KeyY.keymapKey,
// div#KeyU.keymapKey,
// div#KeyI.keymapKey,
// div#KeyO.keymapKey {
// transform: rotate(-10deg);
// margin-left: -25%;
// }
// div#KeyH.keymapKey,
// div#KeyJ.keymapKey,
// div#KeyK.keymapKey,
// div#KeyL.keymapKey {
// transform: rotate(-10deg);
// margin-left: -35%;
// }
// div#KeyN.keymapKey,
// div#KeyM.keymapKey,
// div#KeyComma.keymapKey {
// transform: rotate(-10deg);
// margin-left: -16%;
// }
// div#KeyP.keymapKey,
// div#KeyLeftBracket.keymapKey,
// div#KeyRightBracket.keymapKey {
// margin-left: 5%;
// }
// div#KeySemicolon.keymapKey,
// div#KeyQuote.keymapKey {
// margin-left: -25%;
// }
// div#KeyPeriod.keymapKey,
// div#KeySlash.keymapKey {
// margin-left: -3px;
// }
// div#KeyO.keymapKey,
// div#KeyComma.keymapKey {
// margin-top: 3px;
// }
// div#KeyL.keymapKey {
// margin-top: 1px;
// }
// div#KeyI.keymapKey,
// div#KeyM.keymapKey {
// margin-top: 9px;
// }
// div#KeyK.keymapKey {
// margin-top: 7px;
// }
// div#KeyU.keymapKey,
// div#KeyN.keymapKey {
// margin-top: 15px;
// }
// div#KeyJ.keymapKey {
// margin-top: 13px;
// }
// div#KeyY.keymapKey {
// margin-top: 21px;
// }
// div#KeyH.keymapKey {
// margin-top: 19px;
// }
div.keySpace {
transform: rotate(10deg);
margin-left: -5%;
@ -585,13 +468,5 @@
height: 2rem;
position: relative;
}
// div#KeySpace.keymapKey:after {
// content: 'Alice';
// text-indent: 0;
// font-weight: 600!important;
// margin: auto;
// font-size: 0.9rem;
// color: var(--bg-color)
// }
}
}

16
frontend/src/ts/elements/keymap.ts
View file

@ -183,6 +183,14 @@ export async function refresh(
rowElement += "<div></div>";
}
if (isMatrix) {
if (row !== "row5") {
rowElement += `<div class="keymapKey"></div>`;
} else {
rowElement += `<div></div>`;
}
}
if (row === "row5") {
if (isSteno) return;
const layoutDisplay = layoutString.replace(/_/g, " ");
@ -201,10 +209,16 @@ export async function refresh(
} else {
for (let i = 0; i < rowKeys.length; i++) {
if (row === "row2" && i === 12) continue;
let colLimit = 10;
if (lts.matrixShowRightColumn) {
colLimit = 11;
}
if (
(Config.keymapStyle === "matrix" ||
Config.keymapStyle === "split_matrix") &&
i >= 10
i >= colLimit
) {
continue;
}

1
frontend/src/ts/types/types.d.ts vendored
View file

@ -818,6 +818,7 @@ declare namespace MonkeyTypes {
interface Layout {
keymapShowTopRow: boolean;
matrixShowRightColumn?: boolean;
type: "iso" | "ansi" | "ortho" | "matrix";
keys: Keys;
}

1
frontend/static/layouts/_list.json
View file

@ -1574,6 +1574,7 @@
},
"swedish_qwerty": {
"keymapShowTopRow": false,
"matrixShowRightColumn": true,
"type": "iso",
"keys": {
"row1": ["§½", "1!", "2\"", "3#", "4¤", "5%", "6&", "7/", "8(", "9)", "0=", "+?", "´`"],