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

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

@ -8,13 +8,14 @@ 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 &&
data.map((measurementItem, index) => (
<MeasurementItem <MeasurementItem
key={measurementItem.id} key={measurementItem.id}
id={measurementItem.id} id={measurementItem.id}
@ -26,19 +27,11 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
onEdit={onEdit} onEdit={onEdit}
/> />
))} ))}
{!data.length && ( {data.length === 0 && (
<div <div className="flex transition duration-300 bg-black border border-transparent cursor-default group">
className={classnames( <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>
'group flex cursor-default bg-black border border-transparent transition duration-300 ' <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>

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

@ -52,9 +52,24 @@ 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">
<div className="relative flex p-1 border rounded cursor-default border-primary-light">
<span className="text-sm font-bold leading-none text-primary-light"> <span className="text-sm font-bold leading-none text-primary-light">
SR SR
</span> </span>
@ -66,8 +81,9 @@ const ViewportActionBar = ({
/> />
)} )}
</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}