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 (
<div>
<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}
</span>
<span className="text-base font-bold text-white">{amount}</span>
</div>
<div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
{data.length && data.map((measurementItem, index) => (
<MeasurementItem
key={measurementItem.id}
id={measurementItem.id}
index={index + 1}
label={measurementItem.label}
isActive={measurementItem.isActive}
displayText={measurementItem.displayText}
onClick={onClick}
onEdit={onEdit}
/>
))}
{!data.length && (
<div
className={classnames(
'group flex cursor-default bg-black border border-transparent transition duration-300 '
)}
>
<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">
<div className="overflow-x-hidden overflow-y-auto ohif-scrollbar max-h-112">
{data.length !== 0 &&
data.map((measurementItem, index) => (
<MeasurementItem
key={measurementItem.id}
id={measurementItem.id}
index={index + 1}
label={measurementItem.label}
isActive={measurementItem.isActive}
displayText={measurementItem.displayText}
onClick={onClick}
onEdit={onEdit}
/>
))}
{data.length === 0 && (
<div className="flex transition duration-300 bg-black border border-transparent cursor-default group">
<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">
No tracked measurements
</span>
</div>
@ -52,8 +45,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
MeasurementTable.defaultProps = {
amount: null,
data: [],
onClick: () => { },
onEdit: () => { },
onClick: () => {},
onEdit: () => {},
};
MeasurementTable.propTypes = {

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

@ -52,22 +52,38 @@ const ViewportActionBar = ({
const renderIconStatus = () => {
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 (
<>
<div className="relative flex p-1 border rounded border-primary-light">
<span className="text-sm font-bold leading-none text-primary-light">
SR
</span>
{isLocked && (
<Icon
name="lock"
className="absolute w-3 text-white"
style={{ top: -6, right: -6 }}
/>
)}
</div>
<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">
SR
</span>
{isLocked && (
<Icon
name="lock"
className="absolute w-3 text-white"
style={{ top: -6, right: -6 }}
/>
)}
</div>
</Tooltip>
{!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
className="text-sm font-bold leading-none text-primary-light"
onClick={onHydrationClick}