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

fix: OHIF-215 - Patient information should truncate w/ ellipsis instead of expanding box (#1875)

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-07-22 17:04:05 -03:00 committed by GitHub
parent afcd3f5263
commit 15f20b445b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx
View File

@ -6,7 +6,7 @@ import useOnClickOutside from '../../utils/useOnClickOutside';
const classes = {
infoHeader: 'text-base text-primary-light',
infoText: 'text-base text-white',
infoText: 'text-base text-white max-w-24 truncate',
firstRow: 'flex flex-col',
row: 'flex flex-col ml-4',
};
@ -274,25 +274,39 @@ function PatientInfo({
<Icon name="info-link" className="w-4 text-primary-main" />
</div>
<div className="flex flex-col ml-2">
<span className="text-base font-bold text-white">
<span
className="text-base font-bold text-white"
title={patientName}
>
{patientName}
</span>
<div className="flex pb-4 mt-4 mb-4 border-b border-secondary-main">
<div className={classnames(classes.firstRow)}>
<span className={classnames(classes.infoHeader)}>Sex</span>
<span className={classnames(classes.infoText)}>
<span
className={classnames(classes.infoText)}
title={patientSex}
>
{patientSex}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>Age</span>
<span className={classnames(classes.infoText)}>
<span
className={classnames(classes.infoText)}
title={patientAge}
>
{patientAge}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>MRN</span>
<span className={classnames(classes.infoText)}>{MRN}</span>
<span
className={classnames(classes.infoText)}
title={MRN}
>
{MRN}
</span>
</div>
</div>
<div className="flex">
@ -300,15 +314,21 @@ function PatientInfo({
<span className={classnames(classes.infoHeader)}>
Thickness
</span>
<span className={classnames(classes.infoText)}>
{thickness ? thickness : 'N/A'}
<span
className={classnames(classes.infoText)}
title={thickness}
>
{thickness}
</span>
</div>
<div className={classnames(classes.row)}>
<span className={classnames(classes.infoHeader)}>
Spacing
</span>
<span className={classnames(classes.infoText)}>
<span
className={classnames(classes.infoText)}
title={spacing}
>
{spacing}
</span>
</div>
@ -316,7 +336,10 @@ function PatientInfo({
<span className={classnames(classes.infoHeader)}>
Scanner
</span>
<span className={classnames(classes.infoText)}>
<span
className={classnames(classes.infoText)}
title={scanner}
>
{scanner}
</span>
</div>