feat: Measurement Table

platform/ui/index.js

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

platform/ui/src/assets/icons/pencil.svg

@@ -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>

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']),
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'initial']),
-  radius: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
+  rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
   variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
   color: PropTypes.oneOf([
     'default',

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,

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([

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 (
+      <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;

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
+
+<Playground>
+  {() => {
+    return (
+      <div className="p-4">
+        <MeasurementTable />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={MeasurementTable} />

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

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

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"
           >
             <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>

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,

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}
       >
-        <div className="flex justify-center text-white p-2">
+        <MeasurementTable />
-          panel placeholder
-        </div>
       </SidePanel>
     </div>
   </div>

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'],