From 73b3beb81b349be5b93d271f6007af80c8c918c6 Mon Sep 17 00:00:00 2001
From: Ben Zichettello <bz@projectample.com>
Date: Thu, 31 Aug 2023 13:19:23 -0400
Subject: [PATCH] feature: add a label to the task item html that indicates
 number of images enqueued (prior, it was unclear before task begins
 processing)

---
 ui/media/css/main.css | 6 +++++-
 ui/media/js/main.js   | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 32d7df88..256087fa 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -711,7 +711,11 @@ div.img-preview img {
     margin-right: 6px;
     cursor: move;
 }
-.taskStatusLabel {
+/* Override conflicting css from imported library */
+.header-content > .drag-handle {
+    min-width: initial !important;
+}
+.taskStatusLabel, .taskNumberOfImagesLabel {
     font-size: 8pt;
     background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index ade330d8..a120bab3 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -1102,6 +1102,7 @@ function createTask(task) {
     taskEntry.className = "imageTaskContainer"
     taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
                                 <i class="drag-handle fa-solid fa-grip"></i>
+                                ${task.numOutputsTotal > 1 ? `<div class="taskNumberOfImagesLabel">✕${task.numOutputsTotal}</div>` : ''}
                                 <div class="taskStatusLabel">Enqueued</div>
                                 <button class="secondaryButton stopTask"><i class="fa-solid fa-xmark"></i> Cancel</button>
                                 <button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>