Small style fixes and implementation of toolbars on viewer docz page
This commit is contained in:
Gustavo Lelis
James A. Petts
parent
a0662c4883
commit
f96f965a76
@ -77,7 +77,7 @@ const SidePanel = ({
|
||||
onClick={() => {
|
||||
setIsOpen(false);
|
||||
}}
|
||||
className="flex flex-row items-center border-b-2 border-secondary-main border-secondary-light px-3 h-12 relative"
|
||||
className="flex flex-row items-center border-b border-secondary-light px-3 h-12 relative"
|
||||
>
|
||||
<Icon
|
||||
name={openIconName[side]}
|
||||
@ -100,7 +100,7 @@ const SidePanel = ({
|
||||
minWidth: `${collapsedWidth}px`,
|
||||
width: `${collapsedWidth}px`,
|
||||
}}
|
||||
className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b-2"
|
||||
className="flex flex-col text-xs px-1 py-1 text-white border-transparent border-b"
|
||||
>
|
||||
<Icon name={iconName} className="text-primary-active" />
|
||||
<span className="mt-2 text-white text-xs">{iconLabel}</span>
|
||||
|
||||
@ -20,7 +20,7 @@ const StudyBrowser = () => {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="flex flex-row items-center justify-center border-b-2 w-100 h-16 border-secondary-light p-4 bg-primary-dark">
|
||||
<div className="flex flex-row items-center justify-center border-b w-100 h-16 border-secondary-light p-4 bg-primary-dark">
|
||||
<ButtonGroup
|
||||
variant="outlined"
|
||||
color="inherit"
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
import React from 'react';
|
||||
import { NavBar, SidePanel, Svg, StudyBrowser } from '@ohif/ui';
|
||||
import { SidePanel, StudyBrowser } from '@ohif/ui';
|
||||
|
||||
import Header from './components/Header';
|
||||
import ViewportToolbar from './components/ViewportToolBar';
|
||||
|
||||
const Viewer = () => {
|
||||
return (
|
||||
<div>
|
||||
<NavBar className="justify-start">
|
||||
<div className="m-3">
|
||||
<Svg name="logo-ohif" />
|
||||
</div>
|
||||
</NavBar>
|
||||
<Header />
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: 'calc(100vh - 57px' }}
|
||||
@ -23,7 +22,8 @@ const Viewer = () => {
|
||||
<StudyBrowser />
|
||||
</SidePanel>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
|
||||
CONTENT
|
||||
<ViewportToolbar />
|
||||
<div>CONTENT</div>
|
||||
</div>
|
||||
<SidePanel
|
||||
side="right"
|
||||
|
||||
@ -20,6 +20,9 @@ import {
|
||||
ViewportGrid,
|
||||
} from '@ohif/ui';
|
||||
|
||||
import Header from './components/Header';
|
||||
import ViewportToolbar from './components/ViewportToolBar';
|
||||
|
||||
# Viewer
|
||||
|
||||
<Playground>
|
||||
@ -36,11 +39,7 @@ import {
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<NavBar className="justify-start">
|
||||
<div className="m-3">
|
||||
<Svg name="logo-ohif" />
|
||||
</div>
|
||||
</NavBar>
|
||||
<Header />
|
||||
<div
|
||||
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
||||
style={{ height: 'calc(100vh - 57px' }}
|
||||
@ -54,19 +53,11 @@ import {
|
||||
>
|
||||
<StudyBrowser />
|
||||
</SidePanel>
|
||||
<div className="flex flex-1 h-100 overflow-hidden bg-black items-center justify-center text-white">
|
||||
<ViewportGrid
|
||||
rows={1}
|
||||
cols={2}
|
||||
viewportContents={[
|
||||
<div className="flex flex-col h-full">
|
||||
<ViewportActionBar isTracked modality="CT" />
|
||||
</div>,
|
||||
<div className="flex flex-col h-full">
|
||||
<ViewportActionBar isTracked={false} modality="CT" />
|
||||
</div>,
|
||||
]}
|
||||
/>
|
||||
<div className="flex flex-col flex-1 h-100">
|
||||
<div className="flex flex-2 w-100 border-b border-transparent h-12">
|
||||
<ViewportToolbar />
|
||||
</div>
|
||||
<div className="flex flex-1 items-center justify-center bg-black text-white border rounded-lg border-secondary-light h-100 overflow-hidden">CONTENT</div>
|
||||
</div>
|
||||
<SidePanel
|
||||
side="right"
|
||||
|
||||
146
platform/ui/src/views/Viewer/components/Header.js
Normal file
146
platform/ui/src/views/Viewer/components/Header.js
Normal file
@ -0,0 +1,146 @@
|
||||
import React, { useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
|
||||
|
||||
const Header = () => {
|
||||
const [activeTool, setActiveTool] = useState(null);
|
||||
const [showTooltip, setShowTooltip] = useState(null);
|
||||
const tools = [
|
||||
{
|
||||
id: 'Zoom',
|
||||
label: 'Zoom',
|
||||
icon: 'tool-zoom',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Zoom' },
|
||||
},
|
||||
{
|
||||
id: 'Wwwc',
|
||||
label: 'Levels',
|
||||
icon: 'tool-window-level',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Wwwc' },
|
||||
},
|
||||
{
|
||||
id: 'Pan',
|
||||
label: 'Pan',
|
||||
icon: 'tool-move',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Pan' },
|
||||
},
|
||||
{
|
||||
id: 'Capture',
|
||||
label: 'Capture',
|
||||
icon: 'tool-capture',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Capture' },
|
||||
},
|
||||
{
|
||||
id: 'Layout',
|
||||
label: 'Layout',
|
||||
icon: 'tool-layout',
|
||||
type: null,
|
||||
commandName: 'setToolActive',
|
||||
commandOptions: { toolName: 'Layout' },
|
||||
},
|
||||
];
|
||||
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-common-bright hover:bg-primary-dark hover:text-primary-light': !isActive,
|
||||
})}
|
||||
onClick={(e) => {
|
||||
setActiveTool(tool.id);
|
||||
}}
|
||||
onMouseOver={() => setShowTooltip(tool.id)}
|
||||
onMouseOut={() => setShowTooltip(null)}
|
||||
key={tool.id}
|
||||
>
|
||||
<Icon name={tool.icon} />
|
||||
</IconButton>
|
||||
{shouldShowTooltip && (
|
||||
<div
|
||||
className={classnames(
|
||||
'tooltip tooltip-up 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 (
|
||||
<NavBar className="justify-between border-b-4 border-black">
|
||||
<div className="flex flex-1 justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-3 inline-flex items-center">
|
||||
<Icon
|
||||
name="chevron-left"
|
||||
className="text-primary-active w-8 cursor-pointer"
|
||||
onClick={() => alert('Navigate to previous page')}
|
||||
/>
|
||||
<a href="#" className="ml-4">
|
||||
<Svg name="logo-ohif" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center">
|
||||
{renderToolbar()}
|
||||
<span className="w-1 border-l py-4 mx-2 border-common-dark" />
|
||||
<IconButton
|
||||
className={classnames(
|
||||
'mx-1 text-common-bright hover:bg-primary-dark hover:text-primary-light'
|
||||
)}
|
||||
color="inherit"
|
||||
onClick={(e) => {
|
||||
alert('Open menu');
|
||||
}}
|
||||
>
|
||||
<Icon name="tool-more-menu" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="mr-3 text-common-light text-lg">
|
||||
FOR INVESTIGATIONAL USE ONLY
|
||||
</span>
|
||||
<IconButton
|
||||
variant="text"
|
||||
color="inherit"
|
||||
className="text-primary-active"
|
||||
onClick={() => {}}
|
||||
>
|
||||
<React.Fragment>
|
||||
<Icon name="settings" /> <Icon name="chevron-down" />
|
||||
</React.Fragment>
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
</NavBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
97
platform/ui/src/views/Viewer/components/ViewportToolBar.js
Normal file
97
platform/ui/src/views/Viewer/components/ViewportToolBar.js
Normal file
@ -0,0 +1,97 @@
|
||||
import React, { useState } from 'react';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import { Icon, IconButton } from '@ohif/ui';
|
||||
|
||||
const ViewportToolbar = () => {
|
||||
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-secondary-dark hover:text-white focus:bg-secondary-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={classnames(
|
||||
'flex w-full items-center bg-primary-dark px-3 py-2'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">{renderToolbar()}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewportToolbar;
|
||||
Loading…
Reference in New Issue
Block a user