7b8539fb8d
Rolling every user report from the 0.6.3 rollout into one bundle: Sounds — the Web-Audio synth palette matches the metaphor now: - Screenshot: Polaroid shutter — sharp metallic tick + curtain-close click chained to a film-advance whir (band-passed noise sweeping 900→400 Hz). - Copy: printer "chika-chika-chika" — three descending percussive noise bursts pinned by short sine ticks. Reads as a print-head sweep. - Discard: paper crumple — three overlapping band-limited noise beds with per-sample random-amplitude crackle, descending centre freq. No more descending sine "boop". - Save: soft "photo dispensing" hiss (Polaroid ejects) + a small click. - Both the panel and editor share the design so nothing sounds different depending on which surface fired it. UI polish: - Discard button now carries a trash-can icon so it's obviously not the same as the close-sidebar X (they both used to be plain X's). - Toolbar drawing tools centre themselves via a new .tool-cluster wrapper (flex:1 1 auto, justify-content:center); the Copy/Save actions stay right-anchored via margin-left:auto on their own tgroup. Fixes the maximized-sidebar case where the drawing groups all crowded the left with a big empty gap before Copy/Save on the right. - Filename moves out of the topbar into a dedicated footer strip under the canvas board, alongside a new "Open in folder" button. The topbar is now flex-wrap:nowrap and holds only fixed-width window controls, so a long filename can never push discard / sound / max / close onto a second row (the filename ellipsises instead). - "Open in folder" invokes a new "openFolder" addon message that calls Electron's shell.showItemInFolder() to open the OS file explorer with the specific scratch PNG highlighted (falls back to shell.openPath() on the scratch dir when no capture is named). Version bump so the OTA update endpoint picks it up on the next tick.
148 lines
8 KiB
HTML
148 lines
8 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>
|
|
|
|
<!-- 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" stroke-linejoin="round">
|
|
<path d="M3 4h10"/>
|
|
<path d="M6 4V2h4v2"/>
|
|
<path d="M4 4l1 10h6l1-10"/>
|
|
<path d="M7 6.5v5M9 6.5v5"/>
|
|
</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.
|
|
`.tool-cluster` centres itself so on a maximized sidebar the drawing
|
|
groups sit in the middle of the row and the Copy/Save actions
|
|
right-anchor cleanly against the edge, instead of the tools crowding
|
|
the left when there's a lot of empty space. -->
|
|
<div class="toolbar">
|
|
<div class="tool-cluster">
|
|
<div class="tgroup" role="group" aria-label="Tools">
|
|
<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>
|
|
</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>
|
|
|
|
<!-- Footer strip: the current capture's filename lives here now (moved out
|
|
of the topbar so its length can never push the window-control icons
|
|
to a second row), with an "Open in folder" affordance for jumping to
|
|
the scratch dir in the OS file explorer. -->
|
|
<div class="footer">
|
|
<span class="fname" id="name">screenshot</span>
|
|
<button class="fbtn" id="open-folder" title="Open the scratch folder in the file explorer">
|
|
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h4l1.5 2H14v6H2z"/><path d="M2 5V3h5"/></svg>
|
|
<span>Open in folder</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
<a id="download-link" style="display:none"></a>
|
|
|
|
<script src="editor.js"></script>
|
|
</body>
|
|
</html>
|