Merge pull request #3660 from thelounge/xpaw/keybinds

Add keybinds to toggle sidebar, user list, and networks

client/components/App.vue

@@ -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();

client/components/NetworkList.vue

@@ -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";

client/components/NetworkLobby.vue

@@ -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";

client/components/Windows/Help.vue

@@ -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>

client/js/helpers/collapseNetwork.js

@@ -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]));
+};