From eac2b5283ac1ca2a148abe32a253e9bedaab4135 Mon Sep 17 00:00:00 2001
From: Cyperghost <olaf_schmitz_1@t-online.de>
Date: Thu, 28 Nov 2024 10:27:55 +0100
Subject: [PATCH] Use `WoltLabSuite/Core/Ui/Sortable/List` for acp boxes
 sorting

---
 wcfsetup/install/files/acp/style/layout.scss   |  4 ++++
 .../__dashboardBoxesConfigurationFormField.tpl | 18 ++++++------------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/wcfsetup/install/files/acp/style/layout.scss b/wcfsetup/install/files/acp/style/layout.scss
index 271489b8bb..0ae8dd7508 100644
--- a/wcfsetup/install/files/acp/style/layout.scss
+++ b/wcfsetup/install/files/acp/style/layout.scss
@@ -1040,3 +1040,7 @@ html[data-color-scheme="dark"] {
 	margin-top: 20px;
 	text-align: center;
 }
+
+#acpDashboardSortableContainer .sortableNode {
+	border-bottom: none;
+}
diff --git a/wcfsetup/install/files/acp/templates/__dashboardBoxesConfigurationFormField.tpl b/wcfsetup/install/files/acp/templates/__dashboardBoxesConfigurationFormField.tpl
index c073544b05..6c2f2cf296 100644
--- a/wcfsetup/install/files/acp/templates/__dashboardBoxesConfigurationFormField.tpl
+++ b/wcfsetup/install/files/acp/templates/__dashboardBoxesConfigurationFormField.tpl
@@ -1,7 +1,7 @@
 <div id="acpDashboardSortableContainer" class="sortableListContainer">
 	<ul class="sortableList" id="{$field->getPrefixedId()}_list">
 		{foreach from=$field->getNestedOptions() item=__fieldNestedOption}
-			<li{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
+			<li class="sortableNode"{if $__fieldNestedOption[depth] > 0} style="padding-left: {$__fieldNestedOption[depth]*20}px"{/if}>
 				<span class="sortableHandle">
 					{icon name='arrows-up-down'}
 				</span>
@@ -24,16 +24,10 @@
 </div>
 
 <script data-relocate="true">
-	$(() => {
-		new window.WCF.Sortable.List(
-			'acpDashboardSortableContainer',
-			'',
-			0,
-			{
-				handle: '.sortableHandle'
-			},
-			true,
-			{},
-		);
+	require(['WoltLabSuite/Core/Ui/Sortable/List'], (SortableList) => {
+		new SortableList({
+			containerId: 'acpDashboardSortableContainer',
+			isSimpleSorting: true,
+		});
 	});
 </script>
-- 
2.20.1