✨ List available shortcuts with Ctrl+Shift+K

Author: GitSquared

src/_renderer.js

@@ -772,6 +772,62 @@ window.writeSettingsFile = () => {
     document.getElementById("settingsEditorStatus").innerText = "New values written to settings.json file at "+new Date().toTimeString();
 };
 
+// Display available keyboard shortcuts
+window.openShortcutsHelp = () => {
+    new Modal({
+        type: "custom",
+        title: `Available Keyboard Shortcuts <i>(v${electron.remote.app.getVersion()})</i>`,
+        html: `<h5>Using either the on-screen or a physical keyboard, you can use the following shortcuts:</h5>
+                <table id="shortcutsHelp" style="width: 100%;">
+                    <tr>
+                        <th>Trigger</th>
+                        <th>Action</th>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl + Shift"} + C</td>
+                        <td>Copy selected buffer from the terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl + Shift"} + V</td>
+                        <td>Paste system clipboard to the terminal.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Tab</td>
+                        <td>Switch to the next opened terminal tab (left to right order).</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + Tab</td>
+                        <td>Switch to the previous opened terminal tab (right to left order).</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + [1-5]</td>
+                        <td>Switch to a specific terminal tab, or create it if it hasn't been opened yet.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + S</td>
+                        <td>Open the settings editor.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + K</td>
+                        <td>List available keyboard shortcuts.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + H</td>
+                        <td>Toggle hidden files and directories in the file browser.</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + P</td>
+                        <td>Toggle the on-screen keyboard's "Password Mode", that allows you to safely type<br> sensitive information even if your screen might be recorded (disables visual input feedback).</td>
+                    </tr>
+                    <tr>
+                        <td>${process.platform === "darwin" ? "Command" : "Ctrl"} + Shift + I</td>
+                        <td>Open Chromium Dev Tools (for debugging purposes).</td>
+                    </tr>
+                </table>
+                <br>`
+    });
+};
+
 // Global keyboard shortcuts
 const globalShortcut = electron.remote.globalShortcut;
 globalShortcut.unregisterAll();
@@ -789,6 +845,13 @@ function registerKeyboardShortcuts() {
         }
     });
 
+    // Open list of keyboard shortcuts
+    globalShortcut.register("CommandOrControl+Shift+K", () => {
+        if (!document.getElementById("shortcutsHelp")) {
+            window.openShortcutsHelp();
+        }
+    });
+
     // Copy and paste shortcuts
 
     if (process.platform === "darwin") {

src/assets/css/modal.css

@@ -84,27 +84,34 @@ div.modal_popup button {
 }
 
 div.modal_popup button:hover {
-    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.5)
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.5);
 }
 
-/* Settings editor modal */
-table#settingsEditor, table#settingsEditor th, table#settingsEditor td {
+div.modal_popup table, div.modal_popup table th, div.modal_popup table td {
     border: 0.15vh solid rgb(var(--color_r), var(--color_g), var(--color_b));
     border-collapse: collapse;
 }
 
-table#settingsEditor th, table#settingsEditor td {
+div.modal_popup table th, div.modal_popup table td {
     padding: 0.3vh;
 }
 
-table#settingsEditor th {
+div.modal_popup table th {
     font-size: 2vh;
+    background: rgba(var(--color_r), var(--color_g), var(--color_b), 0.6);
+    color: var(--color_light_black);
 }
 
-table#settingsEditor td {
+div.modal_popup table td {
     font-size: 1.7vh;
 }
 
+div.modal_popup table:not(#settingsEditor) td:first-child {
+    text-align: center;
+}
+
+/* Settings editor modal */
+
 table#settingsEditor td input {
     width: 100%;
     background: var(--color_light_black);
@@ -137,3 +144,11 @@ h6#settingsEditorStatus {
     font-size: 1.5vh;
     font-style: italic;
 }
+
+/* Keyboard shortcuts modal */
+
+table#shortcutsHelp td:first-child {
+    word-spacing: .3vh;
+    font-weight: bold;
+    padding: .8vh;
+}

src/classes/keyboard.class.js

@@ -313,6 +313,7 @@ class Keyboard {
 
         // Keyboard shortcuts
         if (this.container.dataset.isCtrlOn === "true" && this.container.dataset.isShiftOn === "true") {
+            console.log(key.dataset);
             switch(cmd) {
                 case "c":
                     window.term[window.currentTerm].clipboard.copy();
@@ -325,6 +326,11 @@ class Keyboard {
                         window.openSettings();
                     }
                     return true;
+                case "k":
+                    if (!document.getElementById("shortcutsHelp")) {
+                        window.openShortcutsHelp();
+                    }
+                    return true;
                 case "i":
                     electron.remote.getCurrentWindow().webContents.toggleDevTools();
                     return true;

src/classes/modal.class.js

@@ -30,7 +30,7 @@ class Modal {
             case "custom":
                 classes += " info custom";
                 zindex = 500;
-                buttons = options.buttons;
+                buttons = options.buttons || [];
                 buttons.push({label:"Close", action:"window.modals["+this.id+"].close();"});
                 break;
             default: