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

fix sticky elements

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-03-16 12:34:01 -03:00 committed by James A. Petts
parent b39a96cfb2
commit bc7cf6e01d
3 changed files with 104 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
platform/ui/src/views/StudyList/StudyList.js
View File

@ -69,13 +69,8 @@ const StudyList = ({ studies, perPage }) => {
'h-screen': isEmptyStudies, 'h-screen': isEmptyStudies,
})} })}
> >
<div className="sticky top-0 z-10"> <Header />
<Header /> <StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
<StudyListFilter
numOfStudies={numOfStudies}
filtersMeta={filtersMeta}
/>
</div>
<StudyListTable <StudyListTable
studies={studiesData} studies={studiesData}
numOfStudies={numOfStudies} numOfStudies={numOfStudies}

2
platform/ui/src/views/StudyList/components/Header.js
View File

@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
}; };
return ( return (
<div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white"> <div className="bg-custom-navy flex flex-row justify-between px-3 py-1 text-white sticky top-0 z-10">
<div className="flex items-center"> <div className="flex items-center">
<div className="mx-3">{appLogo}</div> <div className="mx-3">{appLogo}</div>
<div>{children}</div> <div>{children}</div>

190
platform/ui/src/views/StudyList/components/StudyListFilter.js
View File

@ -124,103 +124,115 @@ const StudyListFilter = ({
}; };
return ( return (
<div className="border-t-4 border-b-4 border-black"> <>
<div className="bg-custom-navyDark"> <div className="border-t-4 border-black">
<div className="container m-auto relative flex flex-col pt-5 pb-3"> <div className="bg-custom-navyDark">
<div className="flex flex-row justify-between mb-5 px-12"> <div className="container m-auto relative flex flex-col pt-5">
<div className="flex flex-row"> <div className="flex flex-row justify-between mb-5 px-12">
<Typography variant="h4" className="text-custom-aquaBright mr-6"> <div className="flex flex-row">
Study List <Typography
</Typography> variant="h4"
<div className="flex flex-row items-end"> className="text-custom-aquaBright mr-6"
<Button
variant="text"
size="small"
color="inherit"
className="text-custom-blueBright"
startIcon={<Icon name="info-link" className="w-2" />}
> >
<span className="flex flex-col flex-1"> Study List
<span>Learn more</span> </Typography>
<span className="opacity-50 pt-1 border-b border-custom-blueBright"></span> <div className="flex flex-row items-end">
</span> <Button
</Button> variant="text"
size="small"
color="inherit"
className="text-custom-blueBright"
startIcon={<Icon name="info-link" className="w-2" />}
>
<span className="flex flex-col flex-1">
<span>Learn more</span>
<span className="opacity-50 pt-1 border-b border-custom-blueBright"></span>
</span>
</Button>
</div>
</div>
<div className="flex flex-row">
{isFiltering() && (
<Button
rounded="full"
variant="outlined"
color="primary"
className="text-custom-blueBright border-custom-blueBright mx-8"
startIcon={<Icon name="cancel" />}
onClick={clearFilters}
>
Clear filters
</Button>
)}
<Typography variant="h4" className="mr-2">
{numOfStudies > 100 ? '>100' : numOfStudies}
</Typography>
<Typography
variant="h6"
className="text-custom-grayLight self-end pb-1"
>
Studies
</Typography>
</div> </div>
</div> </div>
<div className="flex flex-row">
{isFiltering() && (
<Button
rounded="full"
variant="outlined"
color="primary"
className="text-custom-blueBright border-custom-blueBright mx-8"
startIcon={<Icon name="cancel" />}
onClick={clearFilters}
>
Clear filters
</Button>
)}
<Typography variant="h4" className="mr-2">
{numOfStudies > 100 ? '>100' : numOfStudies}
</Typography>
<Typography
variant="h6"
className="text-custom-grayLight self-end pb-1"
>
Studies
</Typography>
</div>
</div>
<div className="flex flex-row w-full">
{filtersMeta.map(
({ name, displayName, inputType, isSortable, gridCol }) => {
return (
<div
className={classnames(
`w-${gridCol}/24`,
'pl-4 first:pl-12'
)}
>
<FilterLabel
key={name}
label={displayName}
isSortable={
isSortable && numOfStudies <= 100 && numOfStudies > 0
}
isBeingSorted={sortBy === name}
sortDirection={sortDirection}
onLabelClick={() => handleFilterLabelClick(name)}
inputType={inputType}
>
{inputType !== 'none' && (
<Input
className="border-custom-blue mt-2 bg-black"
type="text"
containerClassName="mr-2"
value={currentFiltersValues[name] || ''}
onChange={event =>
handleFilterValueChange(event, name)
}
/>
)}
</FilterLabel>
</div>
);
}
)}
</div> </div>
</div> </div>
</div> </div>
{numOfStudies > 100 && ( <div className="sticky z-10" style={{ top: 54 }}>
<div className="container m-auto"> <div className="bg-custom-navyDark pt-3 pb-3 border-b-4 border-black">
<div className="bg-custom-blue text-center text-base py-1 rounded-b"> <div className="container m-auto relative flex flex-col">
<p className="text-white"> <div className="flex flex-row w-full">
Filter list to 100 studies or less to enable sorting {filtersMeta.map(
</p> ({ name, displayName, inputType, isSortable, gridCol }) => {
return (
<div
key={name}
className={classnames(
`w-${gridCol}/24`,
'pl-4 first:pl-12'
)}
>
<FilterLabel
key={name}
label={displayName}
isSortable={
isSortable && numOfStudies <= 100 && numOfStudies > 0
}
isBeingSorted={sortBy === name}
sortDirection={sortDirection}
onLabelClick={() => handleFilterLabelClick(name)}
inputType={inputType}
>
{inputType !== 'none' && (
<Input
className="border-custom-blue mt-2 bg-black"
type="text"
containerClassName="mr-2"
value={currentFiltersValues[name] || ''}
onChange={event =>
handleFilterValueChange(event, name)
}
/>
)}
</FilterLabel>
</div>
);
}
)}
</div>
</div> </div>
</div> </div>
)} {numOfStudies > 100 && (
</div> <div className="container m-auto">
<div className="bg-custom-blue text-center text-base py-1 rounded-b">
<p className="text-white">
Filter list to 100 studies or less to enable sorting
</p>
</div>
</div>
)}
</div>
</>
); );
}; };