Slider for preview image size (#767)

* Slider for preview image size
Add a slider to the system settings so that users can configure the max size of thumbnails

* Remove debug output

* Fix var definition

* Move slider to 'display settings' menu

* thumbnail slider CSS
This commit is contained in:
JeLuF
2023-02-22 15:02:00 +01:00
committed by GitHub
parent 4bc7bca60d
commit 1023f5f7cc
6 changed files with 82 additions and 18 deletions

View File

@ -47,6 +47,7 @@ let blockNSFWField = document.querySelector('#block_nsfw')
let showOnlyFilteredImageField = document.querySelector("#show_only_filtered_image")
let updateBranchLabel = document.querySelector("#updateBranchLabel")
let streamImageProgressField = document.querySelector("#stream_image_progress")
let thumbnailSizeField = document.querySelector("#thumbnail_size")
let makeImageBtn = document.querySelector('#makeImage')
let stopImageBtn = document.querySelector('#stopImage')
@ -1330,6 +1331,24 @@ outputFormatField.addEventListener('change', e => {
outputQualityRow.style.display='table-row'
}
})
/********************* Zoom Slider **********************/
thumbnailSizeField.addEventListener('input', () => {
(function (s) {
for (var j =0; j < document.styleSheets.length; j++) {
let cssSheet = document.styleSheets[j]
for (var i = 0; i < cssSheet.cssRules.length; i++) {
var rule = cssSheet.cssRules[i];
if (rule.selectorText == "div.img-preview img") {
rule.style['max-height'] = s+'vh';
rule.style['max-width'] = s+'vw';
return;
}
}
}
})(thumbnailSizeField.value)
})
function checkRandomSeed() {
if (randomSeedField.checked) {