Full screen button on images; Changelog

CHANGES.md

@@ -21,6 +21,8 @@
 Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
 
 ### Detailed changelog
+* 2.5.26 - 15 Mar 2023 - Allow styling the buttons displayed on an image. Update the API to allow multiple buttons and text labels in a single row. Thanks @ogmaresca.
+* 2.5.26 - 15 Mar 2023 - View images in full-screen, by either clicking on the image, or clicking the "Full screen" icon next to the Seed number on the image. Thanks @ogmaresca for the internal API.
 * 2.5.25 - 14 Mar 2023 - Button to download all the images, and all the metadata as a zip file. This is available at the top of the UI, as well as on each image. Thanks @JeLuf.
 * 2.5.25 - 14 Mar 2023 - Lots of UI tweaks and bug fixes. Thanks @patriceac and @JeLuf.
 * 2.5.24 - 11 Mar 2023 - Button to load an image mask from a file.

ui/index.html

@@ -30,7 +30,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.25 <span id="updateBranchLabel"></span></small>
+                <small>v2.5.26 <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">

ui/media/css/image-modal.css

@@ -78,7 +78,7 @@
 }
 
 #viewFullSizeImgModal .menu-bar .tertiaryButton {
-    font-size: 1.5em;
+    font-size: 1.2em;
     margin: 12px 12px 0 0;
     cursor: pointer;
 }

ui/media/css/main.css

@@ -98,11 +98,23 @@ code {
 #footer-spacer {
     flex: 0.7
 }
-.imgSeedLabel {
+.imgInfoLabel {
     font-size: 0.8em;
     background-color: var(--background-color2);
-    border-radius: 3px;
+}
+.imgSeedLabel {
     padding: 5px;
+    border-radius: 0px 3px 3px 0px;
+}
+.imgExpandBtn {
+    border-radius: 3px 0px 0px 3px;
+    border-right: 1px solid var(--tertiary-border-color);
+    padding: 5px 5px 5px;
+    padding-left: 7px;
+    cursor: pointer;
+}
+.imgExpandBtn:hover {
+    background-color: var(--accent-color);
 }
 .imgItem {
     display: inline-block;
@@ -283,6 +295,7 @@ div.img-preview img {
     width:100%;
     height: 100%;
     max-height: 70vh;
+    cursor: pointer;
 }
 .line-separator {
     background: var(--background-color3);

ui/media/js/main.js

@@ -278,7 +278,9 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                 <div class="imgContainer">
                     <img/>
                     <div class="imgItemInfo">
-                        <span class="imgSeedLabel"></span>
+                        <div>
+                            <span class="imgInfoLabel imgExpandBtn"><i class="fa-solid fa-expand"></i></span><span class="imgInfoLabel imgSeedLabel"></span>
+                        </div>
                     </div>
                     <button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                     <span class="img_bottom_label"></span>
@@ -316,7 +318,14 @@ function showImages(reqBody, res, outputContainer, livePreview) {
         imageElem.addEventListener('load', function() {
             imageItemElem.querySelector('.img_bottom_label').innerText = `${this.naturalWidth} x ${this.naturalHeight}`
         })
+        imageElem.addEventListener('click', function() {
+            imageModal(this.src)
+        })
 
+        const imageExpandBtn = imageItemElem.querySelector('.imgExpandBtn')
+        imageExpandBtn.addEventListener('click', function() {
+            imageModal(imageElem.src)
+        })
 
         const imageInfo = imageItemElem.querySelector('.imgItemInfo')
         imageInfo.style.visibility = (livePreview ? 'hidden' : 'visible')