From 6434c0f1123b9201f8643772edd890f25bd12b0e Mon Sep 17 00:00:00 2001 From: Rodrigo Antinarelli Date: Mon, 13 Apr 2020 13:48:45 -0300 Subject: [PATCH] feat: Viewport Action Bar --- platform/ui/index.js | 1 + platform/ui/src/assets/icons/lock.svg | 1 + platform/ui/src/assets/icons/profile.svg | 1 + platform/ui/src/assets/styles/styles.css | 18 ++ platform/ui/src/components/Button/Button.jsx | 8 +- platform/ui/src/components/Icon/getIcon.jsx | 4 + platform/ui/src/components/Icon/icon.mdx | 2 +- .../ViewportActionBar/ViewportActionBar.jsx | 194 ++++++++++++++++++ .../ViewportActionBar/ViewportActionBar.mdx | 48 +++++ .../src/components/ViewportActionBar/index.js | 2 + .../components/ViewportGrid/ViewportGrid.jsx | 2 +- .../components/ViewportGrid/ViewportGrid.mdx | 10 +- platform/ui/src/components/index.js | 2 + platform/ui/src/views/Viewer/Viewer.mdx | 134 ++++++++++-- 14 files changed, 396 insertions(+), 31 deletions(-) create mode 100644 platform/ui/src/assets/icons/lock.svg create mode 100644 platform/ui/src/assets/icons/profile.svg create mode 100644 platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx create mode 100644 platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx create mode 100644 platform/ui/src/components/ViewportActionBar/index.js diff --git a/platform/ui/index.js b/platform/ui/index.js index 67d7bdc80..70c105683 100644 --- a/platform/ui/index.js +++ b/platform/ui/index.js @@ -47,6 +47,7 @@ export { ThumbnailSR, ThumbnailList, Typography, + ViewportActionBar, ViewportGrid, } from './src/components'; diff --git a/platform/ui/src/assets/icons/lock.svg b/platform/ui/src/assets/icons/lock.svg new file mode 100644 index 000000000..e3eaf48b6 --- /dev/null +++ b/platform/ui/src/assets/icons/lock.svg @@ -0,0 +1 @@ + diff --git a/platform/ui/src/assets/icons/profile.svg b/platform/ui/src/assets/icons/profile.svg new file mode 100644 index 000000000..6d07ec81e --- /dev/null +++ b/platform/ui/src/assets/icons/profile.svg @@ -0,0 +1 @@ + diff --git a/platform/ui/src/assets/styles/styles.css b/platform/ui/src/assets/styles/styles.css index 6d6899ef2..8d3818264 100644 --- a/platform/ui/src/assets/styles/styles.css +++ b/platform/ui/src/assets/styles/styles.css @@ -45,6 +45,24 @@ transform: translateY(-50%); } +.tooltip.tooltip-top-right::before { + @apply bg-primary-dark absolute z-10; + content: ''; + width: 15px; + height: 2px; + right: 5px; + top: -1px; +} + +.tooltip.tooltip-top-left::before { + @apply bg-primary-dark absolute z-10; + content: ''; + width: 15px; + height: 2px; + left: 5px; + top: -1px; +} + /* TOOLTIP WORKAROUND FOR ARROW */ .showTooltipOnHover .tooltip { display: none; diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx index e81312f02..a5b25e2d7 100644 --- a/platform/ui/src/components/Button/Button.jsx +++ b/platform/ui/src/components/Button/Button.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; const baseClasses = - 'min-w-md leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none'; + 'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none'; const defaults = { variant: 'contained', @@ -61,9 +61,9 @@ const variantClasses = { }; const sizeClasses = { - small: 'py-2 px-2 text-sm', - medium: 'py-2 px-2 text-lg', - large: 'py-2 px-6 text-xl', + small: 'py-2 px-2 text-sm min-w-md', + medium: 'py-2 px-2 text-lg min-w-md', + large: 'py-2 px-6 text-xl min-w-md', initial: '', }; diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index 44b8c90e4..145539060 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/platform/ui/src/components/Icon/getIcon.jsx @@ -17,10 +17,12 @@ import infoLink from './../../assets/icons/info-link.svg'; import launchArrow from './../../assets/icons/launch-arrow.svg'; import launchInfo from './../../assets/icons/launch-info.svg'; import listBullets from './../../assets/icons/list-bullets.svg'; +import lock from './../../assets/icons/lock.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 profile from './../../assets/icons/profile.svg'; import pushLeft from './../../assets/icons/push-left.svg'; import pushRight from './../../assets/icons/push-right.svg'; import settings from './../../assets/icons/settings.svg'; @@ -58,10 +60,12 @@ const ICONS = { 'launch-arrow': launchArrow, 'launch-info': launchInfo, 'list-bullets': listBullets, + lock: lock, 'logo-ohif-small': logoOhifSmall, magnifier: magnifier, 'notificationwarning-diamond': notificationwarningDiamond, pencil: pencil, + profile: profile, 'push-left': pushLeft, 'push-right': pushRight, settings: settings, diff --git a/platform/ui/src/components/Icon/icon.mdx b/platform/ui/src/components/Icon/icon.mdx index 13eb3e201..9fc382b77 100644 --- a/platform/ui/src/components/Icon/icon.mdx +++ b/platform/ui/src/components/Icon/icon.mdx @@ -34,7 +34,7 @@ import { Icon } from '@ohif/ui';
- +
{name}
diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx new file mode 100644 index 000000000..83c824755 --- /dev/null +++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx @@ -0,0 +1,194 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import { Icon, ButtonGroup, Button } from '@ohif/ui'; + +const classes = { + infoHeader: 'text-base text-primary-light', + infoText: 'text-base text-white', + firstRow: 'flex flex-col', + row: 'flex flex-col ml-4', +}; + +const ViewportActionBar = ({ isTracked, isLocked, modality }) => { + const renderIconStatus = () => { + if (modality === 'SR') { + return ( +
+ + SR + + {isLocked && ( + + )} +
+ ); + } + + return ( +
+ + {isTracked && ( +
+
+
+ +
+
+ + Series is{' '} + tracked and can + be viewed
in the measurement panel + +
+
+ + + +
+ )} +
+ ); + }; + return ( +
+
+
+ {renderIconStatus()} + A +
+
+
+ 07-Sep-2010 + + S: 1 + +
+
+ + Series description lorem ipsum dolor sit... + +
+
+
+
+ + + + +
+
+
+
+ + +
+
+
+
+ +
+
+ + Smith, Jane + +
+
+ Sex + F +
+
+ Age + 59 +
+
+ MRN + + 10000001 + +
+
+
+
+ + Thickness + + 5.00mm +
+
+ + Spacing + + + 1.25 mm + +
+
+ + Scanner + + + Aquilion + +
+
+
+
+ + + +
+
+
+
+ ); +}; + +ViewportActionBar.defaultProps = { + isLocked: false, +}; + +ViewportActionBar.propTypes = { + isTracked: PropTypes.bool.isRequired, + isLocked: PropTypes.bool, + modality: PropTypes.string.isRequired, +}; + +export default ViewportActionBar; diff --git a/platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx new file mode 100644 index 000000000..545f82303 --- /dev/null +++ b/platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx @@ -0,0 +1,48 @@ +--- +name: Viewport Action Bar +menu: Data Display +route: components/viewportActionBar +--- + +import { Playground, Props } from 'docz'; +import { ViewportActionBar } from '@ohif/ui'; + +# Viewport Action Bar + +Used to display an Action Bar in the viewer. + +## Import + +```javascript +import { ViewportActionBar } from '@ohif/ui'; +``` + +## Basic usage + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +## Properties + + diff --git a/platform/ui/src/components/ViewportActionBar/index.js b/platform/ui/src/components/ViewportActionBar/index.js new file mode 100644 index 000000000..a1d04f786 --- /dev/null +++ b/platform/ui/src/components/ViewportActionBar/index.js @@ -0,0 +1,2 @@ +import ViewportActionBar from './ViewportActionBar'; +export default ViewportActionBar; diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx index 75d5fad8d..38af259d3 100644 --- a/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx +++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.jsx @@ -8,7 +8,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
{viewportContent} diff --git a/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx b/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx index 51789d388..0ff396014 100644 --- a/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx +++ b/platform/ui/src/components/ViewportGrid/ViewportGrid.mdx @@ -9,7 +9,7 @@ import { ViewportGrid } from '@ohif/ui'; # ViewportGrid -Used display viewports in the viewer page +Used to display viewports in the viewer page. ## Import @@ -25,8 +25,12 @@ import { ViewportGrid } from '@ohif/ui'; rows={1} cols={2} viewportContents={[ -
Viewport1
, -
Viewport2
+
+ Viewport1 +
, +
+ Viewport2 +
, ]} />
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js index 6199bc9ca..acce04bfe 100644 --- a/platform/ui/src/components/index.js +++ b/platform/ui/src/components/index.js @@ -33,6 +33,7 @@ import Thumbnail from './Thumbnail'; import ThumbnailSR from './ThumbnailSR'; import ThumbnailList from './ThumbnailList'; import Typography from './Typography'; +import ViewportActionBar from './ViewportActionBar'; import ViewportGrid from './ViewportGrid'; export { @@ -71,5 +72,6 @@ export { ThumbnailSR, ThumbnailList, Typography, + ViewportActionBar, ViewportGrid, }; diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx index f6b28b637..80f91c188 100644 --- a/platform/ui/src/views/Viewer/Viewer.mdx +++ b/platform/ui/src/views/Viewer/Viewer.mdx @@ -5,32 +5,122 @@ route: examples/viewer --- import { Playground, Props } from 'docz'; -import { NavBar, SidePanel, Svg, StudyBrowser } from '@ohif/ui'; +import { + NavBar, + SidePanel, + Svg, + MeasurementTable, + SegmentationTable, + ButtonGroup, + Button, + Icon, + IconButton, + StudyBrowser, + ViewportActionBar, + ViewportGrid, +} from '@ohif/ui'; # Viewer -
- -
- -
- -
- - - -
- CONTENT + {() => { + const measurementTableData = { + title: 'Measurements', + amount: 10, + data: new Array(10).fill(''), + }; + const segmentationTableData = { + title: 'Segments', + amount: 12, + data: new Array(12).fill(''), + }; + return ( +
+ +
+ +
+ +
+ + + +
+ + +
, +
+ +
, + ]} + /> +
+ +
+
+
+ 07-Sep-2010 + + CT + +
+
+ + CHEST/ABD/PELVIS W CONTRAST + +
+
+ + +
+
+ alert('Export')}> + + + + + + +
+ +
); }}