3dtours/make-comics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move info and redraw actions to ComicCanvas, update sidebar UI

Browse Source 
Shifted the info and redraw buttons from the editor toolbar to the ComicCanvas component, allowing for contextual actions per page. Enhanced ComicCanvas to support page navigation via image clicks and added optional callbacks for info and navigation. Updated the page sidebar to display page thumbnails instead of numbers, improved the add page button, and adjusted button sizes for better usability.
This commit is contained in:
Riccardo Giorato
2025-12-26 17:40:41 +01:00
parent 9895200db6
commit 47263231af
4 changed files with 101 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/editor-toolbar.tsx
+17 -36
View File
@@ -6,13 +6,11 @@ import { useRouter } from "next/navigation";
interface EditorToolbarProps {
title: string;
onInfoClick: () => void;
onContinueStory?: () => void;
}
export function EditorToolbar({
title,
onInfoClick,
onContinueStory,
}: EditorToolbarProps) {
const router = useRouter();
@@ -34,41 +32,24 @@ export function EditorToolbar({
</h1>
</div>
<div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
<Button
variant="ghost"
size="icon"
className="hover:bg-secondary text-muted-foreground hover:text-white h-8 w-8 sm:h-9 sm:w-9"
onClick={onInfoClick}
>
<Info className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
</Button>
<div className="flex items-center gap-1 sm:gap-2 flex-shrink-0">
<Button
variant="ghost"
className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
>
<Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span>Download PDF</span>
</Button>
<Button
variant="ghost"
className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
>
<RefreshCw className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span>Redraw</span>
</Button>
<Button
variant="ghost"
className="hover:bg-secondary text-muted-foreground hover:text-white gap-1.5 sm:gap-2 text-xs h-8 sm:h-9 px-2 sm:px-3 hidden md:flex"
>
<Download className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span>Download PDF</span>
</Button>
<Button
onClick={onContinueStory}
className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
>
<Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">Continue story</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
<Button
onClick={onContinueStory}
className="gap-1.5 sm:gap-2 text-xs bg-white hover:bg-neutral-200 text-black h-8 sm:h-9 px-3 sm:px-4"
>
<Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">Continue story</span>
<span className="sm:hidden">Add</span>
</Button>
</div>
</header>
);
}