OPENGIT/stable-diffusion-webui
1
0
Fork 0
mirror of https://github.com/AUTOMATIC1111/stable-diffusion-webui.git synced 2025-04-25 22:38:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

make live previews play nice with window/slider resizes

Browse Source
This commit is contained in:
AUTOMATIC1111 2023-08-20 13:38:35 +03:00
parent a0d721e109
commit db5c304e29
3 changed files with 15 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions-builtin/mobile/javascript/mobile.js
View File

@ -20,6 +20,8 @@ function reportWindowSize() {
var button = gradioApp().getElementById(tab + '_generate_box'); var button = gradioApp().getElementById(tab + '_generate_box');
var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column'); var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column');
target.insertBefore(button, target.firstElementChild); target.insertBefore(button, target.firstElementChild);
gradioApp().getElementById(tab + '_results').classList.toggle('mobile', currentlyMobile);
} }
} }

21
javascript/progressbar.js
View File

@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
var dateStart = new Date(); var dateStart = new Date();
var wasEverActive = false; var wasEverActive = false;
var parentProgressbar = progressbarContainer.parentNode; var parentProgressbar = progressbarContainer.parentNode;
var parentGallery = gallery ? gallery.parentNode : null;
var divProgress = document.createElement('div'); var divProgress = document.createElement('div');
divProgress.className = 'progressDiv'; divProgress.className = 'progressDiv';
@ -80,16 +79,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
divProgress.appendChild(divInner); divProgress.appendChild(divInner);
parentProgressbar.insertBefore(divProgress, progressbarContainer); parentProgressbar.insertBefore(divProgress, progressbarContainer);
if (parentGallery) { if (gallery) {
var livePreview = document.createElement('div'); var livePreview = document.createElement('div');
livePreview.className = 'livePreview'; livePreview.className = 'livePreview';
parentGallery.insertBefore(livePreview, gallery); gallery.insertBefore(livePreview, gallery.firstElementChild);
} }
var removeProgressBar = function() { var removeProgressBar = function() {
setTitle(""); setTitle("");
parentProgressbar.removeChild(divProgress); parentProgressbar.removeChild(divProgress);
if (parentGallery) parentGallery.removeChild(livePreview); if (gallery) gallery.removeChild(livePreview);
atEnd(); atEnd();
}; };
@ -100,12 +99,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
return; return;
} }
var rect = progressbarContainer.getBoundingClientRect();
if (rect.width) {
divProgress.style.width = rect.width + "px";
}
let progressText = ""; let progressText = "";
divInner.style.width = ((res.progress || 0) * 100.0) + '%'; divInner.style.width = ((res.progress || 0) * 100.0) + '%';
@ -151,17 +144,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
}, function() { }, function() {
removeProgressBar(); removeProgressBar();
}); });
} };
var funLivePreview = function(id_task, id_live_preview) { var funLivePreview = function(id_task, id_live_preview) {
request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) { request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
if (res.live_preview && gallery) { if (res.live_preview && gallery) {
rect = gallery.getBoundingClientRect();
if (rect.width) {
livePreview.style.width = rect.width + "px";
livePreview.style.height = rect.height + "px";
}
var img = new Image(); var img = new Image();
img.onload = function() { img.onload = function() {
livePreview.appendChild(img); livePreview.appendChild(img);

17
style.css
View File

@ -499,11 +499,15 @@ table.popup-table .link{
/* live preview */ /* live preview */
.progressDiv{ .progressDiv{
position: relative; position: absolute;
height: 20px; height: 20px;
background: #b4c0cc; background: #b4c0cc;
border-radius: 3px !important; border-radius: 3px !important;
margin-bottom: -3px; top: -20px;
}
[id$=_results].mobile{
margin-top: 28px;
} }
.dark .progressDiv{ .dark .progressDiv{
@ -528,12 +532,9 @@ table.popup-table .link{
.livePreview{ .livePreview{
position: absolute; position: absolute;
z-index: 300; z-index: 300;
background-color: white; background: var(--background-fill-primary);
margin: -4px; width: 100%;
} height: 100%;
.dark .livePreview{
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
} }
.livePreview img{ .livePreview img{