diff --git a/platform/ui/src/assets/icons/tool-annotate.svg b/platform/ui/src/assets/icons/tool-annotate.svg new file mode 100644 index 000000000..99fbfe3a3 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-annotate.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/platform/ui/src/assets/icons/tool-bidirectional.svg b/platform/ui/src/assets/icons/tool-bidirectional.svg new file mode 100644 index 000000000..cd896bb9b --- /dev/null +++ b/platform/ui/src/assets/icons/tool-bidirectional.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/platform/ui/src/assets/icons/tool-elipse.svg b/platform/ui/src/assets/icons/tool-elipse.svg new file mode 100644 index 000000000..6a7905448 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-elipse.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/assets/icons/tool-length.svg b/platform/ui/src/assets/icons/tool-length.svg new file mode 100644 index 000000000..ab01c1028 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-length.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index a3161bb99..b471912d4 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/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, }; /** diff --git a/platform/ui/src/components/SidePanel/SidePanel.jsx b/platform/ui/src/components/SidePanel/SidePanel.jsx index 624bc6f36..fab642d11 100644 --- a/platform/ui/src/components/SidePanel/SidePanel.jsx +++ b/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" > -
+
panel content
 -
+
CONTENT
diff --git a/platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js b/platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js index 119e45475..bd75e1697 100644 --- a/platform/ui/src/gatsby-theme-docz/components/NavGroup/index.js +++ b/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 }) => { diff --git a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx index 03866c0bf..0ed69f774 100644 --- a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx +++ b/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 diff --git a/platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx b/platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx new file mode 100644 index 000000000..c8fdb7bbc --- /dev/null +++ b/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 + + + {() => { + 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 ( +
+ { + setActiveTool(tool.id); + }} + onMouseOver={() => setShowTooltip(tool.id)} + onMouseOut={() => setShowTooltip(null)} + > + + + {shouldShowTooltip && ( +
+ {tool.label} + + + +
+ )} +
+ ); + }); + }; + return ( +
+
+
{renderToolbar()}
+
+
+ ); + }} + diff --git a/platform/ui/src/views/Viewer/Viewer.js b/platform/ui/src/views/Viewer/Viewer.js index 3071390f1..dc466fe1c 100644 --- a/platform/ui/src/views/Viewer/Viewer.js +++ b/platform/ui/src/views/Viewer/Viewer.js @@ -24,7 +24,7 @@ const Viewer = () => { panel placeholder
-
+
CONTENT
-
+
CONTENT