diff options
| author | codetorso <[email protected]> | 2024-06-12 12:38:23 +0530 |
|---|---|---|
| committer | codetorso <[email protected]> | 2024-06-12 12:38:23 +0530 |
| commit | 03c9fb0acd881f8cb8a403042c19bd0ce2be3016 (patch) | |
| tree | d996b2917edac2dda3e1045f565f321ab02ecf24 | |
| parent | Adding keyboard shortcuts, responsive design that 99% don't need but still (diff) | |
| download | supermemory-03c9fb0acd881f8cb8a403042c19bd0ce2be3016.tar.xz supermemory-03c9fb0acd881f8cb8a403042c19bd0ce2be3016.zip | |
full screen mode implemented
| -rw-r--r-- | apps/web/app/(canvas)/canvas.tsx | 3 | ||||
| -rw-r--r-- | apps/web/app/(canvas)/canvas/page.tsx | 15 |
2 files changed, 9 insertions, 9 deletions
diff --git a/apps/web/app/(canvas)/canvas.tsx b/apps/web/app/(canvas)/canvas.tsx index b836cfe1..09e0bed5 100644 --- a/apps/web/app/(canvas)/canvas.tsx +++ b/apps/web/app/(canvas)/canvas.tsx @@ -10,7 +10,7 @@ import { SaveStatus } from "./savesnap"; -export default function Canvas() { +export default function Canvas(){ const [storeWithStatus, setStoreWithStatus] = useState<TLStoreWithStatus>({ status: "loading", }); @@ -39,7 +39,6 @@ export default function Canvas() { setUserPreferences({ id: "supermemory", isDarkMode: true }); return ( <Tldraw - className="rounded-2xl" components={components} store={storeWithStatus} shapeUtils={[twitterCardUtil]} diff --git a/apps/web/app/(canvas)/canvas/page.tsx b/apps/web/app/(canvas)/canvas/page.tsx index 86c283ea..552f8708 100644 --- a/apps/web/app/(canvas)/canvas/page.tsx +++ b/apps/web/app/(canvas)/canvas/page.tsx @@ -15,13 +15,14 @@ import { function page() { const [value, setValue] = useState(""); + const [fullScreen, setFullScreen] = useState(false); return ( - <div className="h-screen w-full px-4 py-6"> + <div className={`h-screen w-full ${ !fullScreen && "px-4 py-6"} transition-all`}> <div> - <PanelGroup className="w-[calc(100vw-2rem)]" direction="horizontal"> - <Panel defaultSize={30} collapsible={true} minSize={22}> - <div className="flex h-[calc(100vh-3rem)] w-full flex-col overflow-hidden rounded-2xl bg-[#1F2428]"> + <PanelGroup className={` ${fullScreen ? "w-[calc(100vw-2rem)]" : "w-screen"} transition-all`} direction="horizontal"> + <Panel onExpand={()=> {setFullScreen(false)}} onCollapse={()=> {setFullScreen(true)}} defaultSize={30} collapsible={true} minSize={22}> + <div className={`flex transition-all rounded-2xl ${fullScreen ? "h-screen": "h-[calc(100vh-3rem)]"} w-full flex-col overflow-hidden bg-[#1F2428]`}> <div className="flex items-center justify-between bg-[#2C3439] px-4 py-2 text-lg font-medium text-[#989EA4]"> Change Filters <SettingsSvg /> @@ -77,15 +78,15 @@ function page() { </div> </div> </Panel> - <PanelResizeHandle className="relative flex items-center justify-center px-1"> + <PanelResizeHandle className={`relative flex items-center transition-all justify-center ${!fullScreen && "px-1"}`}> {/* <div className="absolute z-[1000000] top-1/2 -translate-y-1/2"> */} - <div className="rounded-lg bg-[#2F363B] px-1 py-2"> + <div className={`rounded-lg bg-[#2F363B] ${!fullScreen && "px-1"} transition-all py-2`}> <DragSvg /> </div> {/* </div> */} </PanelResizeHandle> <Panel className="relative" defaultSize={70} minSize={60}> - <div className="absolute inset-0 h-[calc(100vh-3rem)] w-full"> + <div className={`absolute overflow-hidden transition-all inset-0 ${ fullScreen ? "h-screen " : "h-[calc(100vh-3rem)] rounded-2xl"} w-full`}> <Canvas /> </div> </Panel> |