Add keyboard shortcuts to toggle server/user list

Fixes #2345
This commit is contained in:
Pavel Djundik 2020-01-02 22:24:20 +02:00
parent 98aef9b6ad
commit ff4fd0a13d
2 changed files with 33 additions and 0 deletions

View File

@ -11,6 +11,7 @@
<script> <script>
const constants = require("../js/constants"); const constants = require("../js/constants");
import Mousetrap from "mousetrap";
import throttle from "lodash/throttle"; import throttle from "lodash/throttle";
import storage from "../js/localStorage"; import storage from "../js/localStorage";
@ -39,6 +40,9 @@ export default {
this.prepareOpenStates(); this.prepareOpenStates();
}, },
mounted() { mounted() {
Mousetrap.bind("alt+u", this.toggleUserList);
Mousetrap.bind("alt+s", this.toggleSidebar);
// Make a single throttled resize listener available to all components // Make a single throttled resize listener available to all components
this.debouncedResize = throttle(() => { this.debouncedResize = throttle(() => {
this.$root.$emit("resize"); this.$root.$emit("resize");
@ -56,10 +60,19 @@ export default {
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay()); this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
}, },
beforeDestroy() { beforeDestroy() {
Mousetrap.unbind("alt+u", this.toggleUserList);
Mousetrap.unbind("alt+s", this.toggleSidebar);
window.removeEventListener("resize", this.debouncedResize); window.removeEventListener("resize", this.debouncedResize);
clearTimeout(this.dayChangeTimeout); clearTimeout(this.dayChangeTimeout);
}, },
methods: { methods: {
toggleSidebar() {
this.$store.commit("toggleSidebar");
},
toggleUserList() {
this.$store.commit("toggleUserlist");
},
msUntilNextDay() { msUntilNextDay() {
// Compute how many milliseconds are remaining until the next day starts // Compute how many milliseconds are remaining until the next day starts
const today = new Date(); const today = new Date();

View File

@ -145,6 +145,26 @@
</div> </div>
</div> </div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>S</kbd></span>
<span v-else><kbd></kbd> <kbd>S</kbd></span>
</div>
<div class="description">
<p>Toggle sidebar.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>U</kbd></span>
<span v-else><kbd></kbd> <kbd>U</kbd></span>
</div>
<div class="description">
<p>Toggle channel user list.</p>
</div>
</div>
<div class="help-item"> <div class="help-item">
<div class="subject"> <div class="subject">
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span> <span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>