feat: Secondary Toolbar

platform/ui/src/assets/icons/tool-annotate.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+        <path d="M8.593 20.252L0 20.252 0 11.659M0 20.252L19.642.61" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-bidirectional.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
+        <g stroke-linecap="square" stroke-linejoin="round" stroke-width="2">
+            <path d="M0.067 14.79L14 1" transform="translate(5 4)"/>
+            <path d="M2.16 3.908L11.899 12.138" transform="translate(5 4) rotate(4.465 7.03 8.023)"/>
+        </g>
+        <rect width="5" height="5" x="3" y="3" stroke-width="1.5" rx="2.5"/>
+        <rect width="5" height="5" x="16" y="16" stroke-width="1.5" rx="2.5"/>
+        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
+        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-elipse.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
+        <ellipse cx="10.5" cy="7" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-length.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
+        <path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M5 18.79L19.436 4.353"/>
+        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
+        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
+    </g>
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -29,6 +29,10 @@ import toolLayout from './../../assets/icons/tool-layout.svg';
 import toolMore from './../../assets/icons/tool-more-menu.svg';
 import toolMove from './../../assets/icons/tool-move.svg';
 import toolWindow from './../../assets/icons/tool-window-level.svg';
+import toolAnnotate from './../../assets/icons/tool-annotate.svg';
+import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
+import toolElipse from './../../assets/icons/tool-elipse.svg';
+import toolLength from './../../assets/icons/tool-length.svg';
 
 const ICONS = {
   'arrow-down': arrowDown,
@@ -59,6 +63,10 @@ const ICONS = {
   'tool-more-menu': toolMore,
   'tool-move': toolMove,
   'tool-window-level': toolWindow,
+  'tool-annotate': toolAnnotate,
+  'tool-bidirectional': toolBidirectional,
+  'tool-elipse': toolElipse,
+  'tool-length': toolLength,
 };
 
 /**

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

@@ -68,7 +68,7 @@ const SidePanel = ({
             onClick={() => {
               setIsOpen(false);
             }}
-            className="flex flex-row items-center border-b-2 w-100 border-secondary-main h-12"
+            className="flex flex-row items-center border-b-2 border-secondary-main h-12"
           >
             <Icon
               name={openIconName[side]}

platform/ui/src/components/SidePanel/SidePanel.mdx

@@ -18,7 +18,10 @@ import { SidePanel } from '@ohif/ui';
 ## Basic usage
 
 <Playground>
-  <div className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" style={{height: '500px'}}>
+  <div
+    className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+    style={{ height: '500px' }}
+  >
     <SidePanel
       side="left"
       iconName="group-layers"
@@ -28,7 +31,7 @@ import { SidePanel } from '@ohif/ui';
     >
       <div className="flex justify-center text-white p-2">panel content</div>
     </SidePanel>
-    <div className="flex flex-1 h-100 overflow-hidden w-100 bg-primary-main items-center justify-center text-white">
+    <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
       CONTENT
     </div>
   </div>

platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js

@@ -5,7 +5,6 @@ import { useCurrentDoc } from 'docz';
 
 import * as styles from 'gatsby-theme-docz/src/components/NavGroup/styles';
 import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
-import { NavGroup as DoczNavGroup } from 'gatsby-theme-docz/src/components/NavGroup';
 import { ChevronDown } from 'gatsby-theme-docz/src/components/Icons';
 
 export const NavGroup = ({ item, sidebarRef }) => {

platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx

@@ -11,7 +11,7 @@ import { NavBar, Typography, Svg, Icon, IconButton } from '@ohif/ui';
 
 # Toolbar Header
 
-This example shows you how you can build a Study List page using the available
+This example shows you how you can build a Toolbar using the available
 components.
 
 ## Basic usage

platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx

@@ -0,0 +1,112 @@
+---
+name: Toolbar Secondary
+menu: Views
+route: examples/toolbarSecondary
+---
+
+import { useState } from 'react';
+import { Playground } from 'docz';
+import classnames from 'classnames';
+import { Icon, IconButton } from '@ohif/ui';
+
+# Toolbar Header
+
+This example shows you how you can build a Toolbar using the available
+components.
+
+## Basic usage
+
+<Playground>
+  {() => {
+    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-primary-dark hover:text-white focus:bg-primary-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="p-10">
+        <div
+          className={classnames(
+            'flex w-full items-center bg-secondary-dark px-3 py-2'
+          )}
+        >
+          <div className="flex items-center">{renderToolbar()}</div>
+        </div>
+      </div>
+    );
+  }}
+</Playground>

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

@@ -24,7 +24,7 @@ const Viewer = () => {
             panel placeholder
           </div>
         </SidePanel>
-        <div className="flex flex-1 h-100 overflow-hidden w-100 bg-primary-main items-center justify-center text-white">
+        <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
           CONTENT
         </div>
         <SidePanel

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

@@ -31,7 +31,7 @@ import { NavBar, SidePanel, Svg } from '@ohif/ui';
           panel placeholder
         </div>
       </SidePanel>
-      <div className="flex flex-1 h-100 overflow-hidden w-100 bg-primary-main items-center justify-center text-white">
+      <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
         CONTENT
       </div>
       <SidePanel