microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues 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><a href='#' onClick={() => window.location.reload()}>Reload the page</a> to reconnect</div>
</div>}
<SplitView sidebarSize={250} orientation='horizontal' sidebarIsFirst={true}>
<SplitView sidebarSize={250} minSidebarSize={125} orientation='horizontal' sidebarIsFirst={true}>
<div className='vbox'>
<div className={'vbox' + (isShowingOutput ? '' : ' hidden')}>
<Toolbar>

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

@ -22,6 +22,7 @@ export interface SplitViewProps {
sidebarHidden?: boolean,
sidebarIsFirst?: boolean,
orientation?: 'vertical' | 'horizontal',
minSidebarSize?: number,
children: JSX.Element | JSX.Element[] | string,
}
@ -32,9 +33,10 @@ export const SplitView: React.FC<SplitViewProps> = ({
sidebarHidden = false,
sidebarIsFirst = false,
orientation = 'vertical',
minSidebarSize = kMinSize,
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 childrenArray = React.Children.toArray(children);
@ -70,7 +72,7 @@ export const SplitView: React.FC<SplitViewProps> = ({
const splitView = (event.target as HTMLElement).parentElement!;
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);
}
}}