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

svg icons, tw stroke, toolbar icons and more menu

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-08 13:04:50 -03:00 committed by James A. Petts
parent 9cc530e964
commit c902ba201f
9 changed files with 100 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 18">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1.139)">
<path d="M5.983 2.556c.406-.022.795-.173 1.109-.432L8.944.432c.314-.26.703-.41 1.11-.432h2.903c.403.023.788.175 1.099.432l1.852 1.692c.314.259.703.41 1.11.432h3.426c1.099.112 1.93 1.045 1.917 2.149v8.712c0 1.058-.858 1.916-1.917 1.916H2.556c-1.059 0-1.917-.858-1.917-1.916V4.705c-.013-1.104.818-2.037 1.917-2.15h3.427z"/>
<circle cx="11.5" cy="7.986" r="3.514"/>
<path d="M19.167 5.43c.176 0 .32.144.32.32 0 .176-.144.32-.32.32-.177 0-.32-.144-.32-.32 0-.176.143-.32.32-.32"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 735 B

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

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path fill="currentColor" d="M8.313 7.52c0 .438-.355.793-.792.793H1.188c-.438 0-.792-.355-.792-.792V1.188c0-.438.354-.792.791-.792h6.334c.437 0 .792.354.792.791v6.334z" transform="translate(1 1)"/>
<path d="M18.604 7.52c0 .438-.354.793-.791.793h-6.334c-.437 0-.791-.355-.791-.792V1.188c0-.438.354-.792.791-.792h6.334c.437 0 .791.354.791.791v6.334zM8.313 17.813c0 .437-.355.791-.792.791H1.188c-.438 0-.792-.354-.792-.791v-6.334c0-.437.354-.791.791-.791h6.334c.437 0 .792.354.792.791v6.334zM18.604 17.813c0 .437-.354.791-.791.791h-6.334c-.437 0-.791-.354-.791-.791v-6.334c0-.437.354-.791.791-.791h6.334c.437 0 .791.354.791.791v6.334z" transform="translate(1 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 883 B

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

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="6" viewBox="0 0 20 6">
<g fill="none" fill-rule="evenodd">
<path d="M0 0L29 0 29 29 0 29z" transform="translate(-4.5 -11.5)"/>
<path fill="currentColor" fill-rule="nonzero" d="M7.25 12.083c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417zm14.5 0c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417zm-7.25 0c-1.33 0-2.417 1.088-2.417 2.417 0 1.33 1.088 2.417 2.417 2.417 1.33 0 2.417-1.088 2.417-2.417 0-1.33-1.088-2.417-2.417-2.417z" transform="translate(-4.5 -11.5)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 714 B

8
platform/ui/src/assets/icons/tool-move.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<g fill="currentColor" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1.5)"/>
<path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1.5) rotate(-180 9.888 18.536)"/>
<path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1.5) rotate(-90 1.242 9.888)"/>
<path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1.5) rotate(90 18.536 9.888)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

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

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
<g fill="none" fill-rule="evenodd" transform="translate(1 1.5)">
<circle cx="10" cy="10" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path fill="currentColor" d="M17.484 3.367C19.049 5.132 20 7.455 20 10c0 5.523-4.477 10-10 10-2.545 0-4.868-.95-6.633-2.516z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 409 B

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

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

11
platform/ui/src/gatsby-theme-docz/tailwind.css
View File

@ -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%);
}

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

@ -18,7 +18,7 @@ components.
<Playground>
{() => {
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}
>
<Icon name="tool-zoom" />
<Icon name={tool.icon} />
</IconButton>
<div
class={classnames(
'absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 transition duration-300 w-max-content',
{
'visible opacity-1': shouldShowTooltip,
'invisible opacity-0': !shouldShowTooltip,
}
)}
>
{tool.label}
<svg
class="absolute text-primary-dark w-full h-4 left-0"
style={{ top: -15 }}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
{shouldShowTooltip && (
<div
class={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'
)}
>
<path
fill="currentColor"
d="M24 22h-24l12-20z"
style={{ stroke: '#373D9A', strokeWidth: 1 }}
/>
</svg>
</div>
{tool.label}
<svg
class="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>
);
});
@ -129,7 +113,7 @@ components.
<div className="mx-3 inline-flex items-center">
<Icon
name="chevron-left"
className="text-primary-main w-10 h-10 cursor-pointer transition duration-300 transform hover:scale-125"
className="text-primary-main w-10 h-10 cursor-pointer"
onClick={() => alert('Navigate to previous page')}
/>
<a href="#" className="ml-4">
@ -140,11 +124,18 @@ components.
<div className="flex items-center">
<div className="flex items-center">
{renderToolbar()}
<span
className="w-1 border-l py-4 mx-2"
style={{ borderColor: '#354A6D' }}
/>
<button>BUTTON</button>
<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">

5
platform/ui/tailwind.config.js
View File

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