From a154f107a40c78e94d2b36480a820c9c47a669b5 Mon Sep 17 00:00:00 2001 From: David Martin Date: Mon, 10 Aug 2020 12:48:14 -0500 Subject: [PATCH] added simple implementation for displaying keymap in a matrix layout --- public/css/style.scss | 38 ++++++++++++++++++++------------------ public/index.html | 8 ++++++++ public/js/settings.js | 6 ++++++ public/js/userconfig.js | 13 +++++++++++++ 4 files changed, 47 insertions(+), 18 deletions(-) diff --git a/public/css/style.scss b/public/css/style.scss index 9c78aa2df..d1874ab4d 100644 --- a/public/css/style.scss +++ b/public/css/style.scss @@ -2,8 +2,8 @@ @import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Oxygen&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Oxygen&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); :root { --roundness: 0.25rem; @@ -379,7 +379,7 @@ a:hover { .check { span { display: block; - font-size: .76rem; + font-size: 0.76rem; color: var(--sub-color); margin-left: 1.5rem; } @@ -391,7 +391,7 @@ a:hover { height: 0; display: none; - &~.customTextRandomCheckbox { + & ~ .customTextRandomCheckbox { width: 12px; height: 12px; background: rgba(0, 0, 0, 0.1); @@ -402,7 +402,7 @@ a:hover { transition: 0.25s; } - &:checked~.customTextRandomCheckbox { + &:checked ~ .customTextRandomCheckbox { background: var(--main-color); } } @@ -785,8 +785,7 @@ a:hover { } &.outline { - @extend #caret, - .block; + @extend #caret, .block; background: transparent; border: 1px solid var(--caret-color); } @@ -824,7 +823,6 @@ a:hover { } @keyframes caretFlash { - 0%, 100% { opacity: 0; @@ -1509,9 +1507,9 @@ key { border-bottom: 2px solid var(--error-color); text-shadow: 1px 0px 0px var(--bg-color), // 2px 0px 0px var(--bg-color), - -1px 0px 0px var(--bg-color), + -1px 0px 0px var(--bg-color), // -2px 0px 0px var(--bg-color), - 0px 1px 0px var(--bg-color), + 0px 1px 0px var(--bg-color), 1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color); } @@ -1617,7 +1615,7 @@ key { height: 0; display: none; - &~.customCheckbox { + & ~ .customCheckbox { width: 12px; height: 12px; background: rgba(0, 0, 0, 0.1); @@ -1628,7 +1626,7 @@ key { transition: 0.25s; } - &:checked~.customCheckbox { + &:checked ~ .customCheckbox { background: var(--main-color); } } @@ -1692,14 +1690,14 @@ key { color: var(--sub-color); line-height: 2rem; cursor: pointer; - transition: .25s; + transition: 0.25s; &:hover { color: var(--text-color); } .fas { - margin-left: .5rem; + margin-left: 0.5rem; &.rotate { transform: rotate(-90deg); @@ -1904,7 +1902,7 @@ key { "title tabs" "buttons buttons"; column-gap: 2rem; - row-gap: .5rem; + row-gap: 0.5rem; .tabs { display: grid; @@ -2058,7 +2056,7 @@ key { .fas, .punc { - margin-right: .25rem; + margin-right: 0.25rem; } .spacer { @@ -2143,7 +2141,6 @@ key { grid-template-columns: repeat(4, 1fr); grid-auto-flow: unset; } - } .buttons { @@ -2434,4 +2431,9 @@ key { .r5 { display: grid; grid-template-columns: 4fr 7.5fr 4fr; -} \ No newline at end of file +} + +.matrix { + display: flex; + justify-content: left; +} diff --git a/public/index.html b/public/index.html index fb5c24b0f..b4cddb0b0 100644 --- a/public/index.html +++ b/public/index.html @@ -1244,6 +1244,14 @@
next
+
+

keymap matrix

+
Displays the layout in a matrix style.
+
+
off
+
on
+
+

keymap layout

diff --git a/public/js/settings.js b/public/js/settings.js index 061d76d2c..eafad97bf 100644 --- a/public/js/settings.js +++ b/public/js/settings.js @@ -94,11 +94,17 @@ settingsGroups.keymapMode = new SettingsGroup( () => { if (config.keymapMode === "off") { $(".pageSettings .section.keymapLayout").addClass("hidden"); + $(".pageSettings .section.keymapMatrix").addClass("hidden"); } else { $(".pageSettings .section.keymapLayout").removeClass("hidden"); + $(".pageSettings .section.keymapMatrix").removeClass("hidden"); } } ); +settingsGroups.keymapMatrix = new SettingsGroup( + "keymapMatrix", + changeKeymapMatrix +); settingsGroups.keymapLayout = new SettingsGroup( "keymapLayout", changeKeymapLayout diff --git a/public/js/userconfig.js b/public/js/userconfig.js index a3d11dcfc..acf6c41df 100644 --- a/public/js/userconfig.js +++ b/public/js/userconfig.js @@ -40,6 +40,7 @@ let defaultConfig = { stopOnError: false, showAllLines: false, keymapMode: "off", + keymapMatrix: false, keymapLayout: "qwerty", fontFamily: "Roboto_Mono", smoothLineScroll: false, @@ -147,6 +148,7 @@ function applyConfig(configObj) { setTimerColor(configObj.timerColor, true); setTimerOpacity(configObj.timerOpacity, true); changeKeymapMode(configObj.keymapMode, true); + changeKeymapMatrix(configObj.keymapMatrix, true); changeKeymapLayout(configObj.keymapLayout, true); setFontFamily(configObj.fontFamily, true); setSmoothLineScroll(configObj.smoothLineScroll, true); @@ -791,6 +793,17 @@ function changeKeymapMode(mode, nosave) { if (!nosave) saveConfigToCookie(); } +function changeKeymapMatrix(boolean, nosave) { + if (boolean !== undefined) config.keymapMatrix = boolean; + if (boolean === false) { + $(".r1, .r2, .r3, .r4").removeClass("matrix"); + } + if (boolean === true) { + $(".r1, .r2, .r3, .r4").addClass("matrix"); + } + if (!nosave) saveConfigToCookie(); +} + function changeKeymapLayout(layout, nosave) { if (layout == null || layout == undefined) { layout = "qwerty";