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;
}
if (e.key === "ArrowRight") {
setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
} else if (e.key === "ArrowLeft") {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
} else if (e.key === "i" || e.key === "I") {
setShowInfoSheet(true);
}
if (e.key === "ArrowRight") {
setCurrentPage((prev) => (prev < pages.length - 1 ? prev + 1 : prev));
} else if (e.key === "ArrowLeft") {
setCurrentPage((prev) => (prev > 0 ? prev - 1 : prev));
} else if (e.key === "ArrowUp") {
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);
components/editor/comic-canvas.tsx
+8 -8
View File
@@ -46,11 +46,11 @@ export function ComicCanvas({
{/* Dot grid background */}
<div className="absolute inset-0 dot-grid opacity-20" />
<div className="relative z-10 w-full max-w-xl">
<div
className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
style={{ maxWidth: "512px" }}
>
<div className="relative z-10 w-full max-w-xl">
<div
className="bg-white w-full p-3 shadow-2xl rounded-sm mx-auto group"
style={{ maxWidth: "512px" }}
>
<div className="w-full border-4 border-black overflow-hidden relative aspect-3/4">
<div className="w-full h-full bg-neutral-900">
<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">
Page {page.id}
</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">
{onInfoClick && (
<Button
components/editor/editor-toolbar.tsx
+10 -10
View File
@@ -64,16 +64,16 @@ export function EditorToolbar({
<span>Share</span>
</Button>
{isOwner && onContinueStory && (
<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>
)}
{isOwner && onContinueStory && (
<Button
onClick={onContinueStory}
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" />
<span className="hidden sm:inline">Continue story <span className="text-gray-500 text-[10px]">(C)</span></span>
<span className="sm:hidden">Add</span>
</Button>
)}
</div>
</header>
);