diff --git a/platform/ui/src/assets/icons/tool-capture.svg b/platform/ui/src/assets/icons/tool-capture.svg new file mode 100644 index 000000000..8c9be558a --- /dev/null +++ b/platform/ui/src/assets/icons/tool-capture.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/platform/ui/src/assets/icons/tool-layout.svg b/platform/ui/src/assets/icons/tool-layout.svg new file mode 100644 index 000000000..f225033dd --- /dev/null +++ b/platform/ui/src/assets/icons/tool-layout.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/assets/icons/tool-more-menu.svg b/platform/ui/src/assets/icons/tool-more-menu.svg new file mode 100644 index 000000000..3429b6c1e --- /dev/null +++ b/platform/ui/src/assets/icons/tool-more-menu.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/assets/icons/tool-move.svg b/platform/ui/src/assets/icons/tool-move.svg new file mode 100644 index 000000000..d1c9d5dfb --- /dev/null +++ b/platform/ui/src/assets/icons/tool-move.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/platform/ui/src/assets/icons/tool-window-level.svg b/platform/ui/src/assets/icons/tool-window-level.svg new file mode 100644 index 000000000..67ecbcd06 --- /dev/null +++ b/platform/ui/src/assets/icons/tool-window-level.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/platform/ui/src/components/Icon/getIcon.jsx b/platform/ui/src/components/Icon/getIcon.jsx index 7c68b86e3..ecf05ea55 100644 --- a/platform/ui/src/components/Icon/getIcon.jsx +++ b/platform/ui/src/components/Icon/getIcon.jsx @@ -21,6 +21,11 @@ import sortingActiveUp from './../../assets/icons/sorting-active-up.svg'; /** Tools */ import toolZoom from './../../assets/icons/tool-zoom.svg'; +import toolCapture from './../../assets/icons/tool-capture.svg'; +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'; const ICONS = { 'arrow-down': arrowDown, @@ -44,6 +49,11 @@ const ICONS = { /** Tools */ 'tool-zoom': toolZoom, + 'tool-capture': toolCapture, + 'tool-layout': toolLayout, + 'tool-more-menu': toolMore, + 'tool-move': toolMove, + 'tool-window-level': toolWindow, }; /** diff --git a/platform/ui/src/gatsby-theme-docz/tailwind.css b/platform/ui/src/gatsby-theme-docz/tailwind.css index 35e1754dd..071307a31 100644 --- a/platform/ui/src/gatsby-theme-docz/tailwind.css +++ b/platform/ui/src/gatsby-theme-docz/tailwind.css @@ -22,3 +22,14 @@ .ohif-scrollbar::-webkit-scrollbar-thumb:window-inactive { @apply bg-primary-main; } + +/* TOOLTIP WORKAROUND FOR ARROW UP */ +.tooltip::before { + @apply bg-primary-dark absolute z-10; + content: ''; + width: 14px; + height: 1px; + top: -1px; + left: 50%; + transform: translateX(-50%); +} diff --git a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx index 6068d2e0f..d3bf4a4d0 100644 --- a/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx +++ b/platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx @@ -18,7 +18,7 @@ components. {() => { const [activeTool, setActiveTool] = useState('Zoom'); - const [showTooltip, setShowTooltip] = useState('Zoom'); + const [showTooltip, setShowTooltip] = useState(null); const tools = [ { id: 'Zoom', @@ -31,7 +31,7 @@ components. { id: 'Wwwc', label: 'Levels', - icon: 'tool-zoom', + icon: 'tool-window-level', type: null, commandName: 'setToolActive', commandOptions: { toolName: 'Wwwc' }, @@ -39,36 +39,26 @@ components. { id: 'Pan', label: 'Pan', - icon: 'tool-zoom', + icon: 'tool-move', type: null, commandName: 'setToolActive', commandOptions: { toolName: 'Pan' }, }, { - id: 'Wwwc', - label: 'Levels', - icon: 'tool-zoom', + id: 'Capture', + label: 'Capture', + icon: 'tool-capture', type: null, commandName: 'setToolActive', - commandOptions: { toolName: 'Wwwc' }, + commandOptions: { toolName: 'Capture' }, }, { - id: 'Wwwc', - label: 'Levels', - icon: 'tool-zoom', + id: 'Layout', + label: 'Layout', + icon: 'tool-layout', type: null, commandName: 'setToolActive', - commandOptions: { toolName: 'Wwwc' }, - }, - ]; - const collapsedTools = [ - { - id: 'Zoom', - label: 'Zoom', - icon: 'tool-zoom', - type: null, - commandName: 'setToolActive', - commandOptions: { toolName: 'Zoom' }, + commandOptions: { toolName: 'Layout' }, }, ]; const renderToolbar = () => { @@ -90,33 +80,27 @@ components. onMouseOut={() => setShowTooltip(null)} key={tool.id} > - + -
- {tool.label} - - - -
+ {tool.label} + + + + + )} ); }); @@ -129,7 +113,7 @@ components.
alert('Navigate to previous page')} /> @@ -140,11 +124,18 @@ components.
{renderToolbar()} - - + + { + alert('Open menu'); + }} + > + +
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js index e87cdde3b..8589e0301 100644 --- a/platform/ui/tailwind.config.js +++ b/platform/ui/tailwind.config.js @@ -436,9 +436,10 @@ module.exports = { }, padding: (theme) => theme('spacing'), placeholderColor: (theme) => theme('colors'), - stroke: { + stroke: (theme) => ({ + ...theme('colors'), current: 'currentColor', - }, + }), strokeWidth: { '0': '0', '1': '1',