From f2a960136ebdf818d2a91b6b6d855753d053414d Mon Sep 17 00:00:00 2001
From: cmdr2 <secondary.cmdr2@gmail.com>
Date: Wed, 1 Mar 2023 18:27:48 +0530
Subject: [PATCH] Move zoom and 'scroll to generated image' into a flat icon
 strip, with a press-toggle button for the 'scroll to' button; Tweaked the
 behavior of the on-scroll dropdown CSS class

---
 ui/index.html                      | 23 +++++++++++++----------
 ui/media/css/main.css              | 21 ++++++++++++++-------
 ui/media/js/auto-save.js           |  3 ++-
 ui/media/js/main.js                | 17 ++++++++++++++++-
 ui/media/js/utils.js               |  3 +++
 ui/plugins/ui/Autoscroll.plugin.js |  6 ------
 6 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 8d795382..1f5ab906 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -288,19 +288,22 @@
                 <div id="preview-tools">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
                     <button id="save-all-images" class="tertiaryButton"><i class="fa-solid fa-download icon"></i> Download All Images</button>
-                    <div class="dropdown display-settings">
-                        <button class="dropbtn tertiaryButton">
-                            <i class="fa-solid fa-bars icon"></i>
-                            Preview settings
-                            <i class="fa-solid fa-angle-down icon"></i>
+                    <div class="display-settings">
+                        <button id="auto_scroll_btn" class="tertiaryButton">
+                            <i class="fa-solid fa-arrows-up-to-line icon"></i>
+                            <input id="auto_scroll" name="auto_scroll" type="checkbox" style="display: none">
+                            <span class="simple-tooltip left">
+                                Scroll to generated image (<span class="state">OFF</span>)
+                            </span>
+                        </button>
+                        <button class="dropdown tertiaryButton">
+                            <i class="fa-solid fa-magnifying-glass-plus icon dropbtn"></i>
+                            <span class="simple-tooltip left">
+                                Zoom
+                            </span>
                         </button>
                         <div class="dropdown-content">
-                            <div class="auto-scroll dropdown-item">
-                                <div class="input-toggle"><input id="auto_scroll" name="auto_scroll" type="checkbox"><label for="auto_scroll"></label></div>
-                                <label for="auto_scroll">Scroll to generated image</label>
-                            </div>
                             <div class="dropdown-item">
-                                <label>Preview image size limit:</label><br/>
                                 <input id="thumbnail_size" name="thumbnail_size" class="editor-slider" type="range" value="70" min="5" max="200" oninput="sliderUpdate(event)"> 
                                 <input id="thumbnail_size-input" name="thumbnail_size-input" size="3" value="70" pattern="^[0-9.]+$" onkeypress="preventNonNumericalInput(event)" oninput="sliderUpdate(event)">&nbsp;%
                             </div>
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index b7a8bf5e..f14a2680 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -408,6 +408,7 @@ div.img-preview img {
     display: none;
     position: absolute;
     z-index: 2;
+    width: max-content;
 
     padding: 5px;
     margin-bottom: 15px;
@@ -416,13 +417,20 @@ div.img-preview img {
 .dropdown:hover .dropdown-content {
     display: block;
 }
+.dropdown:hover + .dropdown-content {
+    display: block;
+}
+.dropdown-content:hover {
+    display: block;
+}
 
 .display-settings {
     float: right;
+    position: relative;
 }
 
 .display-settings .dropdown-content {
-    right: 12px;
+    right: 0px;
 }
 
 .dropdown-item {
@@ -516,6 +524,11 @@ div.img-preview img {
     background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
     color: var(--accent-text-color);
 }
+.tertiaryButton.pressed {
+    border-style: inset;
+    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
+    color: var(--accent-text-color);
+}
 .useSettings {
     margin-right: 6pt;
     float: right;
@@ -825,12 +838,6 @@ input::file-selector-button {
         width: 100%;
         object-fit: contain;
     }
-    .dropdown-content {
-        width: auto !important;
-        transform: none !important;
-        left: 0px;
-        right: 0px;
-    }
     #editor {
         padding: 16px 8px;
     }
diff --git a/ui/media/js/auto-save.js b/ui/media/js/auto-save.js
index 1878039c..52c43889 100644
--- a/ui/media/js/auto-save.js
+++ b/ui/media/js/auto-save.js
@@ -45,7 +45,8 @@ const SETTINGS_IDS_LIST = [
     "auto_save_settings",
     "apply_color_correction",
     "process_order_toggle",
-    "thumbnail_size"
+    "thumbnail_size",
+    "auto_scroll"
 ]
 
 const IGNORE_BY_DEFAULT = [
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index d30d252b..59d474f8 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -48,6 +48,8 @@ let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_ima
 let updateBranchLabel = document.querySelector("#updateBranchLabel")
 let streamImageProgressField = document.querySelector("#stream_image_progress")
 let thumbnailSizeField = document.querySelector("#thumbnail_size-input")
+let autoscrollBtn = document.querySelector("#auto_scroll_btn")
+let autoScroll = document.querySelector("#auto_scroll")
 
 let makeImageBtn = document.querySelector('#makeImage')
 let stopImageBtn = document.querySelector('#stopImage')
@@ -1353,7 +1355,20 @@ thumbnailSizeField.addEventListener('change', () => {
     })(thumbnailSizeField.value)
 })
 
-
+function onAutoScrollUpdate() {
+    if (autoScroll.checked) {
+        autoscrollBtn.classList.add('pressed')
+    } else {
+        autoscrollBtn.classList.remove('pressed')
+    }
+    autoscrollBtn.querySelector(".state").innerHTML = (autoScroll.checked ? "ON" : "OFF")
+}
+autoscrollBtn.addEventListener('click', function() {
+    autoScroll.checked = !autoScroll.checked
+    autoScroll.dispatchEvent(new Event("change"))
+    onAutoScrollUpdate()
+})
+autoScroll.addEventListener('change', onAutoScrollUpdate)
 
 function checkRandomSeed() {
     if (randomSeedField.checked) {
diff --git a/ui/media/js/utils.js b/ui/media/js/utils.js
index 50f5f162..3f8d3fab 100644
--- a/ui/media/js/utils.js
+++ b/ui/media/js/utils.js
@@ -509,6 +509,9 @@ function makeQuerablePromise(promise) {
 /* inserts custom html to allow prettifying of inputs */
 function prettifyInputs(root_element) {
     root_element.querySelectorAll(`input[type="checkbox"]`).forEach(element => {
+        if (element.style.display === "none") {
+            return
+        }
         var parent = element.parentNode;
         if (!parent.classList.contains("input-toggle")) {
             var wrapper = document.createElement("div");
diff --git a/ui/plugins/ui/Autoscroll.plugin.js b/ui/plugins/ui/Autoscroll.plugin.js
index 1a9d59d1..088b1457 100644
--- a/ui/plugins/ui/Autoscroll.plugin.js
+++ b/ui/plugins/ui/Autoscroll.plugin.js
@@ -2,12 +2,6 @@
     "use strict"
 
     let autoScroll = document.querySelector("#auto_scroll")
-    
-    // save/restore the toggle state
-    autoScroll.addEventListener('click', (e) => {
-        localStorage.setItem('auto_scroll', autoScroll.checked)
-    })
-    autoScroll.checked = localStorage.getItem('auto_scroll') == "true"
 
     // observe for changes in the preview pane
     var observer = new MutationObserver(function (mutations) {