From 1761e13dbd25345e7c880deb6357dc66ee1c425d Mon Sep 17 00:00:00 2001
From: psychobunny <psycho.bunny@hotmail.com>
Date: Wed, 30 Sep 2020 12:49:34 -0400
Subject: [PATCH] feat: dedicated sorting buttons for plugin ordering in ACP

---
 public/less/admin/extend/plugins.less | 17 +++++++++++++++++
 public/src/admin/extend/plugins.js    | 15 +++++++++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/public/less/admin/extend/plugins.less b/public/less/admin/extend/plugins.less
index b9cc6b8a26e0..d7e4584f0270 100644
--- a/public/less/admin/extend/plugins.less
+++ b/public/less/admin/extend/plugins.less
@@ -22,6 +22,23 @@
 	.plugin-list.ui-sortable {
 		li {
 			.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-light;
+			}
 		}
 	}
 	.controls .btn {
diff --git a/public/src/admin/extend/plugins.js b/public/src/admin/extend/plugins.js
index 03b49f52018d..ee6758dce71d 100644
--- a/public/src/admin/extend/plugins.js
+++ b/public/src/admin/extend/plugins.js
@@ -168,7 +168,7 @@ define('admin/extend/plugins', ['jqueryui', 'translator', 'benchpress'], functio
 				}
 				var html = '';
 				activePlugins.forEach(function (plugin) {
-					html += '<li class="">' + plugin + '</li>';
+					html += '<li class="">' + plugin + '<span class="pull-right"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
 				});
 				if (!activePlugins.length) {
 					translator.translate('[[admin/extend/plugins:none-active]]', function (text) {
@@ -176,7 +176,18 @@ define('admin/extend/plugins', ['jqueryui', 'translator', 'benchpress'], functio
 					});
 					return;
 				}
-				$('#order-active-plugins-modal .plugin-list').html(html).sortable();
+				var list = $('#order-active-plugins-modal .plugin-list');
+				list.html(html).sortable();
+
+				list.find('.fa-chevron-up').on('click', function () {
+					var item = $(this).parents('li');
+					item.prev().before(item);
+				});
+
+				list.find('.fa-chevron-down').on('click', function () {
+					var item = $(this).parents('li');
+					item.next().after(item);
+				});
 			});
 		});