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

Add arrow key navigation and 'C' shortcut to add page, update UI hints

Browse Source
This commit is contained in:
Riccardo Giorato
2025-12-27 11:54:28 +01:00
parent d17d360d0e
commit ad4ee5c737
3 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/story/[storySlug]/story-editor-client.tsx
+13 -7
View File
@@ -135,13 +135,19 @@ export function StoryEditorClient() {
return; return;
} }
if (e.key === "ArrowRight") { if (e.key === "ArrowRight") {
setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev)); setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
} else if (e.key === "ArrowLeft") { } else if (e.key === "ArrowLeft") {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev)); setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
} else if (e.key === "i" || e.key === "I") { } else if (e.key === "ArrowUp") {
setShowInfoSheet(true); setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
} } else if (e.key === "ArrowDown") {
setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
} else if (e.key === "i" || e.key === "I") {
setShowInfoSheet(true);
} else if (e.key === "c" || e.key === "C") {
handleAddPage();
}
}; };
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
components/editor/comic-canvas.tsx
+8 -8
View File
@@ -46,11 +46,11 @@ export function ComicCanvas({
{/* Dot grid background */} {/* Dot grid background */}
<div className="absolute inset-0 dot-grid opacity-20" /> <div className="absolute inset-0 dot-grid opacity-20" />
<div className="relative z-10 w-full max-w-xl"> <div className="relative z-10 w-full max-w-xl">
<div <div
className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group" className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
style={{ maxWidth: "512px" }} style={{ maxWidth: "512px" }}
> >
<div className="w-full border-4 border-black overflow-hidden relative aspect-3/4"> <div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
<div className="w-full h-full bg-neutral-900"> <div className="w-full h-full bg-neutral-900">
<img <img
@@ -78,10 +78,10 @@ export function ComicCanvas({
<div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <div className="absolute top-2 left-2 px-1.5 py-0.5 bg-black/70 text-[9px] text-white font-mono uppercase tracking-widest border border-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
Page {page.id} Page {page.id}
</div> </div>
</div> </div>
</div> </div>
{/* Action buttons below the page image */} {/* Action buttons below the page image */}
<div className="hidden md:flex items-center justify-center gap-2 mt-4"> <div className="hidden md:flex items-center justify-center gap-2 mt-4">
{onInfoClick && ( {onInfoClick && (
<Button <Button
components/editor/editor-toolbar.tsx
+10 -10
View File
@@ -64,16 +64,16 @@ export function EditorToolbar({
<span>Share</span> <span>Share</span>
</Button> </Button>
{isOwner && onContinueStory && ( {isOwner && onContinueStory && (
<Button <Button
onClick={onContinueStory} 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" className="relative 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" /> <Plus className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
<span className="hidden sm:inline">Continue story</span> <span className="hidden sm:inline">Continue story <span className="text-gray-500 text-[10px]">(C)</span></span>
<span className="sm:hidden">Add</span> <span className="sm:hidden">Add</span>
</Button> </Button>
)} )}
</div> </div>
</header> </header>
); );