feat: Study List Table - v2 (#1497)
* small fix in button hover * exported icons * feat: StudyList Table * icons comment * fix bottom spacing * add gatsby plugin for svg import * move mock file to ui * replace component to import from ui * move StudyList to platform/ui * fix inner table bg color * fix inner table border * add custom flex values * create custom class for custom scrollbar * fix inner table * update comment * refactor for reusable classes * update scrollbar name * fix studyList export * update scrollbar class
This commit is contained in:
Rodrigo Antinarelli
James A. Petts
parent
f4aea45e01
commit
fe672a804e
@ -6,3 +6,5 @@ export {
|
||||
ThemeWrapper,
|
||||
Typography,
|
||||
} from './src/components';
|
||||
|
||||
export { StudyList } from './src/views';
|
||||
|
||||
6
platform/ui/src/assets/icons/instances-active.svg
Normal file
6
platform/ui/src/assets/icons/instances-active.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
|
||||
<g fill="#348CFD">
|
||||
<path d="M14.75.917c.693 0 1.263.528 1.327 1.205l.006.128v4.167c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V2.25c0-.161-.114-.295-.266-.327l-.067-.006H2.25c-.161 0-.295.114-.327.266l-.006.067v12.5c0 .161.114.295.266.327l.067.006h4.167c.276 0 .5.224.5.5 0 .246-.177.45-.41.492l-.09.008H2.25c-.693 0-1.263-.528-1.327-1.205l-.006-.128V2.25c0-.693.528-1.263 1.205-1.327L2.25.917h12.5z" transform="translate(-.5 -1)"/>
|
||||
<path d="M19.583 5.917H7.417c-.829 0-1.5.671-1.5 1.5v12.166c0 .829.671 1.5 1.5 1.5h12.166c.829 0 1.5-.671 1.5-1.5V7.417c0-.829-.671-1.5-1.5-1.5zm-12.166 1h12.166c.276 0 .5.224.5.5v12.166c0 .276-.224.5-.5.5H7.417c-.276 0-.5-.224-.5-.5V7.417c0-.276.224-.5.5-.5z" transform="translate(-.5 -1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 856 B |
6
platform/ui/src/assets/icons/instances-inactive.svg
Normal file
6
platform/ui/src/assets/icons/instances-inactive.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
|
||||
<g fill="#3A3F99">
|
||||
<path d="M13.75-.083c.693 0 1.263.528 1.327 1.205l.006.128v4.167c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V1.25c0-.161-.114-.295-.266-.327L13.75.917H1.25c-.161 0-.295.114-.327.266l-.006.067v12.5c0 .161.114.295.266.327l.067.006h4.167c.276 0 .5.224.5.5 0 .246-.177.45-.41.492l-.09.008H1.25c-.693 0-1.263-.528-1.327-1.205l-.006-.128V1.25c0-.693.528-1.263 1.205-1.327l.128-.006h12.5z" transform="translate(.5)"/>
|
||||
<path d="M18.583 4.917H6.417c-.829 0-1.5.671-1.5 1.5v12.166c0 .829.671 1.5 1.5 1.5h12.166c.829 0 1.5-.671 1.5-1.5V6.417c0-.829-.671-1.5-1.5-1.5zm-12.166 1h12.166c.276 0 .5.224.5.5v12.166c0 .276-.224.5-.5.5H6.417c-.276 0-.5-.224-.5-.5V6.417c0-.276.224-.5.5-.5z" transform="translate(.5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 849 B |
@ -40,7 +40,7 @@ const variantClasses = {
|
||||
},
|
||||
outlined: {
|
||||
default:
|
||||
'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
'border bg-trasparent border-custom-aquaBright text-custom-aquaBright hover:bg-custom-aquaBright hover:text-black focus:text-black focus:bg-custom-aquaBright active:opacity-80',
|
||||
primary:
|
||||
'border bg-transparent border-custom-blue text-custom-blue hover:opacity-80 active:opacity-100 focus:opacity-80',
|
||||
secondary:
|
||||
|
||||
@ -3,4 +3,22 @@
|
||||
@tailwind utilities;
|
||||
|
||||
/* IMPORT CUSTOM FONT */
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
|
||||
|
||||
/* CUSTOM OHIF SCROLLBAR */
|
||||
.ohif-scrollbar::-webkit-scrollbar {
|
||||
@apply w-2;
|
||||
}
|
||||
|
||||
.ohif-scrollbar::-webkit-scrollbar-track {
|
||||
@apply rounded;
|
||||
}
|
||||
|
||||
.ohif-scrollbar::-webkit-scrollbar-thumb {
|
||||
@apply rounded;
|
||||
@apply bg-custom-blue;
|
||||
}
|
||||
|
||||
.ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive {
|
||||
@apply bg-custom-blue;
|
||||
}
|
||||
|
||||
30
platform/ui/src/views/StudyList/StudyList.mdx
Normal file
30
platform/ui/src/views/StudyList/StudyList.mdx
Normal file
@ -0,0 +1,30 @@
|
||||
---
|
||||
name: Study List
|
||||
menu: Views
|
||||
route: components/studyList
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import StudyList from './';
|
||||
|
||||
# StudyList
|
||||
|
||||
Description...
|
||||
|
||||
## Import
|
||||
|
||||
```javascript
|
||||
import { StudyList } from '@ohfi/ui';
|
||||
```
|
||||
|
||||
## StudyList
|
||||
|
||||
<Playground>
|
||||
<>
|
||||
<StudyList />
|
||||
</>
|
||||
</Playground>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={StudyList} />
|
||||
196
platform/ui/src/views/StudyList/components/StudyListTable.js
Normal file
196
platform/ui/src/views/StudyList/components/StudyListTable.js
Normal file
@ -0,0 +1,196 @@
|
||||
import React, { useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { Button } from '@ohif/ui';
|
||||
|
||||
/** TODO: Icon component should be used instead of importing the icons directly */
|
||||
import ChevronRight from '../../../assets/icons/chevron-right.svg';
|
||||
import ChevronDown from '../../../assets/icons/chevron-down.svg';
|
||||
import InstancesActive from '../../../assets/icons/instances-active.svg';
|
||||
import InstancesInactive from '../../../assets/icons/instances-inactive.svg';
|
||||
import LaunchInfo from '../../../assets/icons/launch-info.svg';
|
||||
|
||||
const TableRow = () => {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
const toggleRow = () => setIsOpened(!isOpened);
|
||||
const ChevronIcon = isOpened ? ChevronDown : ChevronRight;
|
||||
const InstancesIcon = isOpened ? InstancesActive : InstancesInactive;
|
||||
const tdClasses = [
|
||||
'px-4 py-2',
|
||||
{ 'border-b border-custom-violetPale': !isOpened },
|
||||
];
|
||||
const seriesWidthClasses = {
|
||||
normal: 'px-2 flex-1',
|
||||
small: 'px-2 flex-0.3',
|
||||
};
|
||||
const seriesBodyClasses = 'border-r border-custom-violetPale';
|
||||
|
||||
return (
|
||||
<>
|
||||
<tr>
|
||||
<td
|
||||
className={classnames('border-0 p-0', {
|
||||
'border-b border-custom-violetPale bg-custom-navyDark': isOpened,
|
||||
})}
|
||||
>
|
||||
<div
|
||||
className={classnames('w-full', {
|
||||
'border border-custom-aquaBright rounded overflow-hidden mb-2': isOpened,
|
||||
})}
|
||||
>
|
||||
<table className={classnames('w-full p-4')}>
|
||||
<tbody>
|
||||
<tr
|
||||
className={classnames(
|
||||
'cursor-pointer hover:bg-custom-violetDark transition duration-300 bg-black',
|
||||
{
|
||||
'bg-custom-navyDark': !isOpened,
|
||||
},
|
||||
{ 'bg-custom-navy': isOpened }
|
||||
)}
|
||||
onClick={toggleRow}
|
||||
>
|
||||
<td className={classnames(...tdClasses)}>
|
||||
<ChevronIcon />
|
||||
</td>
|
||||
<td className={classnames(...tdClasses)}>Patient name</td>
|
||||
<td className={classnames(...tdClasses)}>11000002</td>
|
||||
<td className={classnames(...tdClasses)}>
|
||||
Mar-29-2013 11:26 AM
|
||||
</td>
|
||||
<td className={classnames(...tdClasses)}>
|
||||
PET^1_PETCT_WB_AC (Adult)
|
||||
</td>
|
||||
<td className={classnames(...tdClasses)}>CT/OT/PT</td>
|
||||
<td className={classnames(...tdClasses)}>00000001</td>
|
||||
<td className={classnames(...tdClasses)}>
|
||||
<InstancesIcon className="inline-flex mr-2" />
|
||||
902
|
||||
</td>
|
||||
</tr>
|
||||
{isOpened && (
|
||||
<tr className={classnames('bg-black')}>
|
||||
<td colSpan="8" className="py-4 pl-20 pr-2">
|
||||
<div>
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<LaunchInfo />}
|
||||
className="mr-4"
|
||||
>
|
||||
Basic Viewer
|
||||
</Button>
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<LaunchInfo />}
|
||||
className="mr-4"
|
||||
>
|
||||
Segmentation
|
||||
</Button>
|
||||
<Button
|
||||
rounded="full"
|
||||
variant="outlined"
|
||||
endIcon={<LaunchInfo />}
|
||||
>
|
||||
Module 3
|
||||
</Button>
|
||||
<span className="ml-4 text-lg text-custom-grayBright">
|
||||
{/* ADD ICON HERE */}
|
||||
Feedback text lorem ipsum dolor sit amet
|
||||
</span>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<div className="w-full text-lg">
|
||||
<div className="bg-custom-navy border-b border-custom-violetPale flex">
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.normal)}
|
||||
>
|
||||
Description
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.small)}
|
||||
>
|
||||
Series
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.small)}
|
||||
>
|
||||
Modality
|
||||
</div>
|
||||
<div
|
||||
className={classnames(seriesWidthClasses.normal)}
|
||||
>
|
||||
Instances
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 h-48 overflow-y-scroll ohif-scrollbar">
|
||||
{new Array(30).fill('').map((el, i) => (
|
||||
<div className="w-full flex" key={i}>
|
||||
<div
|
||||
className={classnames(
|
||||
seriesWidthClasses.normal,
|
||||
seriesBodyClasses
|
||||
)}
|
||||
>
|
||||
Patient Protocol
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
seriesWidthClasses.small,
|
||||
seriesBodyClasses
|
||||
)}
|
||||
>
|
||||
#
|
||||
</div>
|
||||
<div
|
||||
className={classnames(
|
||||
seriesWidthClasses.small,
|
||||
seriesBodyClasses
|
||||
)}
|
||||
>
|
||||
CT
|
||||
</div>
|
||||
<div className={classnames('pl-3 flex-1')}>
|
||||
149
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const StudyListTable = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="bg-black">
|
||||
<div className="container m-auto relative">
|
||||
<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>
|
||||
<table className="w-full text-white">
|
||||
<tbody>
|
||||
{new Array(30).fill('').map((empty, i) => (
|
||||
<TableRow key={i} />
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default StudyListTable;
|
||||
2
platform/ui/src/views/StudyList/index.js
Normal file
2
platform/ui/src/views/StudyList/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import StudyList from './StudyList';
|
||||
export default StudyList;
|
||||
3
platform/ui/src/views/index.js
Normal file
3
platform/ui/src/views/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import StudyList from './StudyList';
|
||||
|
||||
export { StudyList };
|
||||
@ -233,6 +233,8 @@ module.exports = {
|
||||
},
|
||||
flex: {
|
||||
'1': '1 1 0%',
|
||||
'0.3': '0.3 0.3 0%',
|
||||
'0.5': '0.5 0.5 0%',
|
||||
auto: '1 1 auto',
|
||||
initial: '0 1 auto',
|
||||
none: 'none',
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const StudyListTable = () => {
|
||||
return <div>{`<- STUDYLIST TABLE CONTENT ->`}</div>;
|
||||
};
|
||||
|
||||
export default StudyListTable;
|
||||
@ -1 +0,0 @@
|
||||
export { default as StudyList } from './StudyList';
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import StudyList from '../components/StudyList/StudyList';
|
||||
import { StudyList } from '@ohif/ui';
|
||||
|
||||
const ConnectedStudyList = () => {
|
||||
return <StudyList />;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user