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

fix(Worklist): use the flexbox gap style property for spacing between mode buttons (#3532)

Browse Source
This commit is contained in:
Joe Boccanfuso 2023-07-12 10:19:03 -04:00 committed by GitHub
parent 19418df8b5
commit 7d286a07f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
platform/app/src/routes/WorkList/WorkList.tsx
View File

@ -336,6 +336,7 @@ function WorkList({
: [] : []
} }
> >
<div className="flex flex-row gap-2">
{appConfig.loadedModes.map((mode, i) => { {appConfig.loadedModes.map((mode, i) => {
const isFirst = i === 0; const isFirst = i === 0;
@ -358,9 +359,17 @@ function WorkList({
query.append('StudyInstanceUIDs', studyInstanceUid); query.append('StudyInstanceUIDs', studyInstanceUid);
return ( return (
<Link <Link
className={isValidMode ? '' : 'cursor-not-allowed'}
key={i} key={i}
to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath || to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
''}?${query.toString()}`} ''}?${query.toString()}`}
onClick={event => {
// In case any event bubbles up for an invalid mode, prevent the navigation.
// For example, the event bubbles up when the icon embedded in the disabled button is clicked.
if (!isValidMode) {
event.preventDefault();
}
}}
// to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`} // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
> >
{/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/} {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
@ -369,7 +378,6 @@ function WorkList({
variant={isValidMode ? 'contained' : 'disabled'} variant={isValidMode ? 'contained' : 'disabled'}
disabled={!isValidMode} disabled={!isValidMode}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
className={classnames({ 'ml-2': !isFirst })}
onClick={() => {}} onClick={() => {}}
> >
{t(`Modes:${mode.displayName}`)} {t(`Modes:${mode.displayName}`)}
@ -377,6 +385,7 @@ function WorkList({
</Link> </Link>
); );
})} })}
</div>
</StudyListExpandedRow> </StudyListExpandedRow>
), ),
onClickRow: () => onClickRow: () =>