From 12fa08d7a7e5546354df1a609cc28b6077575e39 Mon Sep 17 00:00:00 2001 From: ManInDark <61268856+ManInDark@users.noreply.github.com> Date: Tue, 8 Aug 2023 21:45:18 +0200 Subject: [PATCH 1/2] Changed cursor on logo hover to indicate that it can be clicked --- patch.patch | Bin 0 -> 618 bytes ui/media/css/main.css | 1 + 2 files changed, 1 insertion(+) create mode 100644 patch.patch diff --git a/patch.patch b/patch.patch new file mode 100644 index 0000000000000000000000000000000000000000..a452181bff804685e1f8ef1e12eedb642652c74c GIT binary patch literal 618 zcmbV~-D<)>5QWcmq3;kVLM2A63I6rQ*XU(T)C5cnYf1(2)os5?f`wiPmLb{Mvu9?` z?Cke7Rjw`ODZqB@YW!Fued3Q)Xd~kolIVyT7K4-;c8I6-L;PnwHSsCAPgI+*&ZuHv ztOa?8{1eR;X{-=DhV_O&))Xv~WiY+L!&)uUZ|py+S6WdqKvSdvT0Anf{tUl8O?04- z4f}JW)5B}+i>_1dH`5X%r0u!Mw+-<+zuUiEOFpn2ND~(LJX%xjyuY tTC3FWYWX)s2~&1tuy~8E@NBXc=Wfa_ox&H+9gKq2UdjFb+IjW5EI TB-m5 literal 0 HcmV?d00001 diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 2e7d7da9..9c84037a 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -34,6 +34,7 @@ code { width: 32px; height: 32px; transform: translateY(4px); + cursor: pointer; } #prompt { width: 100%; From 84c5a759d46d1eef14072587aa1af6ce4a5bfc26 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 14 Aug 2023 14:56:33 +0200 Subject: [PATCH 2/2] Resize slider for the advanced image popup (#1490) --- ui/index.html | 18 ++++++++--- ui/media/css/main.css | 27 +++++++++++++++- ui/media/js/main.js | 72 ++++++++++++++++++++++++------------------- 3 files changed, 80 insertions(+), 37 deletions(-) diff --git a/ui/index.html b/ui/index.html index d5ee2ae6..6811774e 100644 --- a/ui/index.html +++ b/ui/index.html @@ -301,12 +301,22 @@ ×
+ Resize:
+
+
    
- Enlarge:
-
  
+
+
+ Recently used:
+
+
+
+
+ Common sizes:
+
+
+
- Recently used:
-
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 9c84037a..745cf53c 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1779,6 +1779,10 @@ div#recent-resolutions-popup small { opacity: 0.7; } +div#common-resolution-list button { + background: var(--background-color1); +} + td#image-size-options small { margin-right: 0px !important; } @@ -1795,6 +1799,27 @@ div#enlarge-buttons { text-align: center; } +.two-column { display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + gap: 0px 0.5em; + grid-auto-flow: row; + grid-template-areas: + "left-column right-column"; +} + +.left-column { + justify-self: center; + align-self: center; + grid-area: left-column; +} + +.right-column { + justify-self: center; + align-self: center; + grid-area: right-column; +} + .clickable { cursor: pointer; } @@ -1832,4 +1857,4 @@ div#enlarge-buttons { /* hack for fixing Image Modifier Improvements plugin */ #imageTagPopupContainer { position: absolute; -} \ No newline at end of file +} diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 6ed8d506..9e6252f0 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -83,9 +83,9 @@ let customHeightField = document.querySelector("#custom-height") let recentResolutionsButton = document.querySelector("#recent-resolutions-button") let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup") let recentResolutionList = document.querySelector("#recent-resolution-list") -let enlarge15Button = document.querySelector("#enlarge15") -let enlarge2Button = document.querySelector("#enlarge2") -let enlarge3Button = document.querySelector("#enlarge3") +let commonResolutionList = document.querySelector("#common-resolution-list") +let resizeSlider = document.querySelector("#resize-slider") +let enlargeButtons = document.querySelector("#enlarge-buttons") let swapWidthHeightButton = document.querySelector("#swap-width-height") let smallImageWarning = document.querySelector("#small_image_warning") let initImageSelector = document.querySelector("#init_image") @@ -2792,38 +2792,25 @@ let recentResolutionsValues = [] ;(function() { ///// Init resolutions dropdown - function makeResolutionButtons() { - recentResolutionList.innerHTML = "" - recentResolutionsValues.forEach((el) => { - let button = document.createElement("button") - button.classList.add("tertiaryButton") - button.style.width = "8em" - button.innerHTML = `${el.w}×${el.h}` + + function makeResolutionButtons(listElement, resolutionList) { + listElement.innerHTML = "" + resolutionList.forEach((el) => { + let button = createElement("button", {style: "width: 8em;"}, "tertiaryButton", `${el.w}×${el.h}`) button.addEventListener("click", () => { customWidthField.value = el.w customHeightField.value = el.h hidePopup() }) - recentResolutionList.appendChild(button) - recentResolutionList.appendChild(document.createElement("br")) + listElement.appendChild(button) + listElement.appendChild(document.createElement("br")) }) - localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues) } - enlarge15Button.addEventListener("click", () => { - enlargeImageSize(1.5) + enlargeButtons.querySelectorAll("button").forEach( button => button.addEventListener("click", e => { + enlargeImageSize(parseFloat(button.dataset["factor"])) hidePopup() - }) - - enlarge2Button.addEventListener("click", () => { - enlargeImageSize(2) - hidePopup() - }) - - enlarge3Button.addEventListener("click", () => { - enlargeImageSize(3) - hidePopup() - }) + })) customWidthField.addEventListener("change", () => { let w = customWidthField.value @@ -2850,25 +2837,29 @@ let recentResolutionsValues = [] recentResolutionsValues = recentResolutionsValues.slice(0, 8) localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues) - makeResolutionButtons() + makeResolutionButtons(recentResolutionList, recentResolutionsValues) }) - let _jsonstring = localStorage.recentResolutionsValues - if (_jsonstring == undefined) { - recentResolutionsValues = [ + const defaultResolutionsValues = [ { w: 512, h: 512 }, - { w: 640, h: 448 }, { w: 448, h: 640 }, { w: 512, h: 768 }, { w: 768, h: 512 }, { w: 1024, h: 768 }, { w: 768, h: 1024 }, + { w: 1024, h: 1024 }, + { w: 1920, h: 1080 }, ] + let _jsonstring = localStorage.recentResolutionsValues + if (_jsonstring == undefined) { + recentResolutionsValues = defaultResolutionsValues; localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues) } else { recentResolutionsValues = JSON.parse(localStorage.recentResolutionsValues) } - makeResolutionButtons() + + makeResolutionButtons(recentResolutionList, recentResolutionsValues) + makeResolutionButtons(commonResolutionList, defaultResolutionsValues) recentResolutionsValues.forEach((val) => { addImageSizeOption(val.w) @@ -2885,6 +2876,9 @@ let recentResolutionsValues = [] customWidthField.value = widthField.value customHeightField.value = heightField.value recentResolutionsPopup.classList.remove("displayNone") + resizeSlider.value = 1 + resizeSlider.dataset["w"] = widthField.value + resizeSlider.dataset["h"] = heightField.value document.addEventListener("click", processClick) } @@ -2903,6 +2897,20 @@ let recentResolutionsValues = [] } }) + resizeSlider.addEventListener("input", e => { + let w = parseInt(resizeSlider.dataset["w"]) + let h = parseInt(resizeSlider.dataset["h"]) + let factor = parseFloat(resizeSlider.value) + let step = customWidthField.step + + customWidthField.value = roundToMultiple(w*factor*factor, step) + customHeightField.value = roundToMultiple(h*factor*factor, step) + }) + + resizeSlider.addEventListener("change", e => { + hidePopup() + }) + swapWidthHeightButton.addEventListener("click", (event) => { let temp = widthField.value widthField.value = heightField.value