✨ Keyboard "Password Mode" - See #394

Author: GitSquared

src/_renderer.js

@@ -860,6 +860,11 @@ function registerKeyboardShortcuts() {
     globalShortcut.register("CommandOrControl+Shift+H", () => {
         window.fsDisp.toggleHidedotfiles();
     });
+
+    // Hide on-screen keyboard visual feedback (#394)
+    globalShortcut.register("CommandOrControl+Shift+P", () => {
+        window.keyboard.togglePasswordMode();
+    });
 }
 registerKeyboardShortcuts();
 

src/assets/css/keyboard.css

@@ -7,6 +7,11 @@ section#keyboard {
     top: -0.925vh;
 }
 
+section#keyboard[data-password-mode="true"] {
+    opacity: 0.5 !important;
+    cursor: none !important;
+}
+
 div.keyboard_row {
     display: flex;
     flex-direction: row;
@@ -65,12 +70,12 @@ div.keyboard_key {
     cursor: pointer;
 }
 
-div.keyboard_key:active, div.keyboard_key.active {
+section#keyboard:not([data-password-mode="true"]) div.keyboard_key:active, section#keyboard:not([data-password-mode="true"]) div.keyboard_key.active {
     border: 0.18vh solid rgba(var(--color_r), var(--color_g), var(--color_b), 0.0);
     background-color: rgba(var(--color_r), var(--color_g), var(--color_b), 1);
 }
 
-div.keyboard_key.blink {
+section#keyboard:not([data-password-mode="true"]) div.keyboard_key.blink {
     animation-name: blink;
     animation-duration: .5s;
     animation-iteration-count: infinite;

src/classes/keyboard.class.js

@@ -21,6 +21,8 @@ class Keyboard {
         this.container.dataset.isCtrlOn = false;
         this.container.dataset.isFnOn = false;
 
+        this.container.dataset.passwordMode = false;
+
         // Parse keymap and create DOM
         Object.keys(layout).forEach(row => {
             this.container.innerHTML += `<div class="keyboard_row" id="`+row+`"></div>`;
@@ -329,6 +331,9 @@ class Keyboard {
                 case "h":
                     window.fsDisp.toggleHidedotfiles();
                     return true;
+                case "p":
+                    window.keyboard.togglePasswordMode();
+                    return true;
                 case "\t":
                     let i = window.currentTerm ? window.currentTerm : 4;
                     if (window.term[i] && i !== window.currentTerm) {
@@ -533,6 +538,12 @@ class Keyboard {
             document.activeElement.focus();
         }
     }
+    togglePasswordMode() {
+        let d = this.container.dataset.passwordMode;
+        (d === "true") ? d = "false" : d = "true";
+        this.container.dataset.passwordMode = d;
+        return d;
+    }
     addCircum(char) {
         switch(char) {
             case "a":