happyz
/
Fooocus
mirror of https://github.com/lllyasviel/Fooocus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: prevent cutting off overlay (#1829) 

Co-authored-by: Christoph Rohrer <christoph.rohrer@odt.net>
This commit is contained in:
Chris Rohrer 2024-01-10 02:50:47 +01:00 committed by GitHub
parent 6261f17561
commit dc5b5238c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/style.css
View File

@ -198,7 +198,8 @@
} }
#stylePreviewOverlay { #stylePreviewOverlay {
display: none; opacity: 0;
pointer-events: none;
width: 128px; width: 128px;
height: 128px; height: 128px;
position: fixed; position: fixed;
@ -208,6 +209,12 @@
transform: translate(-140px, 20px); transform: translate(-140px, 20px);
background-size: cover; background-size: cover;
background-position: center; background-position: center;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 5px; border-radius: 5px;
z-index: 100; z-index: 100;
transition: transform 0.1s ease, opacity 0.3s ease;
}
#stylePreviewOverlay.lower-half {
transform: translate(-140px, -140px);
} }

5
javascript/script.js
View File

@ -158,7 +158,7 @@ function initStylePreviewOverlay() {
label.removeEventListener("mouseout", onMouseLeave); label.removeEventListener("mouseout", onMouseLeave);
label.addEventListener("mouseout", onMouseLeave); label.addEventListener("mouseout", onMouseLeave);
overlayVisible = true; overlayVisible = true;
overlay.style.display = "block"; overlay.style.opacity = "1";
const originalText = label.querySelector("span").getAttribute("data-original-text"); const originalText = label.querySelector("span").getAttribute("data-original-text");
const name = originalText || label.querySelector("span").textContent; const name = originalText || label.querySelector("span").textContent;
overlay.style.backgroundImage = `url("${samplesPath.replace( overlay.style.backgroundImage = `url("${samplesPath.replace(
@ -167,7 +167,7 @@ function initStylePreviewOverlay() {
).replaceAll("\\", "\\\\")}")`; ).replaceAll("\\", "\\\\")}")`;
function onMouseLeave() { function onMouseLeave() {
overlayVisible = false; overlayVisible = false;
overlay.style.display = "none"; overlay.style.opacity = "0";
overlay.style.backgroundImage = ""; overlay.style.backgroundImage = "";
label.removeEventListener("mouseout", onMouseLeave); label.removeEventListener("mouseout", onMouseLeave);
} }
@ -176,6 +176,7 @@ function initStylePreviewOverlay() {
if(!overlayVisible) return; if(!overlayVisible) return;
overlay.style.left = `${e.clientX}px`; overlay.style.left = `${e.clientX}px`;
overlay.style.top = `${e.clientY}px`; overlay.style.top = `${e.clientY}px`;
overlay.className = e.clientY > window.innerHeight / 2 ? "lower-half" : "upper-half";
}); });
} }