extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 08:13:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Full screen button on images; Changelog

Browse Source
This commit is contained in:
cmdr2 2023-03-15 19:25:55 +05:30
parent 0679fb2b20
commit 841811e3bc
5 changed files with 29 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGES.md
View File

@ -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.

2
ui/index.html
View File

@ -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">

2
ui/media/css/image-modal.css
View File

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

17
ui/media/css/main.css
View File

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

11
ui/media/js/main.js
View File

@ -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')