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

2
desktop/plugins/public/ui-debugger/components/Controls.tsx
View File

@@ -44,7 +44,7 @@ export const Controls: React.FC = () => {
useState(false); useState(false);
return ( return (
<Layout.Horizontal pad="small" gap="small"> <Layout.Horizontal gap="medium" pad="medium">
<Input <Input
value={searchTerm} value={searchTerm}
onChange={(e) => { onChange={(e) => {

2
desktop/plugins/public/ui-debugger/components/Visualization2D.tsx
View File

@@ -135,6 +135,8 @@ export const Visualization2D: React.FC<
//this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
style={ style={
{ {
backgroundColor: theme.backgroundWash,
borderRadius: theme.borderRadius,
overflowY: 'auto', overflowY: 'auto',
overflowX: 'hidden', overflowX: 'hidden',
position: 'relative', //this is for the absolutely positioned overlays position: 'relative', //this is for the absolutely positioned overlays

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

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

1
desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
View File

@@ -213,6 +213,7 @@ export function Tree2({
//We use this normal divs flexbox sizing to measure how much vertical space we need for the child div //We use this normal divs flexbox sizing to measure how much vertical space we need for the child div
ref={grandParentRef} ref={grandParentRef}
style={{ style={{
paddingLeft: theme.space.medium,
height: '100%', height: '100%',
width: '100%', width: '100%',
}}> }}>