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

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

@ -336,47 +336,56 @@ function WorkList({
: []
}
>
{appConfig.loadedModes.map((mode, i) => {
const isFirst = i === 0;
<div className="flex flex-row gap-2">
{appConfig.loadedModes.map((mode, i) => {
const isFirst = i === 0;
const modalitiesToCheck = modalities.replaceAll('/', '\\');
const modalitiesToCheck = modalities.replaceAll('/', '\\');
const isValidMode = mode.isValidMode({
modalities: modalitiesToCheck,
study,
});
// 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
// mode.routeName
// mode.routes[x].path
// 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
const query = new URLSearchParams();
if (filterValues.configUrl) {
query.append('configUrl', filterValues.configUrl);
}
query.append('StudyInstanceUIDs', studyInstanceUid);
return (
<Link
key={i}
to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
''}?${query.toString()}`}
// 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*/}
<LegacyButton
rounded="full"
variant={isValidMode ? 'contained' : 'disabled'}
disabled={!isValidMode}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
className={classnames({ 'ml-2': !isFirst })}
onClick={() => {}}
const isValidMode = mode.isValidMode({
modalities: modalitiesToCheck,
study,
});
// 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
// mode.routeName
// mode.routes[x].path
// 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
const query = new URLSearchParams();
if (filterValues.configUrl) {
query.append('configUrl', filterValues.configUrl);
}
query.append('StudyInstanceUIDs', studyInstanceUid);
return (
<Link
className={isValidMode ? '' : 'cursor-not-allowed'}
key={i}
to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
''}?${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}`}
>
{t(`Modes:${mode.displayName}`)}
</LegacyButton>
</Link>
);
})}
{/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
<LegacyButton
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>
),
onClickRow: () =>