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

fix: StudyList Fixes

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-03-13 19:39:51 -03:00 committed by James A. Petts
parent 11bd7105d6
commit b39a96cfb2
5 changed files with 144 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@ const variantClasses = {
}, },
contained: { contained: {
default: default:
'bg-custom-aquaBright text-white hover:opacity-80 active:opacity-100 focus:opacity-80', 'bg-custom-aquaBright text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
primary: primary:
'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80', 'bg-custom-blue text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary: secondary:

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

@ -69,8 +69,13 @@ 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}

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

@ -124,7 +124,8 @@ const StudyListFilter = ({
}; };
return ( return (
<div className="bg-custom-navyDark border-t-4 border-black"> <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="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 justify-between mb-5 px-12">
<div className="flex flex-row"> <div className="flex flex-row">
@ -175,7 +176,10 @@ const StudyListFilter = ({
({ name, displayName, inputType, isSortable, gridCol }) => { ({ name, displayName, inputType, isSortable, gridCol }) => {
return ( return (
<div <div
className={classnames(`w-${gridCol}/24`, 'pl-4 first:pl-12')} className={classnames(
`w-${gridCol}/24`,
'pl-4 first:pl-12'
)}
> >
<FilterLabel <FilterLabel
key={name} key={name}
@ -194,7 +198,9 @@ const StudyListFilter = ({
type="text" type="text"
containerClassName="mr-2" containerClassName="mr-2"
value={currentFiltersValues[name] || ''} value={currentFiltersValues[name] || ''}
onChange={event => handleFilterValueChange(event, name)} onChange={event =>
handleFilterValueChange(event, name)
}
/> />
)} )}
</FilterLabel> </FilterLabel>
@ -205,6 +211,16 @@ const StudyListFilter = ({
</div> </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>
); );
}; };

71
platform/ui/src/views/StudyList/components/StudyListTable.js
View File

@ -27,7 +27,7 @@ const TableRow = props => {
const toggleRow = () => setIsOpened(!isOpened); const toggleRow = () => setIsOpened(!isOpened);
const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right'; const ChevronIconName = isOpened ? 'chevron-down' : 'chevron-right';
const tdClasses = [ const tdClasses = [
'px-4 py-2', 'px-4 py-2 text-base',
{ 'border-b border-custom-violetPale': !isOpened }, { 'border-b border-custom-violetPale': !isOpened },
]; ];
const seriesWidthClasses = { const seriesWidthClasses = {
@ -44,8 +44,8 @@ const TableRow = props => {
})} })}
> >
<div <div
className={classnames('w-full', { className={classnames('w-full transition duration-300', {
'border border-custom-aquaBright rounded overflow-hidden mb-2': isOpened, 'border border-custom-aquaBright rounded overflow-hidden mb-2 hover:border-custom-violetPale': isOpened,
})} })}
> >
<table className={classnames('w-full p-4')}> <table className={classnames('w-full p-4')}>
@ -128,33 +128,46 @@ const TableRow = props => {
</td> </td>
</tr> </tr>
{isOpened && ( {isOpened && (
<tr className={classnames('bg-black')}> <tr
className={classnames('bg-black max-h-0 overflow-hidden')}
>
<td colSpan="7" className="py-4 pl-12 pr-2"> <td colSpan="7" className="py-4 pl-12 pr-2">
<div className="flex"> <div className="block">
<Button <Button
rounded="full" rounded="full"
variant="outlined" variant="contained"
endIcon={<Icon name="launch-info" />} className="mr-4 font-bold"
className="mr-4" endIcon={
<Icon
name="launch-arrow"
style={{ color: '#21a7c6' }}
/>
}
> >
Basic Viewer Basic Viewer
</Button> </Button>
<Button <Button
rounded="full" rounded="full"
variant="outlined" variant="contained"
endIcon={<Icon name="launch-info" />} className="mr-4 font-bold"
className="mr-4" endIcon={
<Icon
name="launch-arrow"
style={{ color: '#21a7c6' }}
/>
}
> >
Segmentation Segmentation{' '}
</Button> </Button>
<Button <Button
rounded="full" rounded="full"
variant="outlined" variant="outlined"
endIcon={<Icon name="launch-info" />} endIcon={<Icon name="launch-info" />}
className="font-bold"
> >
Module 3 Module 3
</Button> </Button>
<div className="ml-5 text-lg text-custom-grayBright flex items-center"> <div className="ml-5 text-lg text-custom-grayBright inline-flex items-center">
<Icon <Icon
name="notificationwarning-diamond" name="notificationwarning-diamond"
className="mr-2 w-5 h-5" className="mr-2 w-5 h-5"
@ -166,27 +179,39 @@ const TableRow = props => {
<div className="w-full text-lg"> <div className="w-full text-lg">
<div className="bg-custom-navy border-b border-custom-violetPale flex"> <div className="bg-custom-navy border-b border-custom-violetPale flex">
<div <div
className={classnames(seriesWidthClasses.normal)} className={classnames(
seriesWidthClasses.normal,
'font-bold'
)}
> >
Description Description
</div> </div>
<div <div
className={classnames(seriesWidthClasses.small)} className={classnames(
seriesWidthClasses.small,
'font-bold'
)}
> >
Series Series
</div> </div>
<div <div
className={classnames(seriesWidthClasses.small)} className={classnames(
seriesWidthClasses.small,
'font-bold'
)}
> >
Modality Modality
</div> </div>
<div <div
className={classnames(seriesWidthClasses.normal)} className={classnames(
seriesWidthClasses.normal,
'font-bold'
)}
> >
Instances Instances
</div> </div>
</div> </div>
<div className="mt-2 h-48 overflow-y-scroll ohif-scrollbar"> <div className="mt-2 max-h-48 overflow-y-scroll ohif-scrollbar">
{series.map((seriesItem, i) => ( {series.map((seriesItem, i) => (
<div className="w-full flex" key={i}> <div className="w-full flex" key={i}>
<div <div
@ -247,7 +272,7 @@ TableRow.propTypes = {
const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => { const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
const renderTable = () => { const renderTable = () => {
return ( return (
<table className="w-full text-white border-t-4 border-black"> <table className="w-full text-white">
<tbody> <tbody>
{studies.map((study, i) => ( {studies.map((study, i) => (
<TableRow <TableRow
@ -283,14 +308,6 @@ const StudyListTable = ({ studies, numOfStudies, filtersMeta }) => {
<> <>
<div className="bg-black"> <div className="bg-black">
<div className="container m-auto relative"> <div className="container m-auto relative">
{numOfStudies > 100 && (
<div className="bg-custom-blue text-center text-base py-1 rounded-b sticky top-0">
<p className="text-white">
Filter list to 100 studies or less to enable sorting
</p>
</div>
)}
{numOfStudies > 0 && renderTable()} {numOfStudies > 0 && renderTable()}
{numOfStudies === 0 && renderEmpty()} {numOfStudies === 0 && renderEmpty()}
</div> </div>

5
platform/ui/tailwind.config.js
View File

@ -345,10 +345,11 @@ module.exports = {
...theme('spacing'), ...theme('spacing'),
...negative(theme('spacing')), ...negative(theme('spacing')),
}), }),
maxHeight: { maxHeight: theme => ({
full: '100%', full: '100%',
screen: '100vh', screen: '100vh',
}, ...theme('spacing'),
}),
maxWidth: (theme, { breakpoints }) => ({ maxWidth: (theme, { breakpoints }) => ({
none: 'none', none: 'none',
xs: '20rem', xs: '20rem',