feat(measure): split toolbar into back · downloads · start-over zones
Back collapses to a leading arrow icon, downloads stay in the middle, and "New Image" moves to the far right behind a labeled "Start over" separator. The reset button now uses a dashed transparent outline so it reads as a deliberate, low-frequency action and is harder to hit while reaching for a download. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ed4da082ce
commit
a5f4bf650c
@ -211,14 +211,40 @@ async function downloadMeasured(scope: "full" | "view") {
|
|||||||
<!-- Break out of <main>'s max-w-7xl so the Measure step spans the full
|
<!-- Break out of <main>'s max-w-7xl so the Measure step spans the full
|
||||||
viewport width — annotation work benefits from the extra room. -->
|
viewport width — annotation work benefits from the extra room. -->
|
||||||
<div class="relative left-1/2 w-screen -translate-x-1/2 space-y-4 px-4">
|
<div class="relative left-1/2 w-screen -translate-x-1/2 space-y-4 px-4">
|
||||||
<!-- Top header with downloads + back -->
|
<div>
|
||||||
|
<h2 class="text-xl font-semibold">Measure</h2>
|
||||||
|
<p class="text-sm text-muted-foreground">
|
||||||
|
Annotate the corrected image and download.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Toolbar row: Back arrow on far left, downloads in the middle,
|
||||||
|
"Start over" zone (dashed New Image) on the far right. -->
|
||||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||||
<div>
|
<Button
|
||||||
<h2 class="text-xl font-semibold">Measure</h2>
|
variant="ghost"
|
||||||
<p class="text-sm text-muted-foreground">
|
size="icon"
|
||||||
Annotate the corrected image and download.
|
class="shrink-0"
|
||||||
</p>
|
aria-label="Back to Deskew"
|
||||||
</div>
|
title="Back to Deskew"
|
||||||
|
@click="store.goToStep(4)"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<path d="M19 12H5" />
|
||||||
|
<path d="m12 19-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
|
||||||
<div class="flex flex-wrap items-center gap-3">
|
<div class="flex flex-wrap items-center gap-3">
|
||||||
<TooltipProvider>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
@ -245,14 +271,6 @@ async function downloadMeasured(scope: "full" | "view") {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<div class="mx-1 h-6 w-px bg-border" />
|
<div class="mx-1 h-6 w-px bg-border" />
|
||||||
<Button variant="outline" @click="store.goToStep(4)"
|
|
||||||
>Back</Button
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
@click="store.reset()"
|
|
||||||
>New Image</Button
|
|
||||||
>
|
|
||||||
<Button @click="download">
|
<Button @click="download">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@ -349,6 +367,24 @@ async function downloadMeasured(scope: "full" | "view") {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- "Start over" zone: separator + label make it visually
|
||||||
|
distinct from the action buttons; dashed/transparent
|
||||||
|
styling on the button itself adds friction so it isn't
|
||||||
|
mis-clicked while reaching for a download. -->
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="h-6 w-px bg-border" />
|
||||||
|
<span
|
||||||
|
class="text-xs font-medium uppercase tracking-wider text-muted-foreground/70"
|
||||||
|
>Start over</span
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
class="border-dashed bg-transparent text-muted-foreground hover:bg-muted/40 hover:text-foreground"
|
||||||
|
@click="store.reset()"
|
||||||
|
>New Image</Button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p v-if="error" class="text-sm text-destructive">
|
<p v-if="error" class="text-sm text-destructive">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user