Merge pull request #3114 from thelounge/xpaw/sortable-fixes

Change styling when dragging channels.

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

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) {

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 .chan.ui-sortable-dragged,
-#sidebar .ui-sortable-helper .chan:hover,
+#sidebar .ui-sortable-dragged .chan,
-#sidebar .chan.ui-sortable-helper.active, /* Channels */
+#sidebar .ui-sortable-active .chan:hover,
-#sidebar .chan.ui-sortable-helper:hover {
+#sidebar .ui-sortable-active .chan.active {
-	background-color: transparent;
+	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 {
-#sidebar .network-placeholder {
 	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;