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,
})}
>
<div className="sticky top-0 z-10">
<Header />
<StudyListFilter
numOfStudies={numOfStudies}
filtersMeta={filtersMeta}
/>
</div>
<Header />
<StudyListFilter numOfStudies={numOfStudies} filtersMeta={filtersMeta} />
<StudyListTable
studies={studiesData}
numOfStudies={numOfStudies}

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

@ -12,7 +12,7 @@ function Header({ appLogo = OHIFLogo(), children, t }) {
};
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="mx-3">{appLogo}</div>
<div>{children}</div>

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

@ -124,103 +124,115 @@ const StudyListFilter = ({
};
return (
<div className="border-t-4 border-b-4 border-black">
<div className="bg-custom-navyDark">
<div className="container m-auto relative flex flex-col pt-5 pb-3">
<div className="flex flex-row justify-between mb-5 px-12">
<div className="flex flex-row">
<Typography variant="h4" className="text-custom-aquaBright mr-6">
Study List
</Typography>
<div className="flex flex-row items-end">
<Button
variant="text"
size="small"
color="inherit"
className="text-custom-blueBright"
startIcon={<Icon name="info-link" className="w-2" />}
<>
<div className="border-t-4 border-black">
<div className="bg-custom-navyDark">
<div className="container m-auto relative flex flex-col pt-5">
<div className="flex flex-row justify-between mb-5 px-12">
<div className="flex flex-row">
<Typography
variant="h4"
className="text-custom-aquaBright mr-6"
>
<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>
Study List
</Typography>
<div className="flex flex-row items-end">
<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 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>
{numOfStudies > 100 && (
<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 className="sticky z-10" style={{ top: 54 }}>
<div className="bg-custom-navyDark pt-3 pb-3 border-b-4 border-black">
<div className="container m-auto relative flex flex-col">
<div className="flex flex-row w-full">
{filtersMeta.map(
({ 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>
{numOfStudies > 100 && (
<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>
</>
);
};