From 7dea8d94843ecb40678a37db5fe46e1f9d793388 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Tue, 19 May 2020 05:28:52 +0200
Subject: [PATCH] Greatly improve service reordering drag and drop

---
 resources/js/index.js     | 28 +++++++++++++++++++++-------
 resources/style/index.css |  4 +---
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/resources/js/index.js b/resources/js/index.js
index 62503ad..f2f266e 100644
--- a/resources/js/index.js
+++ b/resources/js/index.js
@@ -22,6 +22,7 @@ let addButton;
 let emptyPage;
 let urlPreview;
 
+let lastDragPosition;
 
 // Service context menu
 function openServiceContextMenu(event, serviceId) {
@@ -146,7 +147,7 @@ ipcRenderer.on('data', (event, appData, brandIcons, solidIcons, actualServices,
     }
 
     // Init drag last position
-    const lastDragPosition = document.getElementById('service-last-drag-position');
+    lastDragPosition = document.getElementById('service-last-drag-position');
     lastDragPosition.addEventListener('dragover', () => {
         const index = services.length;
         if (draggedId !== index && draggedId !== index - 1) {
@@ -311,13 +312,25 @@ function initDrag(index, li) {
         event.dataTransfer.dropEffect = 'move';
         document.getElementById('service-last-drag-position').classList.remove('hidden');
     });
-    li.addEventListener('dragover', () => {
-        if (draggedId !== index && draggedId !== index - 1) {
-            resetDrag();
-            lastDragTarget = dragTargetId = index;
-            document.getElementById('service-last-drag-position').classList.remove('hidden');
-            li.classList.add('drag-target');
+    li.addEventListener('dragover', (e) => {
+        let realIndex = index;
+        let rect = li.getBoundingClientRect();
+
+        if ((e.clientY - rect.y) / rect.height >= 0.5) {
+            realIndex++;
         }
+
+        if (draggedId === realIndex - 1) {
+            realIndex--;
+        }
+
+        resetDrag();
+        let el = realIndex === services.length ? lastDragPosition : services[realIndex].li;
+        lastDragTarget = dragTargetId = realIndex;
+        lastDragPosition.classList.remove('hidden');
+        el.classList.add('drag-target');
+
+        if (draggedId === realIndex || draggedId === realIndex - 1) el.classList.add('drag-target-self');
     });
     li.addEventListener('dragend', () => {
         reorderService(draggedId, lastDragTarget);
@@ -331,6 +344,7 @@ function resetDrag() {
     dragTargetCount = 0;
     document.getElementById('service-selector').querySelectorAll('li').forEach(li => {
         li.classList.remove('drag-target');
+        li.classList.remove('drag-target-self');
     });
     const lastDragPosition = document.getElementById('service-last-drag-position');
     lastDragPosition.classList.remove('drag-target');
diff --git a/resources/style/index.css b/resources/style/index.css
index 0ac8e42..639db37 100644
--- a/resources/style/index.css
+++ b/resources/style/index.css
@@ -38,7 +38,7 @@ body {
     user-drag: none;
 }
 
-#service-selector .drag-target button {
+#service-selector .drag-target:not(.drag-target-self) button {
     height: 96px;
     padding-top: 48px;
 }
@@ -49,8 +49,6 @@ body {
     height: 48px;
     border: 1px dashed #fff;
     box-sizing: border-box;
-
-    background-color: rgb(43, 43, 43);
 }
 
 #service-selector .drag-target button::after {