Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui): bump min sidebar size (#24193)

Browse source
This commit is contained in:
Pavel Feldman 2023-07-13 15:14:49 -07:00 committed by GitHub
parent 18dfe680f5
commit 33bab3652d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/trace-viewer/src/ui/uiModeView.tsx
View file

@ -171,7 +171,7 @@ export const UIModeView: React.FC<{}> = ({
<div className='title'>UI Mode disconnected</div> <div className='title'>UI Mode disconnected</div>
<div><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div> <div><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div>
</div>} </div>}
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}> <SplitView sidebarSize={250} minSidebarSize={125} orientation='horizontal' sidebarIsFirst={true}>
<div className='vbox'> <div className='vbox'>
<div className={'vbox' + (isShowingOutput ? '' : ' hidden')}> <div className={'vbox' + (isShowingOutput ? '' : ' hidden')}>
<Toolbar> <Toolbar>

6
packages/web/src/components/splitView.tsx
View file

@ -22,6 +22,7 @@ export interface SplitViewProps {
sidebarHidden?: boolean, sidebarHidden?: boolean,
sidebarIsFirst?: boolean, sidebarIsFirst?: boolean,
orientation?: 'vertical' | 'horizontal', orientation?: 'vertical' | 'horizontal',
minSidebarSize?: number,
children: JSX.Element | JSX.Element[] | string, children: JSX.Element | JSX.Element[] | string,
} }
@ -32,9 +33,10 @@ export const SplitView: React.FC<SplitViewProps> = ({
sidebarHidden = false, sidebarHidden = false,
sidebarIsFirst = false, sidebarIsFirst = false,
orientation = 'vertical', orientation = 'vertical',
minSidebarSize = kMinSize,
children children
}) => { }) => {
const [size, setSize] = React.useState<number>(Math.max(kMinSize, sidebarSize)); const [size, setSize] = React.useState<number>(Math.max(minSidebarSize, sidebarSize));
const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null); const [resizing, setResizing] = React.useState<{ offset: number, size: number } | null>(null);
const childrenArray = React.Children.toArray(children); const childrenArray = React.Children.toArray(children);
@ -70,7 +72,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
const splitView = (event.target as HTMLElement).parentElement!; const splitView = (event.target as HTMLElement).parentElement!;
const rect = splitView.getBoundingClientRect(); const rect = splitView.getBoundingClientRect();
const size = Math.min(Math.max(kMinSize, newSize), (orientation === 'vertical' ? rect.height : rect.width) - kMinSize); const size = Math.min(Math.max(minSidebarSize, newSize), (orientation === 'vertical' ? rect.height : rect.width) - minSidebarSize);
setSize(size); setSize(size);
} }
}} }}