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

feat: improve menu modals customizations (#5011)

Browse Source
This commit is contained in:
Pedro Köhler 2025-05-02 15:45:39 -03:00 committed by GitHub
parent ff974e2a03
commit 7dbe5e37b0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
extensions/default/src/ViewerLayout/ViewerHeader.tsx
View File

@ -8,6 +8,7 @@ import { Toolbar } from '../Toolbar/Toolbar';
import HeaderPatientInfo from './HeaderPatientInfo';
import { PatientInfoVisibility } from './HeaderPatientInfo/HeaderPatientInfo';
import { preserveQueryParameters } from '@ohif/app';
import { Types } from '@ohif/core';
function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }>) {
const { servicesManager, extensionManager, commandsManager } = useSystem();
@ -38,28 +39,34 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
const { t } = useTranslation();
const { show } = useModal();
const AboutModal = customizationService.getCustomization('ohif.aboutModal');
const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal');
const AboutModal = customizationService.getCustomization(
'ohif.aboutModal'
) as Types.MenuComponentCustomization;
const UserPreferencesModal = customizationService.getCustomization(
'ohif.userPreferencesModal'
) as Types.MenuComponentCustomization;
const menuOptions = [
{
title: t('Header:About'),
title: AboutModal?.menuTitle ?? t('Header:About'),
icon: 'info',
onClick: () =>
show({
content: AboutModal,
title: t('AboutModal:About OHIF Viewer'),
containerClassName: 'max-w-md',
title: AboutModal?.title ?? t('AboutModal:About OHIF Viewer'),
containerClassName: AboutModal?.containerClassName ?? 'max-w-md',
}),
},
{
title: t('Header:Preferences'),
title: UserPreferencesModal.menuTitle ?? t('Header:Preferences'),
icon: 'settings',
onClick: () =>
show({
content: UserPreferencesModal,
title: t('UserPreferencesModal:User preferences'),
containerClassName: 'flex max-w-4xl p-6 flex-col',
title: UserPreferencesModal.title ?? t('UserPreferencesModal:User preferences'),
containerClassName:
UserPreferencesModal?.containerClassName ?? 'flex max-w-4xl p-6 flex-col',
}),
},
];

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

@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
import filtersMeta from './filtersMeta.js';
import { useAppConfig } from '@state';
import { useDebounce, useSearchParams } from '@hooks';
import { utils } from '@ohif/core';
import { utils, Types as coreTypes } from '@ohif/core';
import {
StudyListExpandedRow,
@ -465,28 +465,33 @@ function WorkList({
const hasStudies = numOfStudies > 0;
const AboutModal = customizationService.getCustomization('ohif.aboutModal');
const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal');
const AboutModal = customizationService.getCustomization(
'ohif.aboutModal'
) as coreTypes.MenuComponentCustomization;
const UserPreferencesModal = customizationService.getCustomization(
'ohif.userPreferencesModal'
) as coreTypes.MenuComponentCustomization;
const menuOptions = [
{
title: t('Header:About'),
title: AboutModal?.menuTitle ?? t('Header:About'),
icon: 'info',
onClick: () =>
show({
content: AboutModal as React.ComponentType,
title: t('AboutModal:About OHIF Viewer'),
containerClassName: 'max-w-md ',
content: AboutModal,
title: AboutModal?.title ?? t('AboutModal:About OHIF Viewer'),
containerClassName: AboutModal?.containerClassName ?? 'max-w-md',
}),
},
{
title: t('Header:Preferences'),
title: UserPreferencesModal.menuTitle ?? t('Header:Preferences'),
icon: 'settings',
onClick: () =>
show({
title: t('UserPreferencesModal:User preferences'),
content: UserPreferencesModal as React.ComponentType,
containerClassName: 'flex max-w-4xl flex-col',
title: UserPreferencesModal.title ?? t('UserPreferencesModal:User preferences'),
containerClassName:
UserPreferencesModal?.containerClassName ?? 'flex max-w-4xl p-6 flex-col',
}),
},
];

7
platform/core/src/services/CustomizationService/types.ts
View File

@ -31,7 +31,14 @@ export interface CallbackCustomization extends BaseCustomization {
callbacks: Array<(...props: any) => any>;
}
export type MenuComponentCustomization = React.ComponentType & {
menuTitle?: string;
title?: string;
containerClassName?: string;
};
export type Customization =
| MenuComponentCustomization
| React.ComponentType
| BaseCustomization
| LabelCustomization