remove "Toolbar" and ViewportToolbar from @ohif/ui

Unecessary wrappers for displaying ToolbarButtons

platform/ui/index.js

@@ -67,7 +67,6 @@ export {
   ThumbnailNoImage,
   ThumbnailTracked,
   ThumbnailList,
-  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,

platform/ui/src/components/Toolbar/Toolbar.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import { ToolbarButton, IconButton, Icon, Tooltip } from '@ohif/ui';
-
-const classes = {
-  type: {
-    primary: '',
-    secondary: 'w-full items-center bg-primary-dark px-3',
-  },
-};
-
-const Toolbar = ({ activeTool, tools, moreTools, type }) => {
-  return (
-    <div className={classnames('flex', classes.type[type])}>
-      {tools.map((tool) => {
-        const { id, onClick, icon, label, dropdownContent } = tool;
-        const isActive = activeTool === tool.id;
-        return (
-          <div className="relative flex justify-center" key={tool.id}>
-            <ToolbarButton
-              id={id}
-              isActive={isActive}
-              onClick={onClick}
-              icon={icon}
-              label={label}
-              dropdownContent={dropdownContent}
-              type={type}
-            />
-          </div>
-        );
-      })}
-      {!!moreTools.length && (
-        <>
-          <span className="w-1 border-l h-8 self-center mx-2 border-common-dark" />
-          <Tooltip position="bottom" content="More tools">
-            <IconButton
-              className={classnames(
-                'mx-1 text-common-bright hover:bg-primary-dark hover:text-primary-light'
-              )}
-              color="inherit"
-            >
-              <Icon name="tool-more-menu" />
-            </IconButton>
-          </Tooltip>
-        </>
-      )}
-    </div>
-  );
-};
-
-Toolbar.defaultProps = {
-  activeTool: '',
-  moreTools: [],
-  type: 'primary',
-};
-
-Toolbar.propTypes = {
-  type: PropTypes.oneOf(['primary', 'secondary']),
-  activeTool: PropTypes.string,
-  tools: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string,
-      icon: PropTypes.string,
-      commandName: PropTypes.string,
-      commandOptions: PropTypes.shape({
-        toolName: PropTypes.string,
-      }),
-      onClick: PropTypes.func,
-      dropdownContent: PropTypes.node,
-    })
-  ).isRequired,
-  moreTools: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string,
-      icon: PropTypes.string,
-      commandName: PropTypes.string,
-      commandOptions: PropTypes.shape({
-        toolName: PropTypes.string,
-      }),
-      onClick: PropTypes.func,
-    })
-  ),
-};
-
-export default Toolbar;

platform/ui/src/components/Toolbar/Toolbar.mdx

@@ -1,172 +0,0 @@
----
-name: Toolbar
-menu: Data Display
-route: components/toolbar
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import classnames from 'classnames';
-import { Toolbar, Typography } from '@ohif/ui';
-
-# Toolbar
-
-A Toolbar is used to create a list of tools.
-
-## Import
-
-```javascript
-import { Toolbar } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    const [activeTool, setActiveTool] = useState('Zoom');
-    const dropdownContent = [
-      {
-        name: 'Soft tissue',
-        value: '400/40',
-      },
-      { name: 'Lung', value: '1500 / -600' },
-      { name: 'Liver', value: '150 / 90' },
-      { name: 'Bone', value: '2500 / 480' },
-      { name: 'Brain', value: '80 / 40' },
-    ];
-    const tools = [
-      {
-        id: 'Zoom',
-        label: 'Zoom',
-        icon: 'tool-zoom',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Zoom' },
-        onClick: () => setActiveTool('Zoom'),
-      },
-      {
-        id: 'Wwwc',
-        label: 'Levels',
-        icon: 'tool-window-level',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Wwwc' },
-        onClick: () => setActiveTool('Wwwc'),
-        dropdownContent: (
-          <div>
-            {dropdownContent.map((row, i) => (
-              <div
-                key={i}
-                className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
-              >
-                <div>
-                  <span className="text-base text-white">{row.name}</span>
-                  <span className="text-base text-primary-light ml-3">
-                    {row.value}
-                  </span>
-                </div>
-                <span className="text-base text-primary-active ml-4">{i}</span>
-              </div>
-            ))}
-          </div>
-        ),
-      },
-      {
-        id: 'Pan',
-        label: 'Pan',
-        icon: 'tool-move',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Pan' },
-        onClick: () => setActiveTool('Pan'),
-      },
-      {
-        id: 'Capture',
-        label: 'Capture',
-        icon: 'tool-capture',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Capture' },
-        onClick: () => setActiveTool('Capture'),
-      },
-      {
-        id: 'Layout',
-        label: 'Layout',
-        icon: 'tool-layout',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Layout' },
-        onClick: () => setActiveTool('Layout'),
-      },
-    ];
-    const moreTools = [
-      {
-        id: 'Zoom 2',
-        label: 'Zoom',
-        icon: 'tool-zoom',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Zoom' },
-        onClick: () => setActiveTool('Zoom 2'),
-      },
-      {
-        id: 'Layout 2',
-        label: 'Layout',
-        icon: 'tool-layout',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Layout' },
-        onClick: () => setActiveTool('Layout 2'),
-      },
-    ];
-    const secondaryTools = [
-      {
-        id: 'Annotate',
-        label: 'Annotate',
-        icon: 'tool-annotate',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Annotate' },
-        onClick: () => console.log('Activate Annotate'),
-      },
-      {
-        id: 'Bidirectional',
-        label: 'Bidirectional',
-        icon: 'tool-bidirectional',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Bidirectional' },
-        onClick: () => console.log('Activate Bidirectional'),
-      },
-      {
-        id: 'Elipse',
-        label: 'Elipse',
-        icon: 'tool-elipse',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Elipse' },
-        onClick: () => console.log('Activate Elipse'),
-      },
-      {
-        id: 'Length',
-        label: 'Length',
-        icon: 'tool-length',
-        type: null,
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Length' },
-        onClick: () => console.log('Activate Length'),
-      },
-    ];
-    return (
-      <div className="py-10 px-4 flex flex-col justify-center">
-        <div className="mb-4">
-          <Typography className="mb-2">Primary Toolbar</Typography>
-          <Toolbar
-            moreTools={moreTools}
-            activeTool={activeTool}
-            tools={tools}
-          />
-        </div>
-        <div>
-          <Typography className="mb-2">Secondary Toolbar</Typography>
-          <Toolbar tools={secondaryTools} type="secondary" />
-        </div>
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={Toolbar} />

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

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

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -51,6 +51,7 @@ ToolbarButton.defaultProps = {
 };
 
 ToolbarButton.propTypes = {
+  /* Influences background/hover styling */
   type: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   isActive: PropTypes.bool,

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

@@ -1,14 +1,7 @@
 import React from 'react';
-import {
-  SidePanel,
-  StudyBrowser,
-  DragAndDropProvider,
-  ViewportGrid,
-  ViewportPane,
-} from '@ohif/ui';
+import { SidePanel, StudyBrowser, DragAndDropProvider } from '@ohif/ui';
 
 import Header from './components/Header';
-import ViewportToolbar from './components/ViewportToolBar';
 
 const Viewer = () => {
   return (
@@ -16,7 +9,7 @@ const Viewer = () => {
       <div>
         <Header />
         <div
-          className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+          className="flex flex-row flex-no-wrap items-stretch flex-1 w-full overflow-hidden"
           style={{ height: 'calc(100vh - 57px' }}
         >
           <SidePanel
@@ -28,8 +21,8 @@ const Viewer = () => {
           >
             <StudyBrowser />
           </SidePanel>
-          <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-            <ViewportToolbar />
+          <div className="flex items-center justify-center flex-1 overflow-hidden text-white h-100 bg-primary-main">
+            {/* <ViewportToolbar /> */}
             <div>CONTENT</div>
           </div>
           <SidePanel
@@ -39,7 +32,7 @@ const Viewer = () => {
             componentLabel="Measurements"
             defaultIsOpen={false}
           >
-            <div className="flex justify-center text-white p-2">
+            <div className="flex justify-center p-2 text-white">
               panel placeholder
             </div>
           </SidePanel>

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

@@ -25,7 +25,6 @@ import {
 } from '@ohif/ui';
 
 import Header from './components/Header';
-import ViewportToolbar from './components/ViewportToolBar';
 
 import { tabs } from './studyBrowserMockData';
 
@@ -76,7 +75,7 @@ import { tabs } from './studyBrowserMockData';
           {/* TOOLBAR + GRID */}
           <div className="flex flex-col flex-1 h-full">
             <div className="flex flex-2 w-100 border-b border-transparent h-12">
-              <ViewportToolbar />
+              {/* <ViewportToolbar /> Secondary Toolbar */}
             </div>
             {/* VIEWPORT GRID CONTAINER */}
             <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
 
 const Header = () => {
   const [activeTool, setActiveTool] = useState('Zoom');
@@ -34,15 +34,15 @@ const Header = () => {
           {dropdownContent.map((row, i) => (
             <div
               key={i}
-              className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
+              className="flex justify-between px-3 py-2 cursor-pointer hover:bg-secondary-dark"
             >
               <div>
                 <span className="text-base text-white">{row.name}</span>
-                <span className="text-base text-primary-light ml-3">
+                <span className="ml-3 text-base text-primary-light">
                   {row.value}
                 </span>
               </div>
-              <span className="text-base text-primary-active ml-4">{i}</span>
+              <span className="ml-4 text-base text-primary-active">{i}</span>
             </div>
           ))}
         </div>
@@ -75,12 +75,12 @@ const Header = () => {
   ];
   return (
     <NavBar className="justify-between border-b-4 border-black">
-      <div className="flex flex-1 justify-between">
+      <div className="flex justify-between flex-1">
         <div className="flex items-center">
-          <div className="mr-3 inline-flex items-center">
+          <div className="inline-flex items-center mr-3">
             <Icon
               name="chevron-left"
-              className="text-primary-active w-8 cursor-pointer"
+              className="w-8 cursor-pointer text-primary-active"
               onClick={() => alert('Navigate to previous page')}
             />
             <a href="#" className="ml-4">
@@ -89,10 +89,10 @@ const Header = () => {
           </div>
         </div>
         <div className="flex items-center">
-          <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
+          {/* <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} /> */}
         </div>
         <div className="flex items-center">
-          <span className="mr-3 text-common-light text-lg">
+          <span className="mr-3 text-lg text-common-light">
             FOR INVESTIGATIONAL USE ONLY
           </span>
           <IconButton

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

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Toolbar } from '@ohif/ui';
-
-const ViewportToolbar = () => {
-  const tools = [
-    {
-      id: 'Annotate',
-      label: 'Annotate',
-      icon: 'tool-annotate',
-      type: null,
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Annotate' },
-      onClick: () => console.log('Activate Annotate'),
-    },
-    {
-      id: 'Bidirectional',
-      label: 'Bidirectional',
-      icon: 'tool-bidirectional',
-      type: null,
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Bidirectional' },
-      onClick: () => console.log('Activate Bidirectional'),
-    },
-    {
-      id: 'Elipse',
-      label: 'Elipse',
-      icon: 'tool-elipse',
-      type: null,
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Elipse' },
-      onClick: () => console.log('Activate Elipse'),
-    },
-    {
-      id: 'Length',
-      label: 'Length',
-      icon: 'tool-length',
-      type: null,
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Length' },
-      onClick: () => console.log('Activate Length'),
-    },
-  ];
-  return <Toolbar type="secondary" tools={tools} />;
-};
-
-export default ViewportToolbar;