From 8f4e03550c11126f8b8b7a7203752f547f7a737e Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 19 Dec 2022 00:14:57 +0100
Subject: [PATCH 1/2] Add drag handle

---
 ui/media/css/main.css |  9 +++++++--
 ui/media/js/main.js   | 16 ++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index f8a52a3a..0f28ab6d 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -265,7 +265,7 @@ img {
 }
 .preview-prompt {
     font-size: 13pt;
-    margin-bottom: 10pt;
+    display: inline;
 }
 #coffeeButton {
     height: 23px;
@@ -391,14 +391,18 @@ img {
 .imageTaskContainer > div > .collapsible-handle {
     display: none;
 }
+.drag-handle {
+    margin-right: 6px;
+    cursor: move;
+}
 .taskStatusLabel {
-    float: left;
     font-size: 8pt;
     background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
     margin-right: 5pt;
+    display: inline;
 }
 .activeTaskLabel {
     background:rgb(0, 90, 30);
@@ -448,6 +452,7 @@ img {
     font-size: 10pt;
     color: #aaa;
     margin-bottom: 5pt;
+    margin-top: 5pt;
 }
 .img-batch {
     display: inline;
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index ea3968ca..19e37347 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -783,6 +783,7 @@ function createTask(task) {
     taskEntry.id = `imageTaskContainer-${Date.now()}`
     taskEntry.className = 'imageTaskContainer'
     taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
+                                <i class="drag-handle fa-solid fa-grip"></i>
                                 <div class="taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-trash-can"></i> Remove</button>
                                 <button class="secondaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
@@ -796,6 +797,13 @@ function createTask(task) {
                             </div>`
 
     createCollapsibles(taskEntry)
+    let draghandle = taskEntry.querySelector('.drag-handle')
+    draghandle.addEventListener('mousedown', (e) => { taskEntry.setAttribute('draggable',true)})
+    draghandle.addEventListener('mouseup',   (e) => { taskEntry.setAttribute('draggable',false)})
+    taskEntry.addEventListener('dragend',    (e) => { taskEntry.setAttribute('draggable',false)})
+    taskEntry.addEventListener('dragstart', function(e) {
+        e.dataTransfer.setData("text/plain", taskEntry.id);
+    })
 
 
     if (task.reqBody.init_image !== undefined) {
@@ -829,11 +837,7 @@ function createTask(task) {
 
     task.isProcessing = true
     taskEntry = imagePreview.insertBefore(taskEntry, previewTools.nextSibling)
-    taskEntry.draggable = true
     htmlTaskMap.set(taskEntry, task)
-    taskEntry.addEventListener('dragstart', function(ev) {
-        ev.dataTransfer.setData("text/plain", ev.target.id);
-    })
 
     task.previewPrompt.innerText = task.reqBody.prompt
     if (task.previewPrompt.innerText.trim() === '') {
@@ -841,12 +845,12 @@ function createTask(task) {
     }
 
     // Allow prompt text to be selected.
-    task.previewPrompt.addEventListener("mouseover", function() {
+/*    task.previewPrompt.addEventListener("mouseover", function() {
         taskEntry.setAttribute("draggable", "false");
     });
     task.previewPrompt.addEventListener("mouseout", function() {
         taskEntry.setAttribute("draggable", "true");
-    });
+    }); */
 }
 
 function getCurrentUserRequest() {

From 39350d554b3d8e26e18bddf48529e859182c30bc Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Mon, 19 Dec 2022 00:32:13 +0100
Subject: [PATCH 2/2] Remove old code

---
 ui/media/js/main.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 19e37347..936fbf8b 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -844,13 +844,6 @@ function createTask(task) {
         task.previewPrompt.innerHTML = '&nbsp;' // allows the results to be collapsed
     }
 
-    // Allow prompt text to be selected.
-/*    task.previewPrompt.addEventListener("mouseover", function() {
-        taskEntry.setAttribute("draggable", "false");
-    });
-    task.previewPrompt.addEventListener("mouseout", function() {
-        taskEntry.setAttribute("draggable", "true");
-    }); */
 }
 
 function getCurrentUserRequest() {