make live previews play nice with window/slider resizes (db5c304e) · Commits · github_fork / Stable Diffusion Webui

extensions-builtin/mobile/javascript/mobile.js

+2 −0

Original line number	Diff line number	Diff line
		@@ -20,6 +20,8 @@ function reportWindowSize() {
		var button = gradioApp().getElementById(tab + '_generate_box');
		var target = gradioApp().getElementById(currentlyMobile ? tab + '_results' : tab + '_actions_column');
		target.insertBefore(button, target.firstElementChild);

		gradioApp().getElementById(tab + '_results').classList.toggle('mobile', currentlyMobile);
		}
		}

javascript/progressbar.js

+4 −17

Original line number	Diff line number	Diff line
		@@ -69,7 +69,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
		var dateStart = new Date();
		var wasEverActive = false;
		var parentProgressbar = progressbarContainer.parentNode;
		var parentGallery = gallery ? gallery.parentNode : null;

		var divProgress = document.createElement('div');
		divProgress.className = 'progressDiv';
		@@ -80,16 +79,16 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
		divProgress.appendChild(divInner);
		parentProgressbar.insertBefore(divProgress, progressbarContainer);

		if (parentGallery) {
		if (gallery) {
		var livePreview = document.createElement('div');
		livePreview.className = 'livePreview';
		parentGallery.insertBefore(livePreview, gallery);
		gallery.insertBefore(livePreview, gallery.firstElementChild);
		}

		var removeProgressBar = function() {
		setTitle("");
		parentProgressbar.removeChild(divProgress);
		if (parentGallery) parentGallery.removeChild(livePreview);
		if (gallery) gallery.removeChild(livePreview);
		atEnd();
		};

		@@ -100,12 +99,6 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
		return;
		}

		var rect = progressbarContainer.getBoundingClientRect();

		if (rect.width) {
		divProgress.style.width = rect.width + "px";
		}

		let progressText = "";

		divInner.style.width = ((res.progress \|\| 0) * 100.0) + '%';
		@@ -151,17 +144,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
		}, function() {
		removeProgressBar();
		});
		}
		};

		var funLivePreview = function(id_task, id_live_preview) {
		request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
		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();
		img.onload = function() {
		livePreview.appendChild(img);

style.css

+9 −8

Original line number	Diff line number	Diff line
		@@ -499,11 +499,15 @@ table.popup-table .link{

		/* live preview */
		.progressDiv{
		position: relative;
		position: absolute;
		height: 20px;
		background: #b4c0cc;
		border-radius: 3px !important;
		margin-bottom: -3px;
		top: -20px;
		}

		[id$=_results].mobile{
		margin-top: 28px;
		}

		.dark .progressDiv{
		@@ -528,12 +532,9 @@ table.popup-table .link{
		.livePreview{
		position: absolute;
		z-index: 300;
		background-color: white;
		margin: -4px;
		}

		.dark .livePreview{
		background-color: rgb(17 24 39 / var(--tw-bg-opacity));
		background: var(--background-fill-primary);
		width: 100%;
		height: 100%;
		}

		.livePreview img{

Admin message