From 36c4c0c8d79f69f7d0b8e37fb835bd98328e972e Mon Sep 17 00:00:00 2001 From: JeLuF Date: Fri, 30 Jun 2023 21:44:35 +0200 Subject: [PATCH 1/7] Rollback --backdrop-color var, to fix themes dialog --- ui/media/css/main.css | 4 ++-- ui/media/css/themes.css | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 9eefa4c2..538d2cb8 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -485,7 +485,7 @@ dialog { } dialog::backdrop { - background: var(--backdrop-color); + background: rgba(32, 33, 36, 50%); } dialog > div { @@ -1295,7 +1295,7 @@ input::file-selector-button { .popup { position: absolute; - background: var(--backdrop-color); + background: rgba(32, 33, 36, 50%); top: 0px; left: 0px; right: 0px; diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css index 30d20a28..280225b7 100644 --- a/ui/media/css/themes.css +++ b/ui/media/css/themes.css @@ -1,4 +1,4 @@ -:root, ::backdrop { +:root { --main-hue: 222; --main-saturation: 4%; --value-base: 13%; @@ -45,7 +45,6 @@ --status-orange: rgb(200, 139, 0); --status-green: green; --status-red: red; - --backdrop-color: rgba(32, 33, 36, 50%); } .theme-light { From 2f9b492f5ba2681376050f6f45db5c343e199ee3 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sat, 1 Jul 2023 00:15:18 +0200 Subject: [PATCH 2/7] Don't show copy button without clipboard access --- ui/media/css/main.css | 1 + ui/media/js/main.js | 2 +- ui/media/js/parameters.js | 18 +++++++++++++----- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 9eefa4c2..8cf86aaa 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1575,6 +1575,7 @@ body.wait-pause { margin-top: 0.2em; margin-bottom: 0.2em; display: inline-block; + width: 80%; } #copy-cloudflare-address { diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 279feddb..7ced5b17 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -2103,7 +2103,7 @@ function tunnelUpdate(event) { if ("cloudflare" in event) { document.getElementById("cloudflare-off").classList.add("displayNone") document.getElementById("cloudflare-on").classList.remove("displayNone") - cloudflareAddressField.innerHTML = event.cloudflare + cloudflareAddressField.value = event.cloudflare document.getElementById("toggle-cloudflare-tunnel").innerHTML = "Stop" } else { document.getElementById("cloudflare-on").classList.add("displayNone") diff --git a/ui/media/js/parameters.js b/ui/media/js/parameters.js index cd86be63..e2f94d69 100644 --- a/ui/media/js/parameters.js +++ b/ui/media/js/parameters.js @@ -233,7 +233,7 @@ var PARAMETERS = [ note: `Create a VPN tunnel to share your Easy Diffusion instance with your friends. This will generate a web server address on the public Internet for your Easy Diffusion instance.
This Easy Diffusion server is available on the Internet using the - address:
+ address:
Anyone knowing this address can access your server. The address of your server will change each time you share a session.
Uses Cloudflare services.`, @@ -714,9 +714,17 @@ listenPortField.addEventListener("change", debounce( ()=>{ let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address") let cloudflareAddressField = document.getElementById("cloudflare-address") -copyCloudflareAddressBtn.addEventListener("click", (e) => { - navigator.clipboard.writeText(cloudflareAddressField.innerHTML) - showToast("Copied server address to clipboard") -}) +navigator.permissions.query({ name: "clipboard-write" }).then(function (result) { + if (result.state === "granted") { + // you can read from the clipboard + copyCloudflareAddressBtn.addEventListener("click", (e) => { + navigator.clipboard.writeText(cloudflareAddressField.innerHTML) + showToast("Copied server address to clipboard") + }) + } else { + copyCloudflareAddressBtn.classList.add("displayNone") + } +}); + document.addEventListener("system_info_update", (e) => setDeviceInfo(e.detail)) From 84574367b3d7bf6676f8f45f0bd498bd6768f505 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 2 Jul 2023 18:38:16 +0200 Subject: [PATCH 3/7] Hotkeys for img editor --- ui/media/css/main.css | 4 ++++ ui/media/js/image-editor.js | 19 ++++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 9eefa4c2..4f528083 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1640,3 +1640,7 @@ body.wait-pause { bottom: 0; } } + +.image-editor-button-label::first-letter { + text-decoration: underline; +} diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js index e7de9f2b..8f735972 100644 --- a/ui/media/js/image-editor.js +++ b/ui/media/js/image-editor.js @@ -47,6 +47,7 @@ const IMAGE_EDITOR_TOOLS = [ begin: defaultToolBegin, move: defaultToolMove, end: defaultToolEnd, + hotkey: "d", }, { id: "erase", @@ -77,6 +78,7 @@ const IMAGE_EDITOR_TOOLS = [ setBrush: (editor, layer) => { layer.ctx.globalCompositeOperation = "destination-out" }, + hotkey: "e", }, { id: "fill", @@ -92,6 +94,7 @@ const IMAGE_EDITOR_TOOLS = [ }, move: toolDoNothing, end: toolDoNothing, + hotkey: "f", }, { id: "colorpicker", @@ -113,6 +116,7 @@ const IMAGE_EDITOR_TOOLS = [ }, move: toolDoNothing, end: toolDoNothing, + hotkey: "p", }, ] @@ -208,7 +212,10 @@ var IMAGE_EDITOR_SECTIONS = [ var icon = document.createElement("i") tool_info.icon.split(" ").forEach((c) => icon.classList.add(c)) sub_element.appendChild(icon) - sub_element.append(tool_info.name) + var label_element = document.createElement("span") + label_element.classList.add("image-editor-button-label") + label_element.textContent=tool_info.name + sub_element.appendChild(label_element) element.appendChild(sub_element) }, }, @@ -702,15 +709,20 @@ class ImageEditor { event.stopPropagation() event.preventDefault() } - if (event.key == "y" && event.ctrlKey) { + else if (event.key == "y" && event.ctrlKey) { this.history.redo() event.stopPropagation() event.preventDefault() } - if (event.key === "Escape") { + else if (event.key === "Escape") { this.hide() event.stopPropagation() event.preventDefault() + } else { + let toolIndex = IMAGE_EDITOR_TOOLS.findIndex( t => t.hotkey ==event.key ) + if (toolIndex != -1) { + this.selectOption("tool", toolIndex) + } } } @@ -780,6 +792,7 @@ class ImageEditor { return this.options && section_name in this.options ? this.options[section_name] : section.default } selectOption(section_name, option_index) { + console.log("SELECT", section_name, option_index) var section = IMAGE_EDITOR_SECTIONS.find((s) => s.name == section_name) var value = section.options[option_index] this.options[section_name] = value == "custom" ? section.getCustom(this) : value From 0118c7c808bfce7b7eab8e1fefa01b17d101ec48 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 2 Jul 2023 20:31:38 +0200 Subject: [PATCH 4/7] Keyboard shortcuts for the image editor --- ui/media/css/main.css | 11 ++++++++--- ui/media/js/image-editor.js | 3 +-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 5d3a2a43..38e55649 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1611,6 +1611,14 @@ body.wait-pause { color: red; } +.image-editor-button-label { + display: inline-block; +} + +.image-editor-button-label::first-letter { + text-decoration: underline; +} + @keyframes slideInRight { from { right: -300px; @@ -1642,6 +1650,3 @@ body.wait-pause { } } -.image-editor-button-label::first-letter { - text-decoration: underline; -} diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js index 8f735972..3be8f95f 100644 --- a/ui/media/js/image-editor.js +++ b/ui/media/js/image-editor.js @@ -212,7 +212,7 @@ var IMAGE_EDITOR_SECTIONS = [ var icon = document.createElement("i") tool_info.icon.split(" ").forEach((c) => icon.classList.add(c)) sub_element.appendChild(icon) - var label_element = document.createElement("span") + var label_element = document.createElement("div") label_element.classList.add("image-editor-button-label") label_element.textContent=tool_info.name sub_element.appendChild(label_element) @@ -792,7 +792,6 @@ class ImageEditor { return this.options && section_name in this.options ? this.options[section_name] : section.default } selectOption(section_name, option_index) { - console.log("SELECT", section_name, option_index) var section = IMAGE_EDITOR_SECTIONS.find((s) => s.name == section_name) var value = section.options[option_index] this.options[section_name] = value == "custom" ? section.getCustom(this) : value From f9ff184b8942751f3b94f493d81ffd696d3fb64a Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 2 Jul 2023 20:35:10 +0200 Subject: [PATCH 5/7] Keyboard shortcuts for the image editor --- ui/media/js/image-editor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/media/js/image-editor.js b/ui/media/js/image-editor.js index 3be8f95f..30026e02 100644 --- a/ui/media/js/image-editor.js +++ b/ui/media/js/image-editor.js @@ -722,6 +722,8 @@ class ImageEditor { let toolIndex = IMAGE_EDITOR_TOOLS.findIndex( t => t.hotkey ==event.key ) if (toolIndex != -1) { this.selectOption("tool", toolIndex) + event.stopPropagation() + event.preventDefault() } } } From 82561268ea96a9bc7ae60f11310f06a171e472a2 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Tue, 4 Jul 2023 14:59:50 +0530 Subject: [PATCH 6/7] Fix for broken Rabbit Hole plugin --- ui/index.html | 2 +- ui/media/js/main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/index.html b/ui/index.html index a7995e32..d9a416ea 100644 --- a/ui/index.html +++ b/ui/index.html @@ -313,7 +313,7 @@
- +