othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

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

@ -336,47 +336,56 @@ function WorkList({
: [] : []
} }
> >
{appConfig.loadedModes.map((mode, i) => { <div className="flex flex-row gap-2">
const isFirst = i === 0; {appConfig.loadedModes.map((mode, i) => {
const isFirst = i === 0;
const modalitiesToCheck = modalities.replaceAll('/', '\\'); const modalitiesToCheck = modalities.replaceAll('/', '\\');
const isValidMode = mode.isValidMode({ const isValidMode = mode.isValidMode({
modalities: modalitiesToCheck, modalities: modalitiesToCheck,
study, study,
}); });
// TODO: Modes need a default/target route? We mostly support a single one for now. // TODO: Modes need a default/target route? We mostly support a single one for now.
// We should also be using the route path, but currently are not // We should also be using the route path, but currently are not
// mode.routeName // mode.routeName
// mode.routes[x].path // mode.routes[x].path
// Don't specify default data source, and it should just be picked up... (this may not currently be the case) // Don't specify default data source, and it should just be picked up... (this may not currently be the case)
// How do we know which params to pass? Today, it's just StudyInstanceUIDs and configUrl if exists // How do we know which params to pass? Today, it's just StudyInstanceUIDs and configUrl if exists
const query = new URLSearchParams(); const query = new URLSearchParams();
if (filterValues.configUrl) { if (filterValues.configUrl) {
query.append('configUrl', filterValues.configUrl); query.append('configUrl', filterValues.configUrl);
} }
query.append('StudyInstanceUIDs', studyInstanceUid); query.append('StudyInstanceUIDs', studyInstanceUid);
return ( return (
<Link <Link
key={i} className={isValidMode ? '' : 'cursor-not-allowed'}
to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath || key={i}
''}?${query.toString()}`} to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
// to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`} ''}?${query.toString()}`}
> onClick={event => {
{/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/} // In case any event bubbles up for an invalid mode, prevent the navigation.
<LegacyButton // For example, the event bubbles up when the icon embedded in the disabled button is clicked.
rounded="full" if (!isValidMode) {
variant={isValidMode ? 'contained' : 'disabled'} event.preventDefault();
disabled={!isValidMode} }
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info }}
className={classnames({ 'ml-2': !isFirst })} // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
onClick={() => {}}
> >
{t(`Modes:${mode.displayName}`)} {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
</LegacyButton> <LegacyButton
</Link> rounded="full"
); variant={isValidMode ? 'contained' : 'disabled'}
})} disabled={!isValidMode}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
onClick={() => {}}
>
{t(`Modes:${mode.displayName}`)}
</LegacyButton>
</Link>
);
})}
</div>
</StudyListExpandedRow> </StudyListExpandedRow>
), ),
onClickRow: () => onClickRow: () =>