modernui imageviewer

vladmandic · Apr 29, 2024 · 67f7aca · 67f7aca
1 parent f391ac5
commit 67f7aca
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js
@@ -238,7 +238,7 @@ async function initImageViewer() {
   // exif
   const modalExif = document.createElement('div');
   modalExif.id = 'modalExif';
-  modalExif.style = 'position: absolute; bottom: 0px; width: 98%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em;';
+  modalExif.style = 'position: absolute; bottom: 0px; width: 100%; background-color: rgba(0, 0, 0, 0.5); color: var(--neutral-300); padding: 1em; font-size: small; line-height: 1.2em; z-index: 1';
 
   // handlers
   modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; });

diff --git a/javascript/sdnext.css b/javascript/sdnext.css
@@ -86,7 +86,7 @@ button.custom-button { border-radius: var(--button-large-radius); padding: var(-
 #control_results { margin: 0; padding: 0; }
 #control_gallery { height: calc(100vw/3 + 60px); }
 #txt2img_gallery, #img2img_gallery { height: 50vh; }
-#control-result { padding: 0 0.2em 0 0.2em; background: var(--input-background-fill); line-height: 2em; }
+#control-result { padding: 0 0.2em 0 0.2em; background: var(--input-background-fill); line-height: 2em; white-space: pre-wrap; }
 #control-inputs { margin-top: 1em; }
 #txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { margin-right: var(--layout-gap) }
 #txt2img_footer, #img2img_footer, #control_footer { height: fit-content; display: none; }
@@ -159,7 +159,7 @@ div#extras_scale_to_tab div.form { flex-direction: row; }
 .popup-metadata { color: white; background: #0000; display: inline-block; white-space: pre-wrap; font-size: var(--text-xxs); }
 
 /* fullpage image viewer */
-#lightboxModal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
+#lightboxModal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
   user-select: none; -webkit-user-select: none; flex-direction: row; font-family: 'NotoSans';}
 .modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; }
 .modalControls:hover { background-color: #50505050; }

diff --git a/javascript/ui.js b/javascript/ui.js
@@ -33,7 +33,8 @@ function clip_gallery_urls(gallery) {
 }
 
 function all_gallery_buttons() {
-  const allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
+  let allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
+  if (allGalleryButtons.length === 0) allGalleryButtons = gradioApp().querySelectorAll('.gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
   const visibleGalleryButtons = [];
   allGalleryButtons.forEach((elem) => {
     if (elem.parentElement.offsetParent) visibleGalleryButtons.push(elem);
@@ -42,7 +43,8 @@ function all_gallery_buttons() {
 }
 
 function selected_gallery_button() {
-  const allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
+  let allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
+  if (allCurrentButtons.length === 0) allCurrentButtons = gradioApp().querySelectorAll('.gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small.selected');
   let visibleCurrentButton = null;
   allCurrentButtons.forEach((elem) => {
     if (elem.parentElement.offsetParent) visibleCurrentButton = elem;