Allow network list reordering via touch.

Users can now long touch and drag a channel or network to change its
ordering in the sidebar.
This commit is contained in:
itsjohncs 2021-10-10 00:50:54 -07:00
parent 7b28d3c0f8
commit a48f449c59
3 changed files with 59 additions and 30 deletions

View File

@ -82,11 +82,15 @@ export default {
this.$root.switchToChannel(this.channel);
},
openContextMenu(event) {
eventbus.emit("contextmenu:channel", {
event: event,
channel: this.channel,
network: this.network,
});
// events.buttons will be 0 when the event is caused by a long
// touch on Android.
if (event.buttons !== 0) {
eventbus.emit("contextmenu:channel", {
event: event,
channel: this.channel,
network: this.network,
});
}
},
},
};

View File

@ -56,17 +56,18 @@
<Draggable
v-else
:list="$store.state.networks"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
:delay="LONG_TOUCH_DURATION"
:delay-on-touch-only="true"
:touch-start-threshold="10"
handle=".channel-list-item[data-type='lobby']"
draggable=".network"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
drag-class="ui-sortable-dragging"
group="networks"
class="networks"
@change="onNetworkSort"
@start="onDragStart"
@end="onDragEnd"
@choose="onDraggableChoose"
@unchoose="onDraggableUnchoose"
>
<div
v-for="network in $store.state.networks"
@ -100,15 +101,16 @@
<Draggable
draggable=".channel-list-item"
ghost-class="ui-sortable-ghost"
drag-class="ui-sortable-dragged"
drag-class="ui-sortable-dragging"
:group="network.uuid"
:filter="isCurrentlyInTouch"
:prevent-on-filter="false"
:list="network.channels"
:delay="LONG_TOUCH_DURATION"
:delay-on-touch-only="true"
:touch-start-threshold="10"
class="channels"
@change="onChannelSort"
@start="onDragStart"
@end="onDragEnd"
@choose="onDraggableChoose"
@unchoose="onDraggableUnchoose"
>
<template v-for="(channel, index) in network.channels">
<Channel
@ -246,6 +248,10 @@ export default {
this.setActiveSearchItem();
},
},
created() {
// Number of milliseconds a touch has to last to be considered long
this.LONG_TOUCH_DURATION = 500;
},
mounted() {
Mousetrap.bind("alt+shift+right", this.expandNetwork);
Mousetrap.bind("alt+shift+left", this.collapseNetwork);
@ -279,16 +285,6 @@ export default {
return false;
},
isCurrentlyInTouch(e) {
// TODO: Implement a way to sort on touch devices
return e.pointerType !== "mouse";
},
onDragStart(e) {
e.target.classList.add("ui-sortable-active");
},
onDragEnd(e) {
e.target.classList.remove("ui-sortable-active");
},
onNetworkSort(e) {
if (!e.moved) {
return;
@ -316,6 +312,26 @@ export default {
order: channel.network.channels.map((c) => c.id),
});
},
isTouchEvent(event) {
// This is the same way Sortable.js detects a touch event. See
// SortableJS/Sortable@daaefeda:/src/Sortable.js#L465
return (
(event.touches && event.touches[0]) ||
(event.pointerType && event.pointerType === "touch")
);
},
onDraggableChoose(event) {
if (this.isTouchEvent(event.originalEvent)) {
// onDrag is only triggered when the user actually moves the
// dragged object but onChoose is triggered as soon as the
// item is eligible for dragging. This gives us an opportunity
// to tell the user they've held the touch long enough.
event.item.classList.add("ui-sortable-dragging-touch-cue");
}
},
onDraggableUnchoose(event) {
event.item.classList.remove("ui-sortable-dragging-touch-cue");
},
toggleSearch(event) {
if (isIgnoredKeybind(event)) {
return true;

View File

@ -707,14 +707,19 @@ background on hover (unless active) */
/* Remove background on hovered/active channel when sorting/drag-and-dropping */
.ui-sortable-ghost,
.channel-list-item.ui-sortable-dragged,
.ui-sortable-dragged .channel-list-item,
.ui-sortable-active .channel-list-item:hover,
.ui-sortable-active .channel-list-item.active {
.ui-sortable-dragging .channel-list-item,
.ui-sortable-dragging,
.ui-sortable-dragging:hover,
.ui-sortable-dragging.active,
.ui-sortable-dragging-touch-cue .channel-list-item,
.ui-sortable-dragging-touch-cue,
.ui-sortable-dragging-touch-cue:hover,
.ui-sortable-dragging-touch-cue.active {
background: transparent;
}
.ui-sortable-ghost::after {
.ui-sortable-ghost::after,
.ui-sortable-dragging-touch-cue:not(.ui-sortable-dragging)::after {
background: var(--body-bg-color);
border: 1px dashed #99a2b4;
border-radius: 6px;
@ -727,6 +732,10 @@ background on hover (unless active) */
right: 10px;
}
.ui-sortable-dragging-touch-cue:not(.ui-sortable-ghost)::after {
background: transparent;
}
#sidebar .network {
position: relative;
margin-bottom: 20px;