supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #3660 from thelounge/xpaw/keybinds

Browse Source 
Add keybinds to toggle sidebar, user list, and networks
This commit is contained in:
Pavel Djundik 2020-01-03 16:59:41 +02:00 committed by GitHub
commit 7b507e5248
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 93 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/components/App.vue
View File

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

20
client/components/NetworkList.vue
View File

@ -65,12 +65,14 @@
</template>
<script>
import Mousetrap from "mousetrap";
import Draggable from "vuedraggable";
import NetworkLobby from "./NetworkLobby.vue";
import Channel from "./Channel.vue";
import JoinChannel from "./JoinChannel.vue";
import socket from "../js/socket";
import collapseNetwork from "../js/helpers/collapseNetwork";
export default {
name: "NetworkList",
@ -85,7 +87,25 @@ export default {
return this.$store.state.networks;
},
},
mounted() {
Mousetrap.bind("alt+shift+right", this.expandNetwork);
Mousetrap.bind("alt+shift+left", this.collapseNetwork);
},
beforeDestroy() {
Mousetrap.unbind("alt+shift+right", this.expandNetwork);
Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
},
methods: {
expandNetwork() {
if (this.$store.state.activeChannel) {
collapseNetwork(this.$store.state.activeChannel.network, false);
}
},
collapseNetwork() {
if (this.$store.state.activeChannel) {
collapseNetwork(this.$store.state.activeChannel.network, true);
}
},
isCurrentlyInTouch(e) {
// TODO: Implement a way to sort on touch devices
return e.pointerType !== "mouse";

13
client/components/NetworkLobby.vue
View File

@ -46,9 +46,9 @@
</template>
<script>
import collapseNetwork from "../js/helpers/collapseNetwork";
import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
import ChannelWrapper from "./ChannelWrapper.vue";
import storage from "../js/localStorage";
export default {
name: "Channel",
@ -72,16 +72,7 @@ export default {
},
methods: {
onCollapseClick() {
const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
this.network.isCollapsed = !this.network.isCollapsed;
if (this.network.isCollapsed) {
networks.add(this.network.uuid);
} else {
networks.delete(this.network.uuid);
}
storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
collapseNetwork(this.network, !this.network.isCollapsed);
},
getExpandLabel(network) {
return network.isCollapsed ? "Expand" : "Collapse";

42
client/components/Windows/Help.vue
View File

@ -115,6 +115,26 @@
</div>
</div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>←</kbd></span>
<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>←</kbd></span>
</div>
<div class="description">
<p>Collapse current network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>→</kbd></span>
<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>→</kbd></span>
</div>
<div class="description">
<p>Expand current network.</p>
</div>
</div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↓</kbd></span>
@ -145,6 +165,28 @@
</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>
<h2>Formatting Shortcuts</h2>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>

16
client/js/helpers/collapseNetwork.js Normal file
View File

@ -0,0 +1,16 @@
"use strict";
import storage from "../localStorage";
export default (network, isCollapsed) => {
const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
network.isCollapsed = isCollapsed;
if (isCollapsed) {
networks.add(network.uuid);
} else {
networks.delete(network.uuid);
}
storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
};