From e0f25b36335d678f9aaaa528c482c3d1e8256170 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Wed, 31 May 2023 13:23:21 -0400
Subject: [PATCH] fix order plugins

---
 public/scss/admin/extend/plugins.scss | 23 +++--------------------
 public/src/admin/extend/plugins.js    | 18 +++++++++++++++---
 src/views/admin/extend/plugins.tpl    |  2 +-
 3 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/public/scss/admin/extend/plugins.scss b/public/scss/admin/extend/plugins.scss
index 0dcd19b2d2..54d98a90a3 100644
--- a/public/scss/admin/extend/plugins.scss
+++ b/public/scss/admin/extend/plugins.scss
@@ -1,30 +1,13 @@
 .plugins {
 	.plugin-list.ui-sortable {
 		li {
-			cursor: pointer;
-
-			.fa-chevron-up {
-				margin-right: 10px;
-			}
-
-			.fa-chevron-up, .fa-chevron-down {
-				border: 1px solid;
-				border-radius: 50%;
-				padding: 3px;
-				vertical-align: 1px;
-				background-color: white;
-			}
-
 			&:first-child .fa-chevron-up, &:last-child .fa-chevron-down {
 				pointer-events: none;
 				color: $gray-300;
 			}
+			&:last-child {
+				border-bottom: none!important;
+			}
 		}
 	}
-	.controls .btn {
-		display: list-item;
-		width: 150px;
-		margin-bottom: 3px;
-		margin-left: 10px;
-	}
 }
\ No newline at end of file
diff --git a/public/src/admin/extend/plugins.js b/public/src/admin/extend/plugins.js
index 4d3d009d63..622908e9fe 100644
--- a/public/src/admin/extend/plugins.js
+++ b/public/src/admin/extend/plugins.js
@@ -194,7 +194,19 @@ define('admin/extend/plugins', [
 				}
 				let html = '';
 				activePlugins.forEach(function (plugin) {
-					html += '<li class="">' + plugin + '<span class="float-end"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
+					html += `
+						<li class="d-flex justify-content-between gap-1 pointer border-bottom pb-2">
+							${plugin}
+							<div class="d-flex gap-1">
+								<div class="btn-ghost-sm move-up">
+									<i class="fa fa-chevron-up"></i>
+								</div>
+								<div class="btn-ghost-sm move-down">
+									<i class="fa fa-chevron-down"></i>
+								</div>
+							</div>
+						</li>
+					`;
 				});
 				if (!activePlugins.length) {
 					translator.translate('[[admin/extend/plugins:none-active]]', function (text) {
@@ -205,12 +217,12 @@ define('admin/extend/plugins', [
 				const list = $('#order-active-plugins-modal .plugin-list');
 				list.html(html).sortable();
 
-				list.find('.fa-chevron-up').on('click', function () {
+				list.find('.move-up').on('click', function () {
 					const item = $(this).parents('li');
 					item.prev().before(item);
 				});
 
-				list.find('.fa-chevron-down').on('click', function () {
+				list.find('.move-down').on('click', function () {
 					const item = $(this).parents('li');
 					item.next().after(item);
 				});
diff --git a/src/views/admin/extend/plugins.tpl b/src/views/admin/extend/plugins.tpl
index 967d18e780..49beec0ee7 100644
--- a/src/views/admin/extend/plugins.tpl
+++ b/src/views/admin/extend/plugins.tpl
@@ -123,7 +123,7 @@
 							<p>
 								[[admin/extend/plugins:order.explanation]]
 							</p>
-							<ul class="plugin-list"></ul>
+							<ul class="plugin-list list-unstyled d-flex flex-column gap-2"></ul>
 						</div>
 						<div class="modal-footer">
 							<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">[[global:buttons.close]]</button>