TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature: add terminal/preview layout button

Browse Source
This commit is contained in:
Akhileshrangani4 2024-10-12 19:46:32 -04:00
parent f863f2f763
commit b6569550fc
2 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/components/editor/index.tsx
View File

@ -18,7 +18,7 @@ import {
ResizablePanel, ResizablePanel,
ResizablePanelGroup, ResizablePanelGroup,
} from "@/components/ui/resizable" } from "@/components/ui/resizable"
import { FileJson, Loader2, Sparkles, TerminalSquare } from "lucide-react" import { FileJson, Loader2, Sparkles, TerminalSquare, ArrowDownToLine, ArrowRightToLine } from "lucide-react"
import Tab from "../ui/tab" import Tab from "../ui/tab"
import Sidebar from "./sidebar" import Sidebar from "./sidebar"
import GenerateInput from "./generate" import GenerateInput from "./generate"
@ -837,6 +837,12 @@ export default function CodeEditor({
} }
}; };
const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
const toggleLayout = () => {
setIsHorizontalLayout(prev => !prev);
};
// On disabled access for shared users, show un-interactable loading placeholder + info modal // On disabled access for shared users, show un-interactable loading placeholder + info modal
if (disableAccess.isDisabled) if (disableAccess.isDisabled)
return ( return (
@ -972,12 +978,12 @@ export default function CodeEditor({
/> />
{/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */} {/* Shadcn resizeable panels: https://ui.shadcn.com/docs/components/resizable */}
<ResizablePanelGroup direction="horizontal"> <ResizablePanelGroup direction={isHorizontalLayout ? "vertical" : "horizontal"}>
<ResizablePanel <ResizablePanel
className="p-2 flex flex-col" className="p-2 flex flex-col"
maxSize={80} maxSize={80}
minSize={30} minSize={30}
defaultSize={60} defaultSize={isHorizontalLayout ? 70 : 60}
ref={editorPanelRef} ref={editorPanelRef}
> >
<div className="h-10 w-full flex gap-2 overflow-auto tab-scroll"> <div className="h-10 w-full flex gap-2 overflow-auto tab-scroll">
@ -1068,24 +1074,38 @@ export default function CodeEditor({
</div> </div>
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel defaultSize={40}> <ResizablePanel defaultSize={isHorizontalLayout ? 30 : 40}>
<ResizablePanelGroup direction="vertical"> <ResizablePanelGroup direction={isHorizontalLayout ? "horizontal" : "vertical"}>
<ResizablePanel <ResizablePanel
ref={previewPanelRef} ref={previewPanelRef}
defaultSize={4} defaultSize={4}
collapsedSize={4} collapsedSize={isHorizontalLayout ? 20 : 4}
minSize={25} minSize={25}
collapsible collapsible
className="p-2 flex flex-col" className="p-2 flex flex-col"
onCollapse={() => setIsPreviewCollapsed(true)} onCollapse={() => setIsPreviewCollapsed(true)}
onExpand={() => setIsPreviewCollapsed(false)} onExpand={() => setIsPreviewCollapsed(false)}
> >
<div className="flex items-center justify-between">
<Button onClick={toggleLayout} size="sm" variant="ghost" className="mr-2 border">
{isHorizontalLayout ? <ArrowRightToLine className="w-4 h-4" /> : <ArrowDownToLine className="w-4 h-4" />}
</Button>
<PreviewWindow <PreviewWindow
open={togglePreviewPanel} open={togglePreviewPanel}
collapsed={isPreviewCollapsed} collapsed={isPreviewCollapsed}
src={previewURL} src={previewURL}
ref={previewWindowRef} ref={previewWindowRef}
/> />
</div>
{!isPreviewCollapsed && (
<div className="w-full grow rounded-md overflow-hidden bg-foreground mt-2">
<iframe
width={"100%"}
height={"100%"}
src={previewURL}
/>
</div>
)}
</ResizablePanel> </ResizablePanel>
<ResizableHandle /> <ResizableHandle />
<ResizablePanel <ResizablePanel

16
frontend/components/editor/preview/index.tsx
View File

@ -33,10 +33,6 @@ ref: React.Ref<{
return ( return (
<> <>
<div
className={`${collapsed ? "h-full" : "h-10"
} select-none w-full flex gap-2`}
>
<div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between"> <div className="h-8 rounded-md px-3 bg-secondary flex items-center w-full justify-between">
<div className="text-xs">Preview</div> <div className="text-xs">Preview</div>
<div className="flex space-x-1 translate-x-1"> <div className="flex space-x-1 translate-x-1">
@ -65,18 +61,6 @@ ref: React.Ref<{
)} )}
</div> </div>
</div> </div>
</div>
{collapsed ? null : (
<div className="w-full grow rounded-md overflow-hidden bg-foreground">
<iframe
key={iframeKey}
ref={frameRef}
width={"100%"}
height={"100%"}
src={src}
/>
</div>
)}
</> </>
) )
}) })