extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-02-17 02:40:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Show an X over an image, instead of a remove button in image options

Browse Source
This commit is contained in:
cmdr2 2023-02-06 15:14:47 +05:30
parent d48e6554d5
commit 99205b4d03
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,6 +107,7 @@ code {
.imgContainer { .imgContainer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
position: relative;
} }
.imgItemInfo { .imgItemInfo {
padding-bottom: 0.5em; padding-bottom: 0.5em;
@ -114,16 +115,26 @@ code {
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
padding: 5px; padding-right: 5pt;
padding-top: 6pt;
opacity: 0; opacity: 0;
transition: 0.1s all; transition: 0.1s all;
} }
.imgPreviewItemClearBtn {
opacity: 0;
}
.imgContainer:hover > .imgItemInfo { .imgContainer:hover > .imgItemInfo {
opacity: 1; opacity: 1;
} }
.imgContainer:hover > .imgPreviewItemClearBtn {
opacity: 1;
}
.imgItemInfo * { .imgItemInfo * {
margin-bottom: 7px; margin-bottom: 7px;
} }
.imgItem .image_clear_btn {
transform: translate(40%, -50%);
}
#container { #container {
min-height: 100vh; min-height: 100vh;
width: 100%; width: 100%;

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

@ -263,6 +263,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
<div class="imgItemInfo"> <div class="imgItemInfo">
<span class="imgSeedLabel"></span> <span class="imgSeedLabel"></span>
</div> </div>
<button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
</div> </div>
` `
outputContainer.appendChild(imageItemElem) outputContainer.appendChild(imageItemElem)
@ -275,6 +276,11 @@ function showImages(reqBody, res, outputContainer, livePreview) {
imageElem.setAttribute('data-steps', imageInferenceSteps) imageElem.setAttribute('data-steps', imageInferenceSteps)
imageElem.setAttribute('data-guidance', imageGuidanceScale) 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') const imageInfo = imageItemElem.querySelector('.imgItemInfo')
imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible') imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')
@ -288,7 +294,6 @@ function showImages(reqBody, res, outputContainer, livePreview) {
imageSeedLabel.innerText = 'Seed: ' + req.seed imageSeedLabel.innerText = 'Seed: ' + req.seed
let buttons = [ let buttons = [
{ text: 'Remove', on_click: onRemoveClick, class: 'secondaryButton' },
{ text: 'Use as Input', on_click: onUseAsInputClick }, { text: 'Use as Input', on_click: onUseAsInputClick },
{ text: 'Download', on_click: onDownloadImageClick }, { text: 'Download', on_click: onDownloadImageClick },
{ text: 'Make Similar Images', on_click: onMakeSimilarClick }, { 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) { function onUseAsInputClick(req, img) {
const imgData = img.src const imgData = img.src