holm/easydiffusion
1
0
Fork 0
forked from extern/easydiffusion
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS only initimg hover, 'use as input' button

Browse Source
This commit is contained in:
JeLuF 2022-12-17 01:30:30 +01:00
parent 7eb29fa91b
commit 3b01e65e11
2 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/media/css/main.css
View File

@ -1068,7 +1068,19 @@ div.task-initimg > img {
} }
div.task-fs-initimage { div.task-fs-initimage {
display: none; display: none;
# position: absolute;
}
div.task-initimg:hover div.task-fs-initimage {
display: block;
position: absolute; 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 { button#save-system-settings-btn {

22
ui/media/js/main.js
View File

@ -743,23 +743,11 @@ async function onTaskStart(task) {
/* Hover effect for the init image in the task list */ /* Hover effect for the init image in the task list */
function createInitImageHover(taskEntry) { function createInitImageHover(taskEntry) {
var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') ) var $tooltip = $( taskEntry.querySelector('.task-fs-initimage') )
$( taskEntry.querySelector('div.task-initimg > img') ).on('mouseenter', function() { var img = document.createElement('img')
var img = this, img.src = taskEntry.querySelector('div.task-initimg > img').src
$img = $(img), $tooltip.append(img)
offset = $img.offset(); $tooltip.append(`<div class="top-right"><button>Use as Input</button></div>`)
$tooltip.find('button').on('click', (e) => { onUseAsInputClick(null,img) } )
$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');
});
} }
function createTask(task) { function createTask(task) {