From fb3b7fae99b56b7bb9d840334b0d0920168da5bb Mon Sep 17 00:00:00 2001
From: ZeldaMaster501 <superzelda2001@gmail.com>
Date: Wed, 25 Sep 2024 09:51:23 -0500
Subject: [PATCH] UI Tweak

This PR adds a toggleable button to the lightbox modal toolbar, allowing users to show or hide the generation parameters (modalExif) when viewing images. By default, the parameters are hidden to optimize screen space primarily on mobile devices.
---
 javascript/imageViewer.js | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/javascript/imageViewer.js b/javascript/imageViewer.js
index 2c360b881..4cebde21c 100644
--- a/javascript/imageViewer.js
+++ b/javascript/imageViewer.js
@@ -159,6 +159,16 @@ function modalResetInstance(event) {
   previewInstance = panzoom(modalImage, { zoomSpeed: 0.05, minZoom: 0.1, maxZoom: 5.0, filterKey: (/* e, dx, dy, dz */) => true });
 }
 
+function modalToggleParams(event) {
+  const modalExif = gradioApp().getElementById('modalExif');
+  if (modalExif.style.display === 'none' || modalExif.style.display === '') {
+    modalExif.style.display = 'block';
+  } else {
+    modalExif.style.display = 'none';
+  }
+  event.stopPropagation();
+}
+
 function galleryClickEventHandler(event) {
   if (event.button !== 0) return;
   if (event.target.nodeName === 'IMG' && !event.target.parentNode.classList.contains('thumbnail-item')) {
@@ -235,10 +245,17 @@ async function initImageViewer() {
   modalClose.title = 'Close';
   modalClose.addEventListener('click', (evt) => closeModal(evt, true), true);
 
-  // exif
-  const modalExif = document.createElement('div');
-  modalExif.id = 'modalExif';
-  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';
+  const modalToggleParamsBtn = document.createElement('span');
+  modalToggleParamsBtn.id = 'modal_toggle_params';
+  modalToggleParamsBtn.className = 'cursor';
+  modalToggleParamsBtn.innerHTML = '\uf05a';
+  modalToggleParamsBtn.title = 'Toggle Parameters';
+  modalToggleParamsBtn.addEventListener('click', modalToggleParams, true);
+
+// exif
+const modalExif = document.createElement('div');
+modalExif.id = 'modalExif';
+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; display: none;';
 
   // handlers
   modalPreviewZone.addEventListener('mousedown', () => { previewDrag = false; });
@@ -269,13 +286,14 @@ async function initImageViewer() {
   modal.appendChild(modalPreviewZone);
   modal.appendChild(modalNext);
   modal.append(modalControls);
-  modal.append(modalExif);
   modalControls.appendChild(modalZoom);
   modalControls.appendChild(modalReset);
   modalControls.appendChild(modalTile);
   modalControls.appendChild(modalSave);
   modalControls.appendChild(modalDownload);
+  modalControls.appendChild(modalToggleParamsBtn);
   modalControls.appendChild(modalClose);
+  modal.append(modalExif);
 
   gradioApp().appendChild(modal);
   log('initImageViewer');