lunanting/ai-chatbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(canvas): flatten bottom-left zoom rail visuals
Some checks failed
Lint / build (20) (push) Has been cancelled
Details
Playwright Tests / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Your Name 2026-03-04 00:11:51 +08:00
parent d641e893ba
commit 24f30f7b73
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/canvas/[id]/page.tsx
View File

@ -822,12 +822,18 @@ export default function CanvasEditorPage({ params }: PageProps) {
{/* 6. Bottom Left Compact Controls */}
<div
className="absolute z-20"
style={{ bottom: `${FLOATING_BOTTOM_INSET}px`, left: `${compactControlsLeft}px` }}
style={{ bottom: `${FLOATING_BOTTOM_INSET + 4}px`, left: `${compactControlsLeft + 8}px` }}
>
<div className="flex items-center gap-0.5 rounded-xl border border-border/60 bg-background/82 px-1.5 py-1 shadow-lg backdrop-blur-sm">
<div className="flex items-center gap-1 text-muted-foreground">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={undo} disabled={!canUndo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Button
variant="ghost"
size="icon"
onClick={undo}
disabled={!canUndo}
className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
>
<Undo2 className="h-3 w-3" />
</Button>
</TooltipTrigger>
@ -836,22 +842,38 @@ export default function CanvasEditorPage({ params }: PageProps) {
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" onClick={redo} disabled={!canRedo} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Button
variant="ghost"
size="icon"
onClick={redo}
disabled={!canRedo}
className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
>
<Redo2 className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">重做</TooltipContent>
</Tooltip>
<Separator orientation="vertical" className="mx-1 h-4" />
<div className="mx-1 h-4 w-px bg-border/70" />
<Button variant="ghost" size="icon" onClick={zoomOut} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Button
variant="ghost"
size="icon"
onClick={zoomOut}
className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
>
<ZoomOut className="h-3.5 w-3.5" />
</Button>
<span className="w-11 text-center text-[11px] tabular-nums font-medium text-muted-foreground">
<span className="w-10 text-center text-[10px] tabular-nums font-medium text-muted-foreground">
{Math.round(viewport.zoom * 100)}%
</span>
<Button variant="ghost" size="icon" onClick={zoomIn} className="h-7 w-7 rounded-md text-muted-foreground hover:text-foreground">
<Button
variant="ghost"
size="icon"
onClick={zoomIn}
className="h-6 w-6 rounded-none p-0 text-muted-foreground hover:bg-transparent hover:text-foreground"
>
<ZoomIn className="h-3.5 w-3.5" />
</Button>
</div>