From 3b01e65e11c1b3695246ed922e96e83924f11216 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sat, 17 Dec 2022 01:30:30 +0100
Subject: [PATCH] CSS only initimg hover, 'use as input' button

---
 ui/media/css/main.css | 12 ++++++++++++
 ui/media/js/main.js   | 22 +++++-----------------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index f2123cb3..f8a52a3a 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1068,7 +1068,19 @@ div.task-initimg > img {
 }
 div.task-fs-initimage {
     display:  none;
+#    position: absolute;
+}
+div.task-initimg:hover div.task-fs-initimage {
+    display: block;
     position: absolute;
+    z-index: 9999;
+    box-shadow: 0 0 30px #000;
+    margin-top:-64px;
+}
+div.top-right {
+    position: absolute;
+    top: 8px;
+    right: 8px;
 }
 
 button#save-system-settings-btn {
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index f21494ba..022ebc97 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -743,23 +743,11 @@ async function onTaskStart(task) {
 /* Hover effect for the init image in the task list */
 function createInitImageHover(taskEntry) {
     var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') )
-    $( taskEntry.querySelector('div.task-initimg > img') ).on('mouseenter', function() {
-        var img = this,
-           $img = $(img),
-           offset = $img.offset();
-    
-       $tooltip
-       .css({
-           'top': offset.top,
-           'left': offset.left,
-           'z-index': 99999,
-           'display': 'block'
-       })
-       .append($img.clone().css({width:"", height:""}));
-    })
-    $tooltip.on('mouseleave', function() {
-       $tooltip.empty().addClass('hidden');
-    });
+    var img = document.createElement('img')
+    img.src = taskEntry.querySelector('div.task-initimg > img').src
+    $tooltip.append(img)
+    $tooltip.append(`<div class="top-right"><button>Use as Input</button></div>`)
+    $tooltip.find('button').on('click', (e) => { onUseAsInputClick(null,img) } )
 }
 
 function createTask(task) {