TrizTech/ohif-viewer
17
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Secondary Toolbar

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-08 19:31:33 -03:00 committed by James A. Petts
parent 25ae057c7c
commit cd167dbd30
12 changed files with 159 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
platform/ui/src/assets/icons/tool-annotate.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 301 B

12
platform/ui/src/assets/icons/tool-bidirectional.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 727 B

6
platform/ui/src/assets/icons/tool-elipse.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 386 B

7
platform/ui/src/assets/icons/tool-length.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 417 B

8
platform/ui/src/components/Icon/getIcon.jsx
View File

@ -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,
};
/**

2
platform/ui/src/components/SidePanel/SidePanel.jsx
View File

@ -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]}

7
platform/ui/src/components/SidePanel/SidePanel.mdx
View File

@ -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>

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

@ -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 }) => {

2
platform/ui/src/views/ToolbarHeader/ToolbarHeader.mdx
View File

@ -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

112
platform/ui/src/views/ToolbarSecondary/ToolbarSecondary.mdx Normal file
View File

@ -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>

2
platform/ui/src/views/Viewer/Viewer.js
View File

@ -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

2
platform/ui/src/views/Viewer/Viewer.mdx
View File

@ -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