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

@@ -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">
+                    <div class="display-settings">
-                        <button class="dropbtn tertiaryButton">
+                        <button id="auto_scroll_btn" class="tertiaryButton">
-                            <i class="fa-solid fa-bars icon"></i>
+                            <i class="fa-solid fa-arrows-up-to-line icon"></i>
-                            Preview settings
+                            <input id="auto_scroll" name="auto_scroll" type="checkbox" style="display: none">
-                            <i class="fa-solid fa-angle-down icon"></i>
+                            <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>

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;
     }

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 = [

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) {

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");

ui/plugins/ui/Autoscroll.plugin.js

@@ -3,12 +3,6 @@
 
     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) {
         mutations.forEach(function (mutation) {