Group clipboard buttons and add styles in CanvasView

Clipboard-related buttons are now grouped in a styled .painter-clipboard-group container for improved UI clarity. New CSS styles were added for the group, and the DOM structure was updated to wrap the 'Paste Image' and clipboard toggle buttons together.
This commit is contained in:
Dariusz L
2025-07-01 11:28:30 +02:00
parent 0512200b92
commit 5a473cc14a

View File

@@ -96,6 +96,33 @@ async function createCanvasWidget(node, widget, app) {
border-radius: 6px; border-radius: 6px;
} }
.painter-clipboard-group {
display: flex;
align-items: center;
gap: 2px;
background-color: rgba(0,0,0,0.15);
padding: 3px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.1);
position: relative;
}
.painter-clipboard-group::before {
content: "";
position: absolute;
top: -2px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(74, 108, 212, 0.6), transparent);
border-radius: 1px;
}
.painter-clipboard-group .painter-button {
margin: 1px;
}
.painter-separator { .painter-separator {
width: 1px; width: 1px;
height: 28px; height: 28px;
@@ -368,7 +395,7 @@ async function createCanvasWidget(node, widget, app) {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
z-index: 9998; z-index: 111;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -549,6 +576,7 @@ async function createCanvasWidget(node, widget, app) {
title: "Import image from another node", title: "Import image from another node",
onclick: () => canvas.canvasIO.importLatestImage() onclick: () => canvas.canvasIO.importLatestImage()
}), }),
$el("div.painter-clipboard-group", {}, [
$el("button.painter-button.primary", { $el("button.painter-button.primary", {
textContent: "Paste Image", textContent: "Paste Image",
title: "Paste image from clipboard", title: "Paste image from clipboard",
@@ -654,7 +682,8 @@ async function createCanvasWidget(node, widget, app) {
onmouseleave: () => { onmouseleave: () => {
helpTooltip.style.display = 'none'; helpTooltip.style.display = 'none';
} }
}), })
]),
]), ]),
$el("div.painter-separator"), $el("div.painter-separator"),