diff options
| author | Zaid-maker <53424436+Zaid-maker@users.noreply.github.com> | 2025-06-24 16:59:44 +0500 |
|---|---|---|
| committer | Zaid-maker <53424436+Zaid-maker@users.noreply.github.com> | 2025-06-24 16:59:44 +0500 |
| commit | 62051de6c11dde40e2929c030e4418f87b137e42 (patch) | |
| tree | 3492ed2abd6a127512a6ce09543bcf770bcd53d5 /apps/web/src/app/editor | |
| parent | 7c83b8e70b2024d79f053bd40e6f633969c2c1f5 (diff) | |
| parent | 900deab065ef17941262f48524af786cac302945 (diff) | |
| download | opencut-62051de6c11dde40e2929c030e4418f87b137e42.tar.gz | |
Merge branch 'main' into implement-workflows
Diffstat (limited to 'apps/web/src/app/editor')
| -rw-r--r-- | apps/web/src/app/editor/editor.css | 4 | ||||
| -rw-r--r-- | apps/web/src/app/editor/page.tsx | 107 |
2 files changed, 64 insertions, 47 deletions
diff --git a/apps/web/src/app/editor/editor.css b/apps/web/src/app/editor/editor.css new file mode 100644 index 00000000..f482c6de --- /dev/null +++ b/apps/web/src/app/editor/editor.css @@ -0,0 +1,4 @@ +/* Prevent scroll jumping on Mac devices when using the editor */ +body { + overflow: hidden; +}
\ No newline at end of file diff --git a/apps/web/src/app/editor/page.tsx b/apps/web/src/app/editor/page.tsx index 2f825a22..e0013937 100644 --- a/apps/web/src/app/editor/page.tsx +++ b/apps/web/src/app/editor/page.tsx @@ -1,13 +1,14 @@ "use client"; import { useEffect } from "react"; +import "./editor.css"; import { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from "../../components/ui/resizable"; import { MediaPanel } from "../../components/editor/media-panel"; -import { PropertiesPanel } from "../../components/editor/properties-panel"; +// import { PropertiesPanel } from "../../components/editor/properties-panel"; import { Timeline } from "../../components/editor/timeline"; import { PreviewPanel } from "../../components/editor/preview-panel"; import { EditorHeader } from "@/components/editor-header"; @@ -42,59 +43,71 @@ export default function Editor() { return ( <EditorProvider> - <div className="h-screen w-screen flex flex-col bg-background"> + <div className="h-screen w-screen flex flex-col bg-background overflow-hidden"> <EditorHeader /> - <ResizablePanelGroup direction="vertical"> - <ResizablePanel - defaultSize={mainContent} - minSize={30} - onResize={setMainContent} - > - {/* Main content area */} - <ResizablePanelGroup direction="horizontal"> - {/* Tools Panel */} - <ResizablePanel - defaultSize={toolsPanel} - minSize={15} - onResize={setToolsPanel} - > - <MediaPanel /> - </ResizablePanel> + <div className="flex-1 min-h-0 min-w-0"> + <ResizablePanelGroup direction="vertical" className="h-full w-full"> + <ResizablePanel + defaultSize={mainContent} + minSize={30} + maxSize={85} + onResize={setMainContent} + className="min-h-0" + > + {/* Main content area */} + <ResizablePanelGroup direction="horizontal" className="h-full w-full"> + {/* Tools Panel */} + <ResizablePanel + defaultSize={toolsPanel} + minSize={15} + maxSize={40} + onResize={setToolsPanel} + className="min-w-0" + > + <MediaPanel /> + </ResizablePanel> - <ResizableHandle withHandle /> + <ResizableHandle withHandle /> - {/* Preview Area */} - <ResizablePanel - defaultSize={previewPanel} - onResize={setPreviewPanel} - > - <PreviewPanel /> - </ResizablePanel> + {/* Preview Area */} + <ResizablePanel + defaultSize={previewPanel} + minSize={30} + onResize={setPreviewPanel} + className="min-w-0 min-h-0 flex-1" + > + <PreviewPanel /> + </ResizablePanel> - <ResizableHandle withHandle /> + <ResizableHandle withHandle /> - {/* Properties Panel */} - <ResizablePanel - defaultSize={propertiesPanel} - minSize={15} - onResize={setPropertiesPanel} - > - <PropertiesPanel /> - </ResizablePanel> - </ResizablePanelGroup> - </ResizablePanel> + {/* Properties Panel - Hidden for now but ready */} + {/* <ResizablePanel + defaultSize={propertiesPanel} + minSize={15} + maxSize={40} + onResize={setPropertiesPanel} + className="min-w-0" + > + <PropertiesPanel /> + </ResizablePanel> */} + </ResizablePanelGroup> + </ResizablePanel> - <ResizableHandle withHandle /> + <ResizableHandle withHandle /> - {/* Timeline */} - <ResizablePanel - defaultSize={timeline} - minSize={15} - onResize={setTimeline} - > - <Timeline /> - </ResizablePanel> - </ResizablePanelGroup> + {/* Timeline */} + <ResizablePanel + defaultSize={timeline} + minSize={15} + maxSize={70} + onResize={setTimeline} + className="min-h-0" + > + <Timeline /> + </ResizablePanel> + </ResizablePanelGroup> + </div> </div> </EditorProvider> ); |