Add keybinds to expand and collapse networks

Fixes #3523
This commit is contained in:
Pavel Djundik 2020-01-02 22:41:52 +02:00
parent ff4fd0a13d
commit 1870145674
4 changed files with 60 additions and 11 deletions

View File

@ -65,12 +65,14 @@
</template> </template>
<script> <script>
import Mousetrap from "mousetrap";
import Draggable from "vuedraggable"; import Draggable from "vuedraggable";
import NetworkLobby from "./NetworkLobby.vue"; import NetworkLobby from "./NetworkLobby.vue";
import Channel from "./Channel.vue"; import Channel from "./Channel.vue";
import JoinChannel from "./JoinChannel.vue"; import JoinChannel from "./JoinChannel.vue";
import socket from "../js/socket"; import socket from "../js/socket";
import collapseNetwork from "../js/helpers/collapseNetwork";
export default { export default {
name: "NetworkList", name: "NetworkList",
@ -85,7 +87,25 @@ export default {
return this.$store.state.networks; 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: { 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) { isCurrentlyInTouch(e) {
// TODO: Implement a way to sort on touch devices // TODO: Implement a way to sort on touch devices
return e.pointerType !== "mouse"; return e.pointerType !== "mouse";

View File

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

View File

@ -115,6 +115,26 @@
</div> </div>
</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="help-item">
<div class="subject"> <div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd></kbd></span> <span v-if="!isApple"><kbd>Alt</kbd> <kbd></kbd></span>
@ -165,6 +185,8 @@
</div> </div>
</div> </div>
<h2>Formatting Shortcuts</h2>
<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>

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