Merge branch 'beta' into textualinv

ui/index.html

@@ -316,7 +316,7 @@
             <div id="preview-content">
                 <div id="preview-tools" class="displayNone">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
-                    <button class="tertiaryButton" id="show-download-dialog"><i class="fa-solid fa-download"></i> Download images</button>
+                    <button class="tertiaryButton" id="show-download-popup"><i class="fa-solid fa-download"></i> Download images</button>
                     <div class="display-settings">
                         <button id="undo" class="displayNone primaryButton">
                             Undo <i class="fa-solid fa-rotate-left icon"></i>

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;
@@ -1575,6 +1575,7 @@ body.wait-pause {
     margin-top: 0.2em;
     margin-bottom: 0.2em;
     display: inline-block;
+    width: 80%;
 }
 
 #copy-cloudflare-address {
@@ -1610,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;

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 {

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("div")
+            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,22 @@ 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)
+                    event.stopPropagation()
+                    event.preventDefault()
+                }
             }
         }
 

ui/media/js/image-modifiers.js

@@ -18,7 +18,7 @@ let modifiersCloseBtn = document.querySelector("#modifiers-close-button")
 let modifiersCollapsiblesBtn = document.querySelector("#modifiers-action-collapsibles-btn")
 let modifierSettingsDialog = document.querySelector("#modifier-settings-config")
 let customModifiersTextBox = document.querySelector("#custom-modifiers-input")
-let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-entries-toolbar")
+let customModifierEntriesToolbar = document.querySelector("#editor-modifiers-subheader")
 let modifierSettingsCloseBtn = document.querySelector("#modifier-settings-close-button")
 
 const modifierThumbnailPath = "media/modifier-thumbnails"

ui/media/js/main.js

@@ -138,7 +138,7 @@ let initialText = document.querySelector("#initial-text")
 let versionText = document.querySelector("#version")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
-let showDownloadDialogBtn = document.querySelector("#show-download-dialog")
+let showDownloadDialogBtn = document.querySelector("#show-download-popup")
 let saveAllImagesDialog = document.querySelector("#download-images-dialog")
 let saveAllImagesBtn = document.querySelector("#save-all-images")
 let saveAllImagesCloseBtn = document.querySelector("#download-images-close-button")
@@ -2109,7 +2109,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")

ui/media/js/parameters.js

@@ -233,7 +233,7 @@ var PARAMETERS = [
         note: `<span id="cloudflare-off">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. </span>
                <div id="cloudflare-on" class="displayNone"><div>This Easy Diffusion server is available on the Internet using the
-               address:</div><div><div id="cloudflare-address"></div><button id="copy-cloudflare-address">Copy</button></div></div>
+               address:</div><div><input id="cloudflare-address" value="" readonly><button id="copy-cloudflare-address">Copy</button></div></div>
                <b>Anyone knowing this address can access your server.</b> The address of your server will change each time
                you share a session.<br>
                Uses <a href="https://try.cloudflare.com/" target="_blank">Cloudflare services</a>.`,
@@ -715,9 +715,17 @@ listenPortField.addEventListener("change", debounce( ()=>{
 let copyCloudflareAddressBtn = document.querySelector("#copy-cloudflare-address")
 let cloudflareAddressField = document.getElementById("cloudflare-address")
 
-copyCloudflareAddressBtn.addEventListener("click", (e) => {
+navigator.permissions.query({ name: "clipboard-write" }).then(function (result) {
-    navigator.clipboard.writeText(cloudflareAddressField.innerHTML)
+   if (result.state === "granted") {
-    showToast("Copied server address to clipboard")
+       // 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))