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

OHIF-202: Add tooltip for locked/unlocked SR viewport icon (#1858)

Browse Source 
* OHIF-202: Add tooltip for locked/unlocked SR viewport icon

* fix edit margin

* Update platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

* Apply suggestions from code review

* Fix tooltip (func comp)

* Don't render the `0` of data.length used to check a render condition

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
This commit is contained in:
Rodrigo Antinarelli 2020-07-03 00:58:50 -03:00 committed by GitHub
parent cf91b0f942
commit 0e6c9258b7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,37 +8,30 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
return ( return (
<div> <div>
<div className="flex justify-between px-2 py-1 bg-secondary-main"> <div className="flex justify-between px-2 py-1 bg-secondary-main">
<span className="text-base font-bold text-white tracking-widest uppercase"> <span className="text-base font-bold tracking-widest text-white uppercase">
{title} {title}
</span> </span>
<span className="text-base font-bold text-white">{amount}</span> <span className="text-base font-bold text-white">{amount}</span>
</div> </div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112"> <div className="overflow-x-hidden overflow-y-auto ohif-scrollbar max-h-112">
{data.length && data.map((measurementItem, index) => ( {data.length !== 0 &&
<MeasurementItem data.map((measurementItem, index) => (
key={measurementItem.id} <MeasurementItem
id={measurementItem.id} key={measurementItem.id}
index={index + 1} id={measurementItem.id}
label={measurementItem.label} index={index + 1}
isActive={measurementItem.isActive} label={measurementItem.label}
displayText={measurementItem.displayText} isActive={measurementItem.isActive}
onClick={onClick} displayText={measurementItem.displayText}
onEdit={onEdit} onClick={onClick}
/> onEdit={onEdit}
))} />
{!data.length && ( ))}
<div {data.length === 0 && (
className={classnames( <div className="flex transition duration-300 bg-black border border-transparent cursor-default group">
'group flex cursor-default bg-black border border-transparent transition duration-300 ' <div className="w-6 py-1 text-base text-center transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main"></div>
)} <div className="flex items-center justify-between flex-1 px-2 py-4">
> <span className="flex items-center flex-1 mb-1 text-base text-primary-light">
<div
className={classnames(
'text-center w-6 py-1 text-base transition duration-300 bg-primary-dark text-primary-light group-hover:bg-secondary-main'
)}
></div>
<div className="px-2 py-4 flex flex-1 items-center justify-between">
<span className="text-base text-primary-light mb-1 flex items-center flex-1">
No tracked measurements No tracked measurements
</span> </span>
</div> </div>
@ -52,8 +45,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
MeasurementTable.defaultProps = { MeasurementTable.defaultProps = {
amount: null, amount: null,
data: [], data: [],
onClick: () => { }, onClick: () => {},
onEdit: () => { }, onEdit: () => {},
}; };
MeasurementTable.propTypes = { MeasurementTable.propTypes = {

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

@ -52,22 +52,38 @@ const ViewportActionBar = ({
const renderIconStatus = () => { const renderIconStatus = () => {
if (modality === 'SR') { if (modality === 'SR') {
const TooltipMessage = isLocked
? () => (
<div>
This SR is locked. <br />
Measurements cannot be duplicated.
</div>
)
: () => (
<div>
This SR is unlocked. <br />
You can duplicate measurements on your current report <br /> by
clicking &apos;Edit&apos;.
</div>
);
return ( return (
<> <>
<div className="relative flex p-1 border rounded border-primary-light"> <Tooltip content={<TooltipMessage />} position="bottom-left">
<span className="text-sm font-bold leading-none text-primary-light"> <div className="relative flex p-1 border rounded cursor-default border-primary-light">
SR <span className="text-sm font-bold leading-none text-primary-light">
</span> SR
{isLocked && ( </span>
<Icon {isLocked && (
name="lock" <Icon
className="absolute w-3 text-white" name="lock"
style={{ top: -6, right: -6 }} className="absolute w-3 text-white"
/> style={{ top: -6, right: -6 }}
)} />
</div> )}
</div>
</Tooltip>
{!isLocked && !isHydrated && ( {!isLocked && !isHydrated && (
<div className="relative flex p-1 border rounded border-primary-light"> <div className="relative flex p-1 ml-1 border rounded cursor-pointer border-primary-light">
<span <span
className="text-sm font-bold leading-none text-primary-light" className="text-sm font-bold leading-none text-primary-light"
onClick={onHydrationClick} onClick={onHydrationClick}