feat: Viewport Action Bar

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: '',
 };
 

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,

platform/ui/src/components/Icon/icon.mdx

@@ -34,7 +34,7 @@ import { Icon } from '@ohif/ui';
         <React.Fragment key={i}>
           <div className="flex flex-col items-center w-48 py-4">
             <div className="flex items-center justify-center rounded border border-primary-light p-4 m-2 w-20 h-20">
-              <Icon name={name} className="text-primary-light" />
+              <Icon name={name} className="text-primary-light w-6" />
             </div>
             <div className="break-normal text-white">{name}</div>
           </div>

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 (
+        <div className="flex p-1 border-primary-light border rounded relative">
+          <span className="leading-none text-sm font-bold text-primary-light">
+            SR
+          </span>
+          {isLocked && (
+            <Icon
+              name="lock"
+              className="w-3 text-white absolute"
+              style={{ top: -6, right: -6 }}
+            />
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="showTooltipOnHover relative">
+        <Icon
+          name={isTracked ? 'tracked' : 'dotted-circle'}
+          className="text-primary-light w-6"
+        />
+        {isTracked && (
+          <div
+            className={classnames(
+              'tooltip tooltip-top-left absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
+            )}
+          >
+            <div className="flex py-2">
+              <div className="flex pt-1">
+                <Icon name="info-link" className="w-4 text-primary-main" />
+              </div>
+              <div className="flex ml-4">
+                <span className="text-base text-common-light">
+                  Series is{' '}
+                  <span className="text-white font-bold">tracked</span> and can
+                  be viewed <br /> in the measurement panel
+                </span>
+              </div>
+            </div>
+            <svg
+              className="absolute text-primary-dark h-4 left-0 stroke-secondary-main"
+              style={{ top: -15 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
+        )}
+      </div>
+    );
+  };
+  return (
+    <div className="flex items-center m-2 pb-2 border-b border-primary-light">
+      <div className="flex flex-grow">
+        <div className="flex items-center">
+          {renderIconStatus()}
+          <span className="text-large text-white ml-2">A</span>
+        </div>
+        <div className="flex flex-col justify-start ml-4">
+          <div className="flex">
+            <span className="text-base text-white">07-Sep-2010</span>
+            <span className="border-l border-primary-light ml-2 pl-2 text-base text-primary-light">
+              S: 1
+            </span>
+          </div>
+          <div className="flex">
+            <span className="text-base text-primary-light">
+              Series description lorem ipsum dolor sit...
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="ml-2">
+        <ButtonGroup>
+          <Button size="initial" className="py-1 px-2">
+            <Icon name="chevron-left" className="text-white w-4" />
+          </Button>
+          <Button size="initial" className="py-1 px-2">
+            <Icon name="chevron-right" className="text-white w-4" />
+          </Button>
+        </ButtonGroup>
+      </div>
+      <div className="flex ml-4 mr-2">
+        <div className="showTooltipOnHover flex justify-end relative">
+          <div className="relative">
+            <Icon name="profile" className="text-white w-5" />
+            <Icon
+              name="info-link"
+              className="bg-black text-white w-5 absolute"
+              style={{ right: -7, bottom: -10 }}
+            />
+          </div>
+          <div
+            className={classnames(
+              'tooltip tooltip-top-right absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
+            )}
+          >
+            <div className="flex py-2">
+              <div className="flex pt-1">
+                <Icon name="info-link" className="w-4 text-primary-main" />
+              </div>
+              <div className="flex flex-col ml-2">
+                <span className="text-base font-bold text-white">
+                  Smith, Jane
+                </span>
+                <div className="flex mt-4 pb-4 mb-4 border-b border-secondary-main">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>Sex</span>
+                    <span className={classnames(classes.infoText)}>F</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>Age</span>
+                    <span className={classnames(classes.infoText)}>59</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>MRN</span>
+                    <span className={classnames(classes.infoText)}>
+                      10000001
+                    </span>
+                  </div>
+                </div>
+                <div className="flex">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Thickness
+                    </span>
+                    <span className={classnames(classes.infoText)}>5.00mm</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Spacing
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      1.25 mm
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Scanner
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      Aquilion
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <svg
+              className="absolute text-primary-dark h-4 right-0 stroke-secondary-main"
+              style={{ top: -15 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ViewportActionBar.defaultProps = {
+  isLocked: false,
+};
+
+ViewportActionBar.propTypes = {
+  isTracked: PropTypes.bool.isRequired,
+  isLocked: PropTypes.bool,
+  modality: PropTypes.string.isRequired,
+};
+
+export default ViewportActionBar;

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
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={true} modality="CT" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} modality="CT" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} isLocked={false} modality="SR" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} isLocked={true} modality="SR" />
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ViewportActionBar} />

platform/ui/src/components/ViewportActionBar/index.js

@@ -0,0 +1,2 @@
+import ViewportActionBar from './ViewportActionBar';
+export default ViewportActionBar;

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -8,7 +8,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
       <div
         key={index}
         className={classnames(
-          'border rounded-lg border-secondary-light hover:border-primary-light'
+          'border rounded-lg border-secondary-light hover:border-primary-light transition duration-300'
         )}
       >
         {viewportContent}

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={[
-        <div className="flex items-center justify-center h-full text-white">Viewport1</div>,
-        <div className="flex items-center justify-center h-full text-white">Viewport2</div>
+        <div className="flex items-center justify-center h-full text-white">
+          Viewport1
+        </div>,
+        <div className="flex items-center justify-center h-full text-white">
+          Viewport2
+        </div>,
       ]}
     />
   </div>

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,
 };