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

Rotate Styling for Vertical Sidebar

Browse Source 
Summary: - We are using the `Sidebar` component in our `LogViewer` implementation and we noticed that it needed some styling updates to be used properly as a vertical `Sidebar`.

Reviewed By: mweststrate

Differential Revision: D32083159

fbshipit-source-id: 441f3972ae900b5d5f353d3c7b56117c489850ba
This commit is contained in:
Daniel Kohli
2021-11-03 09:47:20 -07:00
committed by Facebook GitHub Bot
parent 9975aa9319
commit 67b4b53c20
1 changed files with 30 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
desktop/flipper-plugin/src/ui/Sidebar.tsx
View File

@@ -230,42 +230,50 @@ const GutterWrapper = ({
</Layout.Right> </Layout.Right>
); );
case 'bottom': case 'bottom':
// TODO: needs rotated styling
return ( return (
<Layout.Top> <Layout.Top>
<VerticalGutter enabled={!!children} /> <VerticalGutter enabled={!!children} rotateStyling />
{children} {children}
</Layout.Top> </Layout.Top>
); );
case 'top': case 'top':
// TODO: needs rotated styling
return ( return (
<Layout.Bottom> <Layout.Bottom>
{children} {children}
<VerticalGutter enabled={!!children} /> <VerticalGutter enabled={!!children} rotateStyling />
</Layout.Bottom> </Layout.Bottom>
); );
} }
}; };
const VerticalGutterContainer = styled('div')<{enabled: boolean}>( const VerticalGutterContainer = styled('div')<{
({enabled}) => ({ enabled: boolean;
width: theme.space.large, rotateStyling?: boolean;
minWidth: theme.space.large, }>(({enabled, rotateStyling}) => ({
cursor: enabled ? undefined : 'default', // hide cursor from interactive container width: rotateStyling ? '100%' : theme.space.large,
color: enabled ? theme.textColorPlaceholder : theme.backgroundWash, minWidth: rotateStyling ? '100%' : theme.space.large,
fontSize: '16px', cursor: enabled ? undefined : 'default', // hide cursor from interactive container
display: 'flex', color: enabled ? theme.textColorPlaceholder : theme.backgroundWash,
flexDirection: 'row', fontSize: '16px',
alignItems: 'center', display: 'flex',
background: theme.backgroundWash, flexDirection: rotateStyling ? 'column' : 'row',
':hover': { alignItems: 'center',
background: enabled ? theme.dividerColor : undefined, background: theme.backgroundWash,
}, ':hover': {
}), background: enabled ? theme.dividerColor : undefined,
); },
const VerticalGutter = ({enabled}: {enabled: boolean}) => ( '& svg': {
<VerticalGutterContainer enabled={enabled}> transform: rotateStyling ? 'rotate(90deg)' : undefined,
},
}));
const VerticalGutter = ({
enabled,
rotateStyling,
}: {
enabled: boolean;
rotateStyling?: boolean;
}) => (
<VerticalGutterContainer enabled={enabled} rotateStyling={rotateStyling}>
<MoreOutlined /> <MoreOutlined />
</VerticalGutterContainer> </VerticalGutterContainer>
); );