Merge branch 'beta' into textualinv

This commit is contained in:
JeLuF 2023-07-07 22:50:12 +02:00 committed by GitHub
commit c6c025353a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 46 additions and 16 deletions

View File

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

View File

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

View File

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

View File

@ -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()
}
}
}

View File

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

View File

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

View File

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