othmane/ohif-viewer
1
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

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

@ -53,113 +53,112 @@ import { tabs } from './studyBrowserMockData';
}; };
return ( return (
<DragAndDropProvider> <DragAndDropProvider>
<div> <Header />
<Header /> <div
<div className="flex flex-row flex-no-wrap items-stretch overflow-hidden w-full"
className="flex flex-row flex-no-wrap flex-1 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'
childComponents={{ childComponents={{
iconName: 'group-layers', iconName: 'group-layers',
iconLabel: 'Studies', iconLabel: 'Studies',
label: 'Studies', label: 'Studies',
name: 'studies', name: 'studies',
content: ( content: (
<StudyBrowser tabs={tabs} /> <StudyBrowser tabs={tabs} />
) )
}} }}
/> />
{/* 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>
{/* VIEWPORT GRID CONTAINER */}
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
<ViewportGrid numRows={1} numCols={2}>
{[0, 1].map(viewportIndex => (
<ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
<Viewport
viewportIndex={viewportIndex}
onSeriesChange={(direction) => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: true,
isLocked: false,
studyDate: '07-Sep-2011',
currentSeries: 1,
seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'CT',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
thickness: '5.0mm',
spacing: '1.25mm',
scanner: 'Aquilion',
},
}}
>
<div className="flex justify-center items-center h-full">
CONTENT
</div>
</Viewport>
</ViewportPane>)
)}
</ViewportGrid>
</div>
</div> </div>
<SidePanel {/* VIEWPORT GRID CONTAINER */}
side="right" <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">
defaultComponentOpen="measurements" <ViewportGrid numRows={1} numCols={2}>
childComponents={{ {[0, 1].map(viewportIndex => (
iconName: 'list-bullets', <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
iconLabel: 'Measure', <Viewport
label: 'Measurements', viewportIndex={viewportIndex}
name: 'measurements', onSeriesChange={(direction) => alert(`Series ${direction}`)}
content: ( studyData={{
<MeasurementsPanel label: 'A',
descriptionData={descriptionData} isTracked: true,
measurementTableData={measurementTableData} isLocked: false,
actionButtons={ studyDate: '07-Sep-2011',
<React.Fragment> currentSeries: 1,
<ButtonGroup onClick={() => alert('Export')}> seriesDescription:
<Button 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
className="text-white border-primary-main bg-black text-base py-2 px-2" modality: 'CT',
size="initial" patientInformation: {
color="inherit" patientName: 'Smith, Jane',
> patientSex: 'F',
Export patientAge: '59',
</Button> MRN: '10000001',
<IconButton thickness: '5.0mm',
className="bg-black border-primary-main px-2 text-white px-2" spacing: '1.25mm',
color="inherit" scanner: 'Aquilion',
size="initial" },
> }}
<Icon name="arrow-down" /> >
</IconButton> <div className="flex justify-center items-center h-full">
</ButtonGroup> CONTENT
</div>
</Viewport>
</ViewportPane>)
)}
</ViewportGrid>
</div>
</div>
<SidePanel
side="right"
defaultComponentOpen="measurements"
childComponents={{
iconName: 'list-bullets',
iconLabel: 'Measure',
label: 'Measurements',
name: 'measurements',
content: (
<MeasurementsPanel
descriptionData={descriptionData}
measurementTableData={measurementTableData}
actionButtons={
<React.Fragment>
<ButtonGroup onClick={() => alert('Export')}>
<Button <Button
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2" className="text-white border-primary-main bg-black text-base py-2 px-2"
variant="outlined"
size="initial" size="initial"
color="inherit" color="inherit"
onClick={() => alert('Create Report')}
> >
Create Report Export
</Button> </Button>
</React.Fragment> <IconButton
} className="bg-black border-primary-main px-2 text-white px-2"
/> color="inherit"
) size="initial"
}} >
/> <Icon name="arrow-down" />
</div> </IconButton>
</ButtonGroup>
<Button
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
variant="outlined"
size="initial"
color="inherit"
onClick={() => alert('Create Report')}
>
Create Report
</Button>
</React.Fragment>
}
/>
)
}}
/>
</div> </div>
</DragAndDropProvider> </DragAndDropProvider>
); );