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

Segments table and color LUT

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-10 13:33:14 -03:00 committed by James A. Petts
parent b9da65ed9e
commit 9bffa88bed
5 changed files with 136 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
platform/ui/src/assets/icons/eye-hidden.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<g opacity=".5">
<path d="M17.433 2.556c1.352.98 2.578 2.122 3.65 3.402 0 0-4.719 5.959-10.541 5.959-.933-.006-1.86-.149-2.75-.426M3.637 9.35C2.29 8.373 1.07 7.234 0 5.958 0 5.958 4.719 0 10.542 0c.773.003 1.543.103 2.291.298M6.875 5.958c0-2.025 1.642-3.666 3.667-3.666M14.208 5.958c0 2.025-1.641 3.667-3.666 3.667" transform="translate(1 1) translate(.458 3.208)"/>
</g>
<path d="M19.938 0.229L2.063 18.104" transform="translate(1 1)"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 679 B

6
platform/ui/src/assets/icons/eye-visible.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13">
<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 1)">
<circle cx="10" cy="5.833" r="2.917"/>
<path d="M19.48 5.56C18.51 4.46 14.635.417 10 .417 5.365.417 1.49 4.46.52 5.56c-.136.157-.136.39 0 .547.97 1.1 4.845 5.143 9.48 5.143 4.635 0 8.51-4.043 9.48-5.143.136-.157.136-.39 0-.547z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 460 B

17
platform/ui/src/assets/styles/styles.css
View File

@ -16,6 +16,23 @@
@apply bg-primary-main;
}
/* INVISIBLE SCROLLBAR */
.invisible-scrollbar::-webkit-scrollbar {
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-track {
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-thumb {
@apply hidden;
}
.invisible-scrollbar::-webkit-scrollbar-thumb:window-inactive {
@apply hidden;
}
/* TOOLTIP WORKAROUND FOR ARROW UP */
.tooltip::before {
@apply bg-primary-dark absolute z-10;

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

@ -7,6 +7,8 @@ import cancel from './../../assets/icons/cancel.svg';
import chevronDown from './../../assets/icons/chevron-down.svg';
import chevronLeft from './../../assets/icons/chevron-left.svg';
import chevronRight from './../../assets/icons/chevron-right.svg';
import eyeVisible from './../../assets/icons/eye-visible.svg';
import eyeHidden from './../../assets/icons/eye-hidden.svg';
import groupLayers from './../../assets/icons/group-layers.svg';
import infoLink from './../../assets/icons/info-link.svg';
import launchArrow from './../../assets/icons/launch-arrow.svg';
@ -42,6 +44,8 @@ const ICONS = {
'chevron-down': chevronDown,
'chevron-left': chevronLeft,
'chevron-right': chevronRight,
'eye-visible': eyeVisible,
'eye-hidden': eyeHidden,
'group-layers': groupLayers,
'info-link': infoLink,
'launch-arrow': launchArrow,

107
platform/ui/src/components/MeasurementTable/MeasurementTable.jsx
View File

@ -3,9 +3,24 @@ import classnames from 'classnames';
import { Icon, ButtonGroup, Button, IconButton } from '@ohif/ui';
const MeasurementTable = () => {
const tableData = new Array(5).fill('');
const tableData = new Array(12).fill('');
const [activeItem, setActiveItem] = useState(null);
const colorLUT = [
'#932a13',
'#821393',
'#2b7fc4',
'#12c457',
'#7f7d2e',
'#7f2e4a',
'#866943',
'#65ae7f',
'#334b5f',
'#3cb0dc',
'#292ac9',
'#629753',
];
const renderTable = (title, amount, data) => {
return (
<div>
@ -16,7 +31,7 @@ const MeasurementTable = () => {
<span className="text-base font-bold text-white">{amount}</span>
</div>
{/* MEASUREMENT ITEMS */}
<div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
{!!data.length &&
data.map((e, i) => {
const itemKey = i;
@ -26,9 +41,9 @@ const MeasurementTable = () => {
<div
key={i}
className={classnames(
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
'group flex cursor-default bg-black border border-transparent transition duration-300 ',
{
'border-primary-light': isActive,
'rounded overflow-hidden border-primary-light': isActive,
}
)}
onClick={() => {
@ -42,7 +57,7 @@ const MeasurementTable = () => {
>
<div
className={classnames(
'p-2 text-base transition duration-300',
'text-center w-6 py-1 text-base transition duration-300',
{
'bg-primary-light text-black': isActive,
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
@ -86,8 +101,87 @@ const MeasurementTable = () => {
);
};
const renderSegments = (title, amount, data) => {
return (
<div>
<div className="flex justify-between px-2 py-1 bg-secondary-main">
<span className="text-base font-bold text-white tracking-widest uppercase">
{title}
</span>
<div className="flex">
<span className="text-base font-bold text-white">{amount}</span>
<Icon
name="eye-hidden"
className="w-6 text-white ml-2 cursor-pointer transition duration-300 hover:opacity-80"
onClick={() => alert('TBD')}
/>
</div>
</div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-64">
{!!data.length &&
data.map((e, i) => {
const itemKey = i;
const currentItem = i + 1;
const isActive = !!activeItem && activeItem[title] === i;
return (
<div
key={i}
className={classnames(
'group flex cursor-default bg-black border border-transparent transition duration-300 rounded overflow-hidden',
{
'border-primary-light': isActive,
}
)}
onClick={() => {
setActiveItem((s) => {
return {
...s,
[title]: s && s[title] === itemKey ? null : itemKey,
};
});
}}
>
<div
className={classnames(
'text-center w-6 py-1 text-base transition duration-300',
{
'bg-primary-light text-black': isActive,
'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
}
)}
>
{currentItem}
</div>
<div className="px-2 py-1 flex flex-1 items-center justify-between">
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
<div
className="w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: colorLUT[i] }}
></div>
Label short description
</span>
<Icon
className={classnames(
'text-white w-6 cursor-pointer transition duration-300 hover:opacity-80'
)}
name="eye-visible"
onClick={(e) => {
// stopPropagation needed to avoid disable the current active item
e.stopPropagation();
alert('Toggle');
}}
/>
</div>
</div>
);
})}
</div>
</div>
);
};
return (
<div>
<div className="overflow-y-auto overflow-x-hidden invisible-scrollbar pb-4">
{/* HEADER */}
<div className="p-2">
<div className="leading-none">
@ -105,6 +199,7 @@ const MeasurementTable = () => {
{/* TABLE */}
{renderTable('Measurements', 5, tableData)}
{renderTable('ADDITIONAL FINDINGS', 5, tableData)}
{renderSegments('SEGMENTS', 12, tableData)}
{/* BUTTONS */}
<div className="mt-4 flex justify-center">