From f9459ee1c3915612be67a49fe4ca83e7f85c5aa7 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Tue, 19 Mar 2019 15:11:44 +0200
Subject: [PATCH] Fix up sorting channel styling

---
 client/components/ChannelWrapper.vue |  2 +-
 client/components/NetworkList.vue    | 17 +++++++---
 client/css/style.css                 | 46 +++++++++++++---------------
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/client/components/ChannelWrapper.vue b/client/components/ChannelWrapper.vue
index 93a461ad..14cb1ff2 100644
--- a/client/components/ChannelWrapper.vue
+++ b/client/components/ChannelWrapper.vue
@@ -2,6 +2,7 @@
 	<div
 		v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
 		:class="[
+			'chan',
 			channel.type,
 			{ active: activeChannel && channel === activeChannel.channel },
 			{ 'parted-channel': channel.type === 'channel' && channel.state === 0 }
@@ -13,7 +14,6 @@
 		:data-name="channel.name"
 		:aria-controls="'#chan-' + channel.id"
 		:aria-selected="activeChannel && channel === activeChannel.channel"
-		class="chan"
 		role="tab"
 	>
 		<slot
diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 11c832c9..c1e1f92e 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -8,7 +8,12 @@
 	<Draggable
 		v-else
 		:list="networks"
-		:options="{ handle: '.lobby', draggable: '.network', ghostClass: 'network-placeholder', disabled: isSortingEnabled }"
+		:disabled="isSortingEnabled"
+		handle=".lobby"
+		draggable=".network"
+		ghost-class="ui-sortable-ghost"
+		drag-class="ui-sortable-dragged"
+		group="networks"
 		class="networks"
 		@change="onNetworkSort"
 		@start="onDragStart"
@@ -42,7 +47,11 @@
 			/>
 
 			<Draggable
-				:options="{ draggable: '.chan', ghostClass: 'chan-placeholder', disabled: isSortingEnabled }"
+				draggable=".chan"
+				ghost-class="ui-sortable-ghost"
+				drag-class="ui-sortable-dragged"
+				:group="network.uuid"
+				:disabled="isSortingEnabled"
 				:list="network.channels"
 				class="channels"
 				@change="onChannelSort"
@@ -92,10 +101,10 @@ export default {
 	},
 	methods: {
 		onDragStart(e) {
-			e.target.classList.add("ui-sortable-helper");
+			e.target.classList.add("ui-sortable-active");
 		},
 		onDragEnd(e) {
-			e.target.classList.remove("ui-sortable-helper");
+			e.target.classList.remove("ui-sortable-active");
 		},
 		onNetworkSort(e) {
 			if (!e.moved) {
diff --git a/client/css/style.css b/client/css/style.css
index 2953c7e8..9408b50a 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -582,6 +582,9 @@ kbd {
 }
 
 #sidebar .chan {
+	display: flex;
+	padding: 8px 14px;
+	position: relative;
 	cursor: pointer;
 }
 
@@ -606,19 +609,31 @@ background on hover (unless active) */
 }
 
 /* Remove background on hovered/active channel when sorting/drag-and-dropping */
-#sidebar .ui-sortable-helper .chan.active, /* Networks */
-#sidebar .ui-sortable-helper .chan:hover,
-#sidebar .chan.ui-sortable-helper.active, /* Channels */
-#sidebar .chan.ui-sortable-helper:hover {
-	background-color: transparent;
+#sidebar .chan.ui-sortable-dragged,
+#sidebar .ui-sortable-dragged .chan,
+#sidebar .ui-sortable-active .chan:hover,
+#sidebar .ui-sortable-active .chan.active {
+	background: transparent;
+}
+
+#sidebar .ui-sortable-ghost::after {
+	background: var(--body-bg-color);
+	border: 1px dashed #99a2b4;
+	border-radius: 6px;
+	content: " ";
+	display: block;
+	position: absolute;
+	left: 10px;
+	top: 0;
+	bottom: 0;
+	right: 10px;
 }
 
 #sidebar .networks {
 	padding-top: 5px;
 }
 
-#sidebar .network,
-#sidebar .network-placeholder {
+#sidebar .network {
 	position: relative;
 	margin-bottom: 20px;
 	touch-action: pan-y;
@@ -631,23 +646,6 @@ background on hover (unless active) */
 	text-align: center;
 }
 
-#sidebar .chan,
-#sidebar .chan-placeholder {
-	display: flex;
-	padding: 8px 14px;
-}
-
-#sidebar .network-placeholder,
-#sidebar .chan-placeholder {
-	border: 1px dashed #99a2b4;
-	border-radius: 6px;
-	margin: -1px;
-}
-
-#sidebar .network-placeholder {
-	margin-bottom: 29px;
-}
-
 #sidebar .chan.lobby {
 	color: #84ce88;
 	font-size: 15px;