jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign Split Tree and visualiser into panels

Browse Source 
Summary: This looks a lot neater and allows us to have separate dedicated visualiser header

Reviewed By: mweststrate

Differential Revision: D47626867

fbshipit-source-id: 843721853e0ff88837afbb9bf3f510a908160d12
This commit is contained in:
Luke De Feo
2023-07-26 03:22:38 -07:00
committed by Facebook GitHub Bot
parent 0e15dce033
commit 272d2d2106
4 changed files with 46 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
desktop/plugins/public/ui-debugger/components/main.tsx
View File

@@ -106,43 +106,49 @@ export function Component() {
return (
<QueryClientProvider client={queryClient}>
<Layout.Container grow padh="small" padv="medium">
<Layout.Top>
<>
<Controls />
<Layout.Horizontal grow pad="small">
<Tree2 nodes={nodes} rootId={rootId} />
<Layout.Horizontal
grow
style={{
borderRadius: theme.borderRadius,
backgroundColor: theme.backgroundWash,
}}>
<Layout.Container
grow
style={{
borderRadius: theme.borderRadius,
backgroundColor: theme.backgroundDefault,
}}>
<Controls />
<Tree2 nodes={nodes} rootId={rootId} />
</Layout.Container>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth + theme.space.large}
maxWidth={800}
onResize={(width) => {
instance.uiActions.setVisualiserWidth(width);
}}
gutter>
<Visualization2D
width={visualiserWidth}
nodes={nodes}
onSelectNode={instance.uiActions.onSelectNode}
/>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
os={instance.os}
metadata={metadata}
nodes={nodes}
showExtra={openBottomPanelWithContent}
/>
</DetailSidebar>
</Layout.Horizontal>
</>
<BottomPanel dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
</Layout.Top>
</Layout.Container>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth + theme.space.large}
maxWidth={800}
onResize={(width) => {
instance.uiActions.setVisualiserWidth(width);
}}
gutter>
<Visualization2D
width={visualiserWidth}
nodes={nodes}
onSelectNode={instance.uiActions.onSelectNode}
/>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
os={instance.os}
metadata={metadata}
nodes={nodes}
showExtra={openBottomPanelWithContent}
/>
</DetailSidebar>
<BottomPanel dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
</Layout.Horizontal>
</QueryClientProvider>
);
}