Merge pull request #3594 from thelounge/richrd/jump-to

Jump to channel switcher
This commit is contained in:
Richard Lewis 2020-02-10 19:56:04 +02:00 committed by GitHub
commit 1fb78d7218
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 355 additions and 76 deletions

View File

@ -9,10 +9,6 @@
</div>
</template>
<style>
@import "../css/style.css";
</style>
<script>
const constants = require("../js/constants");
import Mousetrap from "mousetrap";

View File

@ -1,5 +1,5 @@
<template>
<ChannelWrapper ref="wrapper" :network="network" :channel="channel">
<ChannelWrapper ref="wrapper" v-bind="$props">
<span class="name">{{ channel.name }}</span>
<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
unreadCount
@ -36,6 +36,8 @@ export default {
props: {
network: Object,
channel: Object,
active: Boolean,
isFiltering: Boolean,
},
computed: {
unreadCount() {

View File

@ -5,7 +5,7 @@
ref="element"
:class="[
'channel-list-item',
{active: activeChannel && channel === activeChannel.channel},
{active: active},
{'parted-channel': channel.type === 'channel' && channel.state === 0},
{'has-draft': channel.pendingMessage},
{
@ -19,7 +19,7 @@
:data-name="channel.name"
:data-type="channel.type"
:aria-controls="'#chan-' + channel.id"
:aria-selected="activeChannel && channel === activeChannel.channel"
:aria-selected="active"
:style="channel.closed ? {transition: 'none', opacity: 0.4} : null"
role="tab"
@click="click"
@ -37,13 +37,15 @@ export default {
props: {
network: Object,
channel: Object,
active: Boolean,
isFiltering: Boolean,
},
computed: {
activeChannel() {
return this.$store.state.activeChannel;
},
isChannelVisible() {
return !isChannelCollapsed(this.network, this.channel);
return this.isFiltering || !isChannelCollapsed(this.network, this.channel);
},
},
methods: {
@ -65,6 +67,10 @@ export default {
return this.channel.name;
},
click() {
if (this.isFiltering) {
return;
}
this.$root.switchToChannel(this.channel);
},
openContextMenu(event) {

View File

@ -1,72 +1,192 @@
<template>
<div v-if="networks.length === 0" class="empty">
<div v-if="$store.state.networks.length === 0" class="empty">
You are not connected to any networks yet.
</div>
<Draggable
v-else
:list="networks"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
handle=".channel-list-item[data-type='lobby']"
draggable=".network"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
group="networks"
class="networks"
@change="onNetworkSort"
@start="onDragStart"
@end="onDragEnd"
>
<div
v-for="network in networks"
:id="'network-' + network.uuid"
:key="network.uuid"
:class="{
collapsed: network.isCollapsed,
}"
class="network"
role="region"
>
<NetworkLobby
:network="network"
:is-join-channel-shown="network.isJoinChannelShown"
@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
<div v-else ref="networklist">
<div class="jump-to-input">
<input
ref="searchInput"
:value="searchText"
placeholder="Jump to..."
type="search"
class="search input mousetrap"
aria-label="Search among the channel list"
tabindex="-1"
@input="setSearchText"
@keydown.up="navigateResults($event, -1)"
@keydown.down="navigateResults($event, 1)"
@keydown.page-up="navigateResults($event, -10)"
@keydown.page-down="navigateResults($event, 10)"
@keydown.enter="selectResult"
@keydown.escape="deactivateSearch"
@focus="activateSearch"
/>
<JoinChannel
v-if="network.isJoinChannelShown"
:network="network"
:channel="network.channels[0]"
@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
/>
<Draggable
draggable=".channel-list-item"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
:group="network.uuid"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
:list="network.channels"
class="channels"
@change="onChannelSort"
@start="onDragStart"
@end="onDragEnd"
>
<Channel
v-for="(channel, index) in network.channels"
v-if="index > 0"
:key="channel.id"
:channel="channel"
:network="network"
/>
</Draggable>
</div>
</Draggable>
<div v-if="searchText" class="jump-to-results">
<div v-if="results.length">
<div
v-for="item in results"
:key="item.channel.id"
@mouseenter="setActiveSearchItem(item.channel)"
@click.prevent="selectResult"
>
<Channel
v-if="item.channel.type !== 'lobby'"
:channel="item.channel"
:network="item.network"
:active="item.channel === activeSearchItem"
:is-filtering="true"
/>
<NetworkLobby
v-else
:channel="item.channel"
:network="item.network"
:active="item.channel === activeSearchItem"
:is-filtering="true"
/>
</div>
</div>
<div v-else class="no-results">
No results found.
</div>
</div>
<Draggable
v-else
:list="$store.state.networks"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
handle=".channel-list-item[data-type='lobby']"
draggable=".network"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
group="networks"
class="networks"
@change="onNetworkSort"
@start="onDragStart"
@end="onDragEnd"
>
<div
v-for="network in $store.state.networks"
:id="'network-' + network.uuid"
:key="network.uuid"
:class="{
collapsed: network.isCollapsed,
'not-connected': !network.status.connected,
'not-secure': !network.status.secure,
}"
class="network"
role="region"
>
<NetworkLobby
:network="network"
:is-join-channel-shown="network.isJoinChannelShown"
:active="
$store.state.activeChannel &&
network.channels[0] === $store.state.activeChannel.channel
"
@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
/>
<JoinChannel
v-if="network.isJoinChannelShown"
:network="network"
:channel="network.channels[0]"
@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
/>
<Draggable
draggable=".channel-list-item"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
:group="network.uuid"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
:list="network.channels"
class="channels"
@change="onChannelSort"
@start="onDragStart"
@end="onDragEnd"
>
<Channel
v-for="(channel, index) in network.channels"
v-if="index > 0"
:key="channel.id"
:channel="channel"
:network="network"
:active="
$store.state.activeChannel &&
channel === $store.state.activeChannel.channel
"
/>
</Draggable>
</div>
</Draggable>
</div>
</template>
<style>
.jump-to-input {
margin: 8px;
position: relative;
}
.jump-to-input .input {
margin: 0;
width: 100%;
border: 0;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
padding-right: 35px;
}
.jump-to-input .input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.jump-to-input::before {
content: "\f002"; /* http://fontawesome.io/icon/search/ */
color: rgba(255, 255, 255, 0.35);
position: absolute;
right: 8px;
top: 0;
bottom: 0;
pointer-events: none;
line-height: 35px !important;
}
.jump-to-results {
margin: 0;
padding: 0;
list-style: none;
overflow: auto;
}
.jump-to-results .no-results {
margin: 14px 8px;
text-align: center;
}
.jump-to-results .channel-list-item.active {
cursor: pointer;
}
.jump-to-results .channel-list-item .add-channel,
.jump-to-results .channel-list-item .close-tooltip {
display: none;
}
.jump-to-results .channel-list-item[data-type="lobby"] {
padding: 8px 14px;
}
.jump-to-results .channel-list-item[data-type="lobby"]::before {
content: "\f233";
}
</style>
<script>
import Mousetrap from "mousetrap";
import Draggable from "vuedraggable";
import {filter as fuzzyFilter} from "fuzzy";
import NetworkLobby from "./NetworkLobby.vue";
import Channel from "./Channel.vue";
import JoinChannel from "./JoinChannel.vue";
@ -82,18 +202,53 @@ export default {
Channel,
Draggable,
},
data() {
return {
searchText: "",
activeSearchItem: null,
};
},
computed: {
networks() {
return this.$store.state.networks;
items() {
const items = [];
for (const network of this.$store.state.networks) {
for (const channel of network.channels) {
if (
this.$store.state.activeChannel &&
channel === this.$store.state.activeChannel.channel
) {
continue;
}
items.push({network, channel});
}
}
return items;
},
results() {
const results = fuzzyFilter(this.searchText, this.items, {
extract: (item) => item.channel.name,
}).map((item) => item.original);
return results;
},
},
watch: {
searchText() {
this.setActiveSearchItem();
},
},
mounted() {
Mousetrap.bind("alt+shift+right", this.expandNetwork);
Mousetrap.bind("alt+shift+left", this.collapseNetwork);
Mousetrap.bind("alt+j", this.toggleSearch);
},
beforeDestroy() {
Mousetrap.unbind("alt+shift+right", this.expandNetwork);
Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
Mousetrap.unbind("alt+j", this.toggleSearch);
},
methods: {
expandNetwork() {
@ -123,7 +278,7 @@ export default {
socket.emit("sort", {
type: "networks",
order: this.networks.map((n) => n.uuid),
order: this.$store.state.networks.map((n) => n.uuid),
});
},
onChannelSort(e) {
@ -143,6 +298,116 @@ export default {
order: channel.network.channels.map((c) => c.id),
});
},
toggleSearch(event) {
// Do not handle this keybind in the chat input because
// it can be used to type letters with umlauts
if (event.target.tagName === "TEXTAREA") {
return true;
}
if (this.$refs.searchInput === document.activeElement) {
this.deactivateSearch();
return false;
}
this.activateSearch();
return false;
},
activateSearch() {
if (this.$refs.searchInput === document.activeElement) {
return;
}
this.sidebarWasClosed = this.$store.state.sidebarOpen ? false : true;
this.$store.commit("sidebarOpen", true);
this.$nextTick(() => {
this.$refs.searchInput.focus();
});
},
deactivateSearch() {
this.activeSearchItem = null;
this.searchText = "";
this.$refs.searchInput.blur();
if (this.sidebarWasClosed) {
this.$store.commit("sidebarOpen", false);
}
},
setSearchText(e) {
this.searchText = e.target.value;
},
setActiveSearchItem(channel) {
if (!this.results.length) {
return;
}
if (!channel) {
channel = this.results[0].channel;
}
this.activeSearchItem = channel;
},
selectResult() {
if (!this.searchText || !this.results.length) {
return;
}
this.$root.switchToChannel(this.activeSearchItem);
this.deactivateSearch();
this.scrollToActive();
},
navigateResults(event, direction) {
// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
// and redirecting it to the message list container for scrolling
event.stopImmediatePropagation();
event.preventDefault();
if (!this.searchText) {
return;
}
const channels = this.results.map((r) => r.channel);
// Bail out if there's no channels to select
if (!channels.length) {
this.activeSearchItem = null;
return;
}
let currentIndex = channels.indexOf(this.activeSearchItem);
// If there's no active channel select the first or last one depending on direction
if (!this.activeSearchItem || currentIndex === -1) {
this.activeSearchItem = direction ? channels[0] : channels[channels.length - 1];
this.scrollToActive();
return;
}
currentIndex += direction;
// Wrap around the list if necessary. Normaly each loop iterates once at most,
// but might iterate more often if pgup or pgdown are used in a very short list
while (currentIndex < 0) {
currentIndex += channels.length;
}
while (currentIndex > channels.length - 1) {
currentIndex -= channels.length;
}
this.activeSearchItem = channels[currentIndex];
this.scrollToActive();
},
scrollToActive() {
// Scroll the list if needed after the active class is applied
this.$nextTick(() => {
const el = this.$refs.networklist.querySelector(".channel-list-item.active");
if (el) {
el.scrollIntoView({block: "nearest", inline: "nearest"});
}
});
},
},
};
</script>

View File

@ -1,5 +1,5 @@
<template>
<ChannelWrapper :network="network" :channel="channel">
<ChannelWrapper v-bind="$props" :channel="channel">
<button
v-if="network.channels.length > 1"
:aria-controls="'network-' + network.uuid"
@ -58,6 +58,8 @@ export default {
props: {
network: Object,
isJoinChannelShown: Boolean,
active: Boolean,
isFiltering: Boolean,
},
computed: {
channel() {

View File

@ -185,6 +185,16 @@
</div>
</div>
<div class="help-item">
<div class="subject">
<span v-if="!isApple"><kbd>Alt</kbd> <kbd>J</kbd></span>
<span v-else><kbd></kbd> <kbd>J</kbd></span>
</div>
<div class="description">
<p>Toggle jump to channel switcher.</p>
</div>
</div>
<h2>Formatting Shortcuts</h2>
<div class="help-item">

View File

@ -325,6 +325,7 @@ p {
.channel-list-item .not-secure-icon::before,
.channel-list-item .not-connected-icon::before,
.channel-list-item .parted-channel-icon::before,
.jump-to-input::before,
#sidebar .collapse-network-icon::before {
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
@ -618,6 +619,7 @@ p {
width: 220px;
max-height: 100%;
will-change: transform;
color: #b7c5d1; /* same as .channel-list-item color */
}
#viewport.menu-open #sidebar {
@ -648,7 +650,6 @@ p {
.channel-list-item,
#sidebar .empty {
color: #b7c5d1;
font-size: 14px;
}
@ -703,10 +704,6 @@ background on hover (unless active) */
right: 10px;
}
#sidebar .networks {
padding-top: 5px;
}
#sidebar .network {
position: relative;
margin-bottom: 20px;

View File

@ -2,6 +2,7 @@
const constants = require("./constants");
import "../css/style.css";
import Vue from "vue";
import store from "./store";
import App from "../components/App.vue";