Add keyboard shortcut for help screen (#4315)

* Add keyboard shortcut for help screen

* Make escape key go back to the previous screen

* Use key instead of which

* Use router for navigating back

* Use alt instead of cmd/ctrl
This commit is contained in:
Noah van der Aa 2021-10-11 05:48:28 +02:00 committed by GitHub
parent 2ab671664e
commit 9a0ba1da6c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 1 deletions

View File

@ -199,6 +199,16 @@
</div> </div>
</div> </div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>/</kbd></span>
<span v-else><kbd></kbd> <kbd>/</kbd></span>
</div>
<div class="description">
<p>Switch to the help menu.</p>
</div>
</div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <div class="subject">
<span><kbd>Esc</kbd></span> <span><kbd>Esc</kbd></span>

View File

@ -3,7 +3,7 @@
import Mousetrap from "mousetrap"; import Mousetrap from "mousetrap";
import store from "./store"; import store from "./store";
import {switchToChannel} from "./router"; import {switchToChannel, router, navigate} from "./router";
import isChannelCollapsed from "./helpers/isChannelCollapsed"; import isChannelCollapsed from "./helpers/isChannelCollapsed";
import isIgnoredKeybind from "./helpers/isIgnoredKeybind"; import isIgnoredKeybind from "./helpers/isIgnoredKeybind";
@ -107,6 +107,17 @@ Mousetrap.bind(["alt+a"], function (e) {
return false; return false;
}); });
// Show the help menu.
Mousetrap.bind(["alt+/"], function (e) {
if (isIgnoredKeybind(e)) {
return true;
}
navigate("Help");
return false;
});
function jumpToChannel(targetChannel) { function jumpToChannel(targetChannel) {
switchToChannel(targetChannel); switchToChannel(targetChannel);
@ -156,6 +167,12 @@ const ignoredKeys = {
}; };
document.addEventListener("keydown", (e) => { document.addEventListener("keydown", (e) => {
// Allow navigating back to the previous page when on the help screen.
if (e.key === "Escape" && router.currentRoute.name === "Help") {
router.go(-1);
return;
}
// Ignore any key that uses alt modifier // Ignore any key that uses alt modifier
// Ignore keys defined above // Ignore keys defined above
if (e.altKey || ignoredKeys[e.which]) { if (e.altKey || ignoredKeys[e.which]) {