TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fine tune grid spacing

Browse Source
This commit is contained in:
dannyrb 2020-05-14 22:55:17 -04:00 committed by James A. Petts
parent 00347d3ecb
commit 6044190ab1
3 changed files with 107 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
extensions/default/src/ViewerLayout/index.jsx
View File

@ -57,23 +57,23 @@ function ViewerLayout({
moreTools={primaryToolBarLayout.moreTools} moreTools={primaryToolBarLayout.moreTools}
/> />
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
style={{ height: 'calc(100vh - 57px' }} style={{ height: 'calc(100vh - 57px' }}
> >
{/* LEFT SIDEPANELS */}
<SidePanel <SidePanel
side="left" side="left"
defaultComponentOpen={leftPanelComponents[0].name} defaultComponentOpen={leftPanelComponents[0].name}
childComponents={leftPanelComponents} childComponents={leftPanelComponents}
/> />
<div className="flex flex-col flex-1 h-full pb-2"> {/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full">
<div className="flex flex-2 w-100 border-b border-transparent h-12"> <div className="flex flex-2 w-100 border-b border-transparent h-12">
<Toolbar type="secondary" tools={secondaryToolBarLayout.tools} /> <Toolbar type="secondary" tools={secondaryToolBarLayout.tools} />
</div> </div>
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center"> <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
<ViewportGrid /> <ViewportGrid />
{/*<ViewportGrid {/*
rows={1}
cols={2}
viewportContents={[ viewportContents={[
<Viewport <Viewport
viewportIndex={0} viewportIndex={0}

2
platform/ui/src/components/ViewportPane/ViewportPane.jsx
View File

@ -35,7 +35,7 @@ function ViewportPane({ children, className, isActive, onDrop }) {
className={classnames( className={classnames(
'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden', 'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
{ {
'border-2 border-primary-light -m-px': isActive, 'border-2 border-primary-light m-0': isActive,
'border border-secondary-light': !isActive, 'border border-secondary-light': !isActive,
}, },
className className

9
platform/ui/src/views/Viewer/Viewer.mdx
View File

@ -53,12 +53,12 @@ import { tabs } from './studyBrowserMockData';
}; };
return ( return (
<DragAndDropProvider> <DragAndDropProvider>
<div>
<Header /> <Header />
<div <div
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
style={{ height: 'calc(100vh - 57px' }} style={{ height: 'calc(100vh - 57px' }}
> >
{/* LEFT SIDEPANELS */}
<SidePanel <SidePanel
side="left" side="left"
defaultComponentOpen='studies' defaultComponentOpen='studies'
@ -73,12 +73,12 @@ import { tabs } from './studyBrowserMockData';
}} }}
/> />
{/* TOOLBAR + GRID */} {/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full pb-2"> <div className="flex flex-col flex-1 h-full">
<div className="flex flex-2 w-100 border-b border-transparent h-12"> <div className="flex flex-2 w-100 border-b border-transparent h-12">
<ViewportToolbar /> <ViewportToolbar />
</div> </div>
{/* VIEWPORT GRID CONTAINER */} {/* VIEWPORT GRID CONTAINER */}
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center"> <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
<ViewportGrid numRows={1} numCols={2}> <ViewportGrid numRows={1} numCols={2}>
{[0, 1].map(viewportIndex => ( {[0, 1].map(viewportIndex => (
<ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}> <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
@ -160,7 +160,6 @@ import { tabs } from './studyBrowserMockData';
}} }}
/> />
</div> </div>
</div>
</DragAndDropProvider> </DragAndDropProvider>
); );
}} }}