From 99205b4d03e2cd4cbe063e522d77e16b4d1ebe80 Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Mon, 6 Feb 2023 15:14:47 +0530
Subject: [PATCH] Show an X over an image, instead of a remove button in image
 options

---
 ui/media/css/main.css | 13 ++++++++++++-
 ui/media/js/main.js   | 11 ++++++-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index c9f0a84a..ea98868c 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -107,6 +107,7 @@ code {
 .imgContainer {
     display: flex;
     justify-content: flex-end;
+    position: relative;
 }
 .imgItemInfo {
     padding-bottom: 0.5em;
@@ -114,16 +115,26 @@ code {
     align-items: flex-end;
     flex-direction: column;
     position: absolute;
-    padding: 5px;
+    padding-right: 5pt;
+    padding-top: 6pt;
     opacity: 0;
     transition: 0.1s all;
 }
+.imgPreviewItemClearBtn {
+    opacity: 0;
+}
 .imgContainer:hover > .imgItemInfo {
     opacity: 1;
 }
+.imgContainer:hover > .imgPreviewItemClearBtn {
+    opacity: 1;
+}
 .imgItemInfo * {
     margin-bottom: 7px;
 }
+.imgItem .image_clear_btn {
+    transform: translate(40%, -50%);
+}
 #container {
     min-height: 100vh;
     width: 100%;
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index e01b2307..b0842620 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -263,6 +263,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                     <div class="imgItemInfo">
                         <span class="imgSeedLabel"></span>
                     </div>
+                    <button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                 </div>
             `
             outputContainer.appendChild(imageItemElem)
@@ -275,6 +276,11 @@ function showImages(reqBody, res, outputContainer, livePreview) {
         imageElem.setAttribute('data-steps', imageInferenceSteps)
         imageElem.setAttribute('data-guidance', imageGuidanceScale)
 
+        const imageRemoveBtn = imageItemElem.querySelector('.imgPreviewItemClearBtn')
+        imageRemoveBtn.addEventListener('click', (e) => {
+            console.log(e)
+            shiftOrConfirm(e, "Remove the image from the results?", () => { imageItemElem.style.display = 'none' })
+        })
 
         const imageInfo = imageItemElem.querySelector('.imgItemInfo')
         imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')
@@ -288,7 +294,6 @@ function showImages(reqBody, res, outputContainer, livePreview) {
             imageSeedLabel.innerText = 'Seed: ' + req.seed
 
             let buttons = [
-                { text: 'Remove', on_click: onRemoveClick, class: 'secondaryButton' },
                 { text: 'Use as Input', on_click: onUseAsInputClick },
                 { text: 'Download', on_click: onDownloadImageClick },
                 { text: 'Make Similar Images', on_click: onMakeSimilarClick },
@@ -325,10 +330,6 @@ function showImages(reqBody, res, outputContainer, livePreview) {
     })
 }
 
-function onRemoveClick(req, img, event) {
-    shiftOrConfirm(event, "Remove the image from the results?", () => { findClosestAncestor(img, '.imgItem').style.display='none' })
-}
-
 function onUseAsInputClick(req, img) {
     const imgData = img.src