Small style fixes and implementation of toolbars on viewer docz page

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -77,7 +77,7 @@ const SidePanel = ({
             onClick={() => {
               setIsOpen(false);
             }}
-            className="flex flex-row items-center border-b-2 border-secondary-main border-secondary-light px-3 h-12 relative"
+            className="flex flex-row items-center border-b border-secondary-light px-3 h-12 relative"
           >
             <Icon
               name={openIconName[side]}
@@ -100,7 +100,7 @@ const SidePanel = ({
               minWidth: `${collapsedWidth}px`,
               width: `${collapsedWidth}px`,
             }}
-            className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b-2"
+            className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b"
           >
             <Icon name={iconName} className="text-primary-active" />
             <span className="mt-2 text-white text-xs">{iconLabel}</span>

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -20,7 +20,7 @@ const StudyBrowser = () => {
 
   return (
     <React.Fragment>
-      <div className="flex flex-row items-center justify-center border-b-2 w-100 h-16 border-secondary-light p-4 bg-primary-dark">
+      <div className="flex flex-row items-center justify-center border-b w-100 h-16 border-secondary-light p-4 bg-primary-dark">
         <ButtonGroup
           variant="outlined"
           color="inherit"

platform/ui/src/views/Viewer/Viewer.js

@@ -1,14 +1,13 @@
 import React from 'react';
-import { NavBar, SidePanel, Svg, StudyBrowser } from '@ohif/ui';
+import { SidePanel, StudyBrowser } from '@ohif/ui';
+
+import Header from './components/Header';
+import ViewportToolbar from './components/ViewportToolBar';
 
 const Viewer = () => {
   return (
     <div>
-      <NavBar className="justify-start">
+      <Header />
-        <div className="m-3">
-          <Svg name="logo-ohif" />
-        </div>
-      </NavBar>
       <div
         className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
         style={{ height: 'calc(100vh - 57px' }}
@@ -23,7 +22,8 @@ const Viewer = () => {
           <StudyBrowser />
         </SidePanel>
         <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-          CONTENT
+          <ViewportToolbar />
+          <div>CONTENT</div>
         </div>
         <SidePanel
           side="right"

platform/ui/src/views/Viewer/Viewer.mdx

@@ -20,6 +20,9 @@ import {
   ViewportGrid,
 } from '@ohif/ui';
 
+import Header from './components/Header';
+import ViewportToolbar from './components/ViewportToolBar';
+
 # Viewer
 
 <Playground>
@@ -36,11 +39,7 @@ import {
     };
     return (
       <div>
-        <NavBar className="justify-start">
+        <Header />
-          <div className="m-3">
-            <Svg name="logo-ohif" />
-          </div>
-        </NavBar>
         <div
           className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
           style={{ height: 'calc(100vh - 57px' }}
@@ -54,19 +53,11 @@ import {
           >
             <StudyBrowser />
           </SidePanel>
-          <div className="flex flex-1 h-100 overflow-hidden bg-black items-center justify-center text-white">
+          <div className="flex flex-col flex-1 h-100">
-            <ViewportGrid
+            <div className="flex flex-2 w-100 border-b border-transparent h-12">
-              rows={1}
+              <ViewportToolbar />
-              cols={2}
+            </div>
-              viewportContents={[
+            <div className="flex flex-1 items-center justify-center bg-black text-white border rounded-lg border-secondary-light h-100 overflow-hidden">CONTENT</div>
-                <div className="flex flex-col h-full">
-                  <ViewportActionBar isTracked modality="CT" />
-                </div>,
-                <div className="flex flex-col h-full">
-                  <ViewportActionBar isTracked={false} modality="CT" />
-                </div>,
-              ]}
-            />
           </div>
           <SidePanel
             side="right"

platform/ui/src/views/Viewer/components/Header.js

@@ -0,0 +1,146 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
+
+const Header = () => {
+  const [activeTool, setActiveTool] = useState(null);
+  const [showTooltip, setShowTooltip] = useState(null);
+  const tools = [
+    {
+      id: 'Zoom',
+      label: 'Zoom',
+      icon: 'tool-zoom',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Zoom' },
+    },
+    {
+      id: 'Wwwc',
+      label: 'Levels',
+      icon: 'tool-window-level',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Wwwc' },
+    },
+    {
+      id: 'Pan',
+      label: 'Pan',
+      icon: 'tool-move',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Pan' },
+    },
+    {
+      id: 'Capture',
+      label: 'Capture',
+      icon: 'tool-capture',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Capture' },
+    },
+    {
+      id: 'Layout',
+      label: 'Layout',
+      icon: 'tool-layout',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Layout' },
+    },
+  ];
+  const renderToolbar = () => {
+    return tools.map((tool, i) => {
+      const isActive = activeTool === tool.id;
+      const shouldShowTooltip = showTooltip === tool.id;
+      return (
+        <div className="relative flex justify-center" key={tool.id}>
+          <IconButton
+            variant={isActive ? 'contained' : 'text'}
+            className={classnames('mx-1', {
+              'text-black': isActive,
+              'text-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
+            })}
+            onClick={(e) => {
+              setActiveTool(tool.id);
+            }}
+            onMouseOver={() => setShowTooltip(tool.id)}
+            onMouseOut={() => setShowTooltip(null)}
+            key={tool.id}
+          >
+            <Icon name={tool.icon} />
+          </IconButton>
+          {shouldShowTooltip && (
+            <div
+              className={classnames(
+                'tooltip tooltip-up 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'
+              )}
+            >
+              {tool.label}
+              <svg
+                className="absolute text-primary-dark w-full 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 (
+    <NavBar className="justify-between border-b-4 border-black">
+      <div className="flex flex-1 justify-between">
+        <div className="flex items-center">
+          <div className="mr-3 inline-flex items-center">
+            <Icon
+              name="chevron-left"
+              className="text-primary-active w-8 cursor-pointer"
+              onClick={() => alert('Navigate to previous page')}
+            />
+            <a href="#" className="ml-4">
+              <Svg name="logo-ohif" />
+            </a>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <div className="flex items-center">
+            {renderToolbar()}
+            <span className="w-1 border-l py-4 mx-2 border-common-dark" />
+            <IconButton
+              className={classnames(
+                'mx-1 text-common-bright hover:bg-primary-dark hover:text-primary-light'
+              )}
+              color="inherit"
+              onClick={(e) => {
+                alert('Open menu');
+              }}
+            >
+              <Icon name="tool-more-menu" />
+            </IconButton>
+          </div>
+        </div>
+        <div className="flex items-center">
+          <span className="mr-3 text-common-light text-lg">
+            FOR INVESTIGATIONAL USE ONLY
+          </span>
+          <IconButton
+            variant="text"
+            color="inherit"
+            className="text-primary-active"
+            onClick={() => {}}
+          >
+            <React.Fragment>
+              <Icon name="settings" /> <Icon name="chevron-down" />
+            </React.Fragment>
+          </IconButton>
+        </div>
+      </div>
+    </NavBar>
+  );
+};
+
+export default Header;

platform/ui/src/views/Viewer/components/ViewportToolBar.js

@@ -0,0 +1,97 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+
+import { Icon, IconButton } from '@ohif/ui';
+
+const ViewportToolbar = () => {
+  const [activeTool, setActiveTool] = useState(null);
+  const [showTooltip, setShowTooltip] = useState(null);
+  const tools = [
+    {
+      id: 'Annotate',
+      label: 'Annotate',
+      icon: 'tool-annotate',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Annotate' },
+    },
+    {
+      id: 'Bidirectional',
+      label: 'Bidirectional',
+      icon: 'tool-bidirectional',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Bidirectional' },
+    },
+    {
+      id: 'Elipse',
+      label: 'Elipse',
+      icon: 'tool-elipse',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Elipse' },
+    },
+    {
+      id: 'Length',
+      label: 'Length',
+      icon: 'tool-length',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Length' },
+    },
+  ];
+  const renderToolbar = () => {
+    return tools.map((tool, i) => {
+      const isActive = activeTool === tool.id;
+      const shouldShowTooltip = showTooltip === tool.id;
+      return (
+        <div className="relative flex justify-center" key={tool.id}>
+          <IconButton
+            variant={isActive ? 'contained' : 'text'}
+            className={classnames('mx-1', {
+              'text-black': isActive,
+              'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white': !isActive,
+            })}
+            onClick={(e) => {
+              setActiveTool(tool.id);
+            }}
+            onMouseOver={() => setShowTooltip(tool.id)}
+            onMouseOut={() => setShowTooltip(null)}
+          >
+            <Icon name={tool.icon} />
+          </IconButton>
+          {shouldShowTooltip && (
+            <div
+              className={classnames(
+                'tooltip 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'
+              )}
+            >
+              {tool.label}
+              <svg
+                className="absolute text-primary-dark w-full 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={classnames(
+        'flex w-full items-center bg-primary-dark px-3 py-2'
+      )}
+    >
+      <div className="flex items-center">{renderToolbar()}</div>
+    </div>
+  );
+};
+
+export default ViewportToolbar;