4d876bc2c8
Layout reorganisation from user's diagram:
- Copy + Save move out of the topbar into the toolbar as their own
right-anchored tgroup (margin-left:auto). On wide sidebars they sit at
the end of the drawing-tool row; when the sidebar is narrow, the
actions cluster wraps as its own row on the right instead of nudging
the drawing tools around. Toolbar switches from justify-content:center
to flex-start so the leading tool groups pack left and the actions
group can find the right edge cleanly.
- Topbar right cluster is now Discard / Sound / Maximize / Close — Copy
and Save are gone from the topbar entirely so the right edge reads
as controls-only, not action-mixed.
- Discard button (X icon, danger red on hover) throws away the current
capture — silentmode.invoke("clearRecent", {name}) removes it from the
ring and unlinks the scratch file — then navigates back to the panel.
Distinct from Back, which is non-destructive.
- Close button already existed from 0.6.1 but stays in the same
right-edge position for continuity.
Bundled but not shipped separately — parent session signs and pushes.
129 lines
7.2 KiB
HTML
129 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Screenshot editor</title>
|
|
<link rel="stylesheet" href="editor.css">
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<button class="btn" id="back" title="Back to sidebar panel">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M13 8H3M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
<span class="name" id="name">screenshot</span>
|
|
|
|
<!-- Crop mode splits the topbar into a confirm/cancel prompt while the
|
|
user is dragging a crop rectangle. Copy / Save / Discard live in
|
|
the toolbar now, so only the maximize + sound + close cluster on
|
|
the right needs to yield to the crop confirm buttons. -->
|
|
<button class="btn wide" id="apply-crop" hidden title="Apply the crop (Enter)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8l3 3 7-7"/></svg>
|
|
<span>Apply crop</span>
|
|
</button>
|
|
<button class="btn wide" id="cancel-crop" hidden title="Cancel crop (Esc)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
<span class="spacer"></span>
|
|
<button class="btn danger" id="discard" title="Discard this capture and return to the panel">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
</button>
|
|
<button class="btn" id="toggle-sound" title="Toggle sound"></button>
|
|
<button class="btn" id="toggle-max" title="Expand the sidebar to full window / restore">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 6V2h4M14 6V2h-4M2 10v4h4M14 10v4h-4"/></svg>
|
|
</button>
|
|
<button class="btn" id="close-sidebar" title="Close the sidebar">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Toolbar rows are grouped so that when the sidebar is too narrow to
|
|
hold everything, whole categories wrap together (tools stay with
|
|
tools, swatches with swatches, widths with widths, history with
|
|
history) instead of one dot spilling to a lonely second row. -->
|
|
<div class="toolbar">
|
|
<div class="tgroup" role="group" aria-label="Tools">
|
|
<button class="tool active" data-tool="select" title="Select (no tool)">
|
|
<svg viewBox="0 0 16 16" fill="currentColor"><path d="M3 2l10 5-4 1-1 4z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="crop" title="Crop (C)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M4 1v11h11M1 4h11v11"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="arrow" title="Arrow (A)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 13L13 3M13 3H8M13 3v5"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="rect" title="Rectangle (R)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="3.5" width="11" height="9"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="ellipse" title="Ellipse (O)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><ellipse cx="8" cy="8" rx="5.5" ry="4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="pen" title="Pen (P)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 14c1-3 3-6 6-8s5-3 6-3l-3 4c-2 1-4 3-6 4s-2 2-3 3z"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="text" title="Text (T)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 3h10M8 3v10M6 13h4"/></svg>
|
|
</button>
|
|
<button class="tool" data-tool="blur" title="Blur / mosaic redaction (B)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2.5" y="2.5" width="11" height="11"/><path d="M5 6h1M8 6h1M11 6h1M5 9h1M8 9h1M11 9h1M5 12h1M8 12h1M11 12h1"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="Colours">
|
|
<button class="swatch active" data-color="#ff3b30" style="background:#ff3b30" title="Red"></button>
|
|
<button class="swatch" data-color="#d6ff3d" style="background:#d6ff3d" title="Acid"></button>
|
|
<button class="swatch" data-color="#ffcc00" style="background:#ffcc00" title="Yellow"></button>
|
|
<button class="swatch" data-color="#0aa8ff" style="background:#0aa8ff" title="Blue"></button>
|
|
<button class="swatch" data-color="#ffffff" style="background:#ffffff" title="White"></button>
|
|
<button class="swatch" data-color="#000000" style="background:#000000" title="Black"></button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="Widths">
|
|
<button class="width" data-width="3" title="Thin"><span class="dot" style="width:4px;height:4px"></span></button>
|
|
<button class="width active" data-width="5" title="Medium"><span class="dot" style="width:7px;height:7px"></span></button>
|
|
<button class="width" data-width="9" title="Thick"><span class="dot" style="width:11px;height:11px"></span></button>
|
|
</div>
|
|
|
|
<div class="tgroup" role="group" aria-label="History">
|
|
<button class="btn" id="undo" title="Undo (Ctrl+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
|
</button>
|
|
<button class="btn" id="redo" title="Redo (Ctrl+Shift+Z)" disabled>
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Actions cluster — Copy / Save — anchored to the right of the toolbar.
|
|
Uses margin-left:auto so on wide sidebars it lives out at the end
|
|
of the drawing-tool row; when the sidebar is narrow enough that the
|
|
drawing tools already ate the width, it wraps as its own row to the
|
|
right instead of jumping the tools around. -->
|
|
<div class="tgroup actions" role="group" aria-label="Actions">
|
|
<button class="btn wide" id="copy" title="Copy PNG to clipboard (Ctrl+C)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="4" y="4" width="9" height="10"/><path d="M3 12V3h9"/></svg>
|
|
<span>Copy</span>
|
|
</button>
|
|
<button class="btn wide primary" id="save" title="Save PNG (Ctrl+S)">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9M4 7l4 4 4-4M2 14h12"/></svg>
|
|
<span>Save</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="board" id="board">
|
|
<div class="empty" id="empty">
|
|
<div>Loading capture…</div>
|
|
</div>
|
|
<div class="stage" id="stage" hidden>
|
|
<canvas id="base"></canvas>
|
|
<canvas id="over"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
<script src="editor.js"></script>
|
|
</body>
|
|
</html>
|