Merge pull request #272 from dmartin-tech/master

Remove uneeded tag and added matrix display for keymap

public/css/style.scss

@@ -2411,7 +2411,8 @@ key {
   }
 }
 
-.hidden-key {
+.hidden-key,
+.hide-key {
   opacity: 0;
 }
 
@@ -2440,3 +2441,14 @@ key {
   display: grid;
   grid-template-columns: 4fr 7.5fr 4fr;
 }
+
+.matrix {
+  display: flex;
+  justify-content: left;
+  margin-left: 4.51rem;
+}
+
+.matrixSpace {
+  grid-template-columns: 6.75fr 1.9fr 6.75fr;
+  //grid-template-columns: 6.90fr 4.60fr 6.90fr; // wider spacebar
+}

public/index.html

@@ -1812,6 +1812,28 @@
                 </div>
               </div>
             </div>
+            <div class="section keymapStyle">
+              <h1>keymap style</h1>
+              <div class="text">Displays the keymap in a different style.</div>
+              <div class="buttons">
+                <div
+                  class="button"
+                  keymapStyle="staggered"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  staggered
+                </div>
+                <div
+                  class="button"
+                  keymapStyle="matrix"
+                  tabindex="0"
+                  onclick="this.blur();"
+                >
+                  matrix
+                </div>
+              </div>
+            </div>
             <div class="section keymapLayout">
               <h1>keymap layout</h1>
               <div class="buttons"></div>

public/js/settings.js

@@ -93,12 +93,18 @@ settingsGroups.keymapMode = new SettingsGroup(
   },
   () => {
     if (config.keymapMode === "off") {
+      $(".pageSettings .section.keymapStyle").addClass("hidden");
       $(".pageSettings .section.keymapLayout").addClass("hidden");
     } else {
+      $(".pageSettings .section.keymapStyle").removeClass("hidden");
       $(".pageSettings .section.keymapLayout").removeClass("hidden");
     }
   }
 );
+settingsGroups.keymapMatrix = new SettingsGroup(
+  "keymapStyle",
+  changeKeymapStyle
+);
 settingsGroups.keymapLayout = new SettingsGroup(
   "keymapLayout",
   changeKeymapLayout

public/js/userconfig.js

@@ -40,6 +40,7 @@ let defaultConfig = {
   stopOnError: false,
   showAllLines: false,
   keymapMode: "off",
+  keymapStyle: "staggered",
   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);
+    changeKeymapStyle(configObj.keymapStyle, true);
     changeKeymapLayout(configObj.keymapLayout, true);
     setFontFamily(configObj.fontFamily, true);
     setSmoothLineScroll(configObj.smoothLineScroll, true);
@@ -791,6 +793,25 @@ function changeKeymapMode(mode, nosave) {
   if (!nosave) saveConfigToCookie();
 }
 
+function changeKeymapStyle(style, nosave) {
+  if (style === "staggered") {
+    $(".r1, .r2, .r3, .r4").removeClass("matrix");
+    $(".r5").removeClass("matrixSpace");
+    $("#KeyLeftBracket").removeClass("hide-key");
+    $("#KeyRightBracket").removeClass("hide-key");
+    $("#KeyQuote").removeClass("hide-key");
+  }
+  if (style === "matrix") {
+    $(".r1, .r2, .r3, .r4").addClass("matrix");
+    $(".r5").addClass("matrixSpace");
+    $("#KeyLeftBracket").addClass("hide-key");
+    $("#KeyRightBracket").addClass("hide-key");
+    $("#KeyQuote").addClass("hide-key");
+  }
+  config.keymapStyle = style;
+  if (!nosave) saveConfigToCookie();
+}
+
 function changeKeymapLayout(layout, nosave) {
   if (layout == null || layout == undefined) {
     layout = "qwerty";