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

feat: Measurement Table

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-09 20:31:21 -03:00 committed by James A. Petts
parent 4c09467672
commit b9da65ed9e
12 changed files with 206 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/ui/index.js
View File

@ -25,6 +25,7 @@ export {
InputMultiSelect,
InputText,
Label,
MeasurementTable,
NavBar,
Select,
SidePanel,

3
platform/ui/src/assets/icons/pencil.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor" d="M1.439 16.873l-1.439 7.127 7.128-1.437 16.873-16.872-5.69-5.69-16.872 16.872zm4.702 3.848l-3.582.724.721-3.584 2.861 2.86zm15.031-15.032l-13.617 13.618-2.86-2.861 10.825-10.826 2.846 2.846 1.414-1.414-2.846-2.846 1.377-1.377 2.861 2.86z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 339 B

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

@ -64,6 +64,7 @@ const sizeClasses = {
small: 'py-2 px-2 text-sm',
medium: 'py-2 px-2 text-lg',
large: 'py-2 px-6 text-xl',
initial: '',
};
const fullWidthClasses = {
@ -122,8 +123,8 @@ const Button = ({
Button.propTypes = {
children: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium', 'large']),
radius: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial']),
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
color: PropTypes.oneOf([
'default',

2
platform/ui/src/components/Icon/getIcon.jsx
View File

@ -15,6 +15,7 @@ import listBullets from './../../assets/icons/list-bullets.svg';
import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
import magnifier from './../../assets/icons/magnifier.svg';
import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
import pencil from './../../assets/icons/pencil.svg';
import pushLeft from './../../assets/icons/push-left.svg';
import pushRight from './../../assets/icons/push-right.svg';
import settings from './../../assets/icons/settings.svg';
@ -49,6 +50,7 @@ const ICONS = {
'logo-ohif-small': logoOhifSmall,
magnifier: magnifier,
'notificationwarning-diamond': notificationwarningDiamond,
pencil: pencil,
'push-left': pushLeft,
'push-right': pushRight,
settings: settings,

3
platform/ui/src/components/IconButton/IconButton.jsx
View File

@ -55,6 +55,7 @@ const sizeClasses = {
small: 'py-2 px-2 text-base',
medium: 'py-3 px-3 text-lg',
large: 'py-4 px-4 text-xl',
initial: '',
};
const iconSizeClasses = {
@ -124,7 +125,7 @@ IconButton.defaultProps = {
IconButton.propTypes = {
children: PropTypes.node.isRequired,
size: PropTypes.oneOf(['small', 'medium', 'large']),
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial']),
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
color: PropTypes.oneOf([

141
platform/ui/src/components/MeasurementTable/MeasurementTable.jsx Normal file
View File

@ -0,0 +1,141 @@
import React, { useState } from 'react';
import classnames from 'classnames';
import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
const MeasurementTable = () => {
const tableData = new Array(5).fill('');
const [activeItem, setActiveItem] = useState(null);
const renderTable = (title, amount, data) => {
return (
<div>
<div className="flex justify-between px-2 py-1 bg-secondary-main">
<span className="text-base font-bold text-white tracking-widest uppercase">
{title}
</span>
<span className="text-base font-bold text-white">{amount}</span>
</div>
{/* MEASUREMENT ITEMS */}
<div>
{!!data.length &&
data.map((e, i) => {
const itemKey = i;
const currentItem = i + 1;
const isActive = !!activeItem && activeItem[title] === i;
return (
<div
key={i}
className={classnames(
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
{
'border-primary-light': isActive,
}
)}
onClick={() => {
setActiveItem((s) => {
return {
...s,
[title]: s && s[title] === itemKey ? null : itemKey,
};
});
}}
>
<div
className={classnames(
'p-2 text-base transition duration-300',
{
'bg-primary-light text-black': isActive,
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
}
)}
>
{currentItem}
</div>
<div className="px-2 py-1 flex flex-1 flex-col relative">
<span className="text-base text-primary-light mb-1">
Label short description
</span>
<span className="pl-2 border-l border-primary-light text-base text-white">
24.0 x 24.0 mm (S:4, I:22)
</span>
<Icon
className={classnames(
'text-white w-4 absolute cursor-pointer transition duration-300',
{
'invisible opacity-0 mr-2': !isActive,
}
)}
name="pencil"
style={{
top: 4,
right: 4,
transform: isActive ? '' : 'translateX(100%)',
}}
onClick={(e) => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
alert('Edit');
}}
/>
</div>
</div>
);
})}
</div>
</div>
);
};
return (
<div>
{/* HEADER */}
<div className="p-2">
<div className="leading-none">
<span className="text-white text-base mr-2">07-Sep-2010</span>
<span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
CT
</span>
</div>
<div className="leading-none">
<span className="text-base text-primary-light">
CHEST/ABD/PELVIS W CONTRAST
</span>
</div>
</div>
{/* TABLE */}
{renderTable('Measurements', 5, tableData)}
{renderTable('ADDITIONAL FINDINGS', 5, tableData)}
{/* BUTTONS */}
<div className="mt-4 flex justify-center">
<ButtonGroup onClick={() => alert('Export')}>
<Button
className="text-white border-primary-main bg-black text-base py-2 px-2"
size="initial"
color="inherit"
>
Export
</Button>
<IconButton
className="bg-black border-primary-main px-2 text-white px-2"
color="inherit"
size="initial"
>
<Icon name="arrow-down" />
</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>
</div>
</div>
);
};
export default MeasurementTable;

32
platform/ui/src/components/MeasurementTable/MeasurementTable.mdx Normal file
View File

@ -0,0 +1,32 @@
---
name: Measurement Table
menu: Data Display
route: components/measurementTable
---
import { Playground, Props } from 'docz';
import { MeasurementTable } from '@ohif/ui';
# Measurement Table
## Import
```javascript
import { MeasurementTable } from '@ohif/ui';
```
## Basic usage
<Playground>
{() => {
return (
<div className="p-4">
<MeasurementTable />
</div>
);
}}
</Playground>
## Properties
<Props of={MeasurementTable} />

3
platform/ui/src/components/MeasurementTable/index.js Normal file
View File

@ -0,0 +1,3 @@
import MeasurementTable from './MeasurementTable';
export default MeasurementTable;

14
platform/ui/src/components/SidePanel/SidePanel.jsx
View File

@ -44,6 +44,15 @@ const openIconName = {
right: 'push-right',
};
const position = {
left: {
right: 5,
},
right: {
left: 5,
},
};
const SidePanel = ({
side,
className,
@ -68,14 +77,15 @@ const SidePanel = ({
onClick={() => {
setIsOpen(false);
}}
className="flex flex-row items-center border-b-2 border-secondary-main h-12"
className="flex flex-row items-center border-b-2 border-secondary-main h-12 relative"
>
<Icon
name={openIconName[side]}
className={classnames(
'text-primary-active',
'text-primary-active absolute',
side === 'left' && 'order-last'
)}
style={{ ...position[side] }}
/>
<span className="flex-1 text-primary-active">{componentLabel}</span>
</Button>

2
platform/ui/src/components/index.js
View File

@ -11,6 +11,7 @@ import InputLabelWrapper from './InputLabelWrapper';
import InputMultiSelect from './InputMultiSelect';
import InputText from './InputText';
import Label from './Label';
import MeasurementTable from './MeasurementTable';
import NavBar from './NavBar';
import Select from './Select';
import SidePanel from './SidePanel';
@ -40,6 +41,7 @@ export {
InputMultiSelect,
InputText,
Label,
MeasurementTable,
NavBar,
Select,
SidePanel,

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

@ -5,7 +5,7 @@ route: examples/viewer
---
import { Playground, Props } from 'docz';
import { NavBar, SidePanel, Svg } from '@ohif/ui';
import { NavBar, SidePanel, Svg, MeasurementTable } from '@ohif/ui';
# Viewer
@ -39,11 +39,9 @@ import { NavBar, SidePanel, Svg } from '@ohif/ui';
iconName="list-bullets"
iconLabel="Measure"
componentLabel="Measurements"
defaultIsOpen={false}
defaultIsOpen={true}
>
<div className="flex justify-center text-white p-2">
panel placeholder
</div>
<MeasurementTable />
</SidePanel>
</div>
</div>

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

@ -695,7 +695,7 @@ module.exports = {
alignSelf: ['responsive'],
appearance: ['responsive'],
backgroundAttachment: ['responsive'],
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
backgroundColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
backgroundPosition: ['responsive'],
backgroundRepeat: ['responsive'],
backgroundSize: ['responsive'],
@ -748,7 +748,7 @@ module.exports = {
strokeWidth: ['responsive'],
tableLayout: ['responsive'],
textAlign: ['responsive'],
textColor: ['responsive', 'hover', 'focus', 'active'],
textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
textDecoration: ['responsive', 'hover', 'focus'],
textTransform: ['responsive'],
userSelect: ['responsive'],