extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-03-25 14:06:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cmdr2 2023-03-01 18:27:48 +05:30
parent 7a1170f1dd
commit f2a960136e
6 changed files with 48 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/index.html
View File

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

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

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

3
ui/media/js/auto-save.js
View File

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

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

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

3
ui/media/js/utils.js
View File

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

6
ui/plugins/ui/Autoscroll.plugin.js
View File

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