diff --git a/platform/ui/index.js b/platform/ui/index.js index 089356cc1..c3ecf8ce2 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -25,6 +25,7 @@ export { InputMultiSelect, InputText, Label, + MeasurementTable, NavBar, Select, SidePanel, diff --git a/platform/ui/src/assets/icons/pencil.svg b/platform/ui/src/assets/icons/pencil.svg new file mode 100644 index 000000000..1f76dcd3b --- /dev/null +++ b/platform/ui/src/assets/icons/pencil.svg @@ -0,0 +1,3 @@ + + + diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx index 314ca1b9a..e81312f02 100644 --- a/platform/ui/src/components/Button/Button.jsx +++ b/platform/ui/src/components/Button/Button.jsx @@ -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', diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index b471912d4..856e54236 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/platform/ui/src/components/Icon/getIcon.jsx @@ -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, diff --git a/platform/ui/src/components/IconButton/IconButton.jsx b/platform/ui/src/components/IconButton/IconButton.jsx index 7dc59f71b..475e61620 100644 --- a/platform/ui/src/components/IconButton/IconButton.jsx +++ b/platform/ui/src/components/IconButton/IconButton.jsx @@ -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([ diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx new file mode 100644 index 000000000..ad90cced0 --- /dev/null +++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.jsx @@ -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 ( +
+
+ + {title} + + {amount} +
+ {/* MEASUREMENT ITEMS */} +
+ {!!data.length && + data.map((e, i) => { + const itemKey = i; + const currentItem = i + 1; + const isActive = !!activeItem && activeItem[title] === i; + return ( +
{ + setActiveItem((s) => { + return { + ...s, + [title]: s && s[title] === itemKey ? null : itemKey, + }; + }); + }} + > +
+ {currentItem} +
+
+ + Label short description + + + 24.0 x 24.0 mm (S:4, I:22) + + { + // stopPropagation needed to avoid disable the current active item + e.stopPropagation(); + alert('Edit'); + }} + /> +
+
+ ); + })} +
+
+ ); + }; + + return ( +
+ {/* HEADER */} +
+
+ 07-Sep-2010 + + CT + +
+
+ + CHEST/ABD/PELVIS W CONTRAST + +
+
+ {/* TABLE */} + {renderTable('Measurements', 5, tableData)} + {renderTable('ADDITIONAL FINDINGS', 5, tableData)} + + {/* BUTTONS */} +
+ alert('Export')}> + + + + + + +
+
+ ); +}; + +export default MeasurementTable; diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx b/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx new file mode 100644 index 000000000..ba62387c6 --- /dev/null +++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.mdx @@ -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 + + + {() => { + return ( +
+ +
+ ); + }} + + +## Properties + + diff --git a/platform/ui/src/components/MeasurementTable/index.js b/platform/ui/src/components/MeasurementTable/index.js new file mode 100644 index 000000000..87c8be7e6 --- /dev/null +++ b/platform/ui/src/components/MeasurementTable/index.js @@ -0,0 +1,3 @@ +import MeasurementTable from './MeasurementTable'; + +export default MeasurementTable; diff --git a/platform/ui/src/components/SidePanel/SidePanel.jsx b/platform/ui/src/components/SidePanel/SidePanel.jsx index fab642d11..2144bcf1e 100644 --- a/platform/ui/src/components/SidePanel/SidePanel.jsx +++ b/platform/ui/src/components/SidePanel/SidePanel.jsx @@ -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" > {componentLabel} diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index d12f7389d..27fbd9c27 100644 --- a/platform/ui/src/components/index.js +++ b/platform/ui/src/components/index.js @@ -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, diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx index 56eec6308..1890df091 100644 --- a/platform/ui/src/views/Viewer/Viewer.mdx +++ b/platform/ui/src/views/Viewer/Viewer.mdx @@ -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} > -
- panel placeholder -
+ diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js index 8589e0301..455bb41dd 100644 --- a/platform/ui/tailwind.config.js +++ b/platform/ui/tailwind.config.js @@ -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'],