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 HeaderPatientInfo from './HeaderPatientInfo';
import { PatientInfoVisibility } from './HeaderPatientInfo/HeaderPatientInfo'; import { PatientInfoVisibility } from './HeaderPatientInfo/HeaderPatientInfo';
import { preserveQueryParameters } from '@ohif/app'; import { preserveQueryParameters } from '@ohif/app';
import { Types } from '@ohif/core';
function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }>) { function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }>) {
const { servicesManager, extensionManager, commandsManager } = useSystem(); const { servicesManager, extensionManager, commandsManager } = useSystem();
@ -38,28 +39,34 @@ function ViewerHeader({ appConfig }: withAppTypes<{ appConfig: AppTypes.Config }
const { t } = useTranslation(); const { t } = useTranslation();
const { show } = useModal(); const { show } = useModal();
const AboutModal = customizationService.getCustomization('ohif.aboutModal'); const AboutModal = customizationService.getCustomization(
const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal'); 'ohif.aboutModal'
) as Types.MenuComponentCustomization;
const UserPreferencesModal = customizationService.getCustomization(
'ohif.userPreferencesModal'
) as Types.MenuComponentCustomization;
const menuOptions = [ const menuOptions = [
{ {
title: t('Header:About'), title: AboutModal?.menuTitle ?? t('Header:About'),
icon: 'info', icon: 'info',
onClick: () => onClick: () =>
show({ show({
content: AboutModal, content: AboutModal,
title: t('AboutModal:About OHIF Viewer'), title: AboutModal?.title ?? t('AboutModal:About OHIF Viewer'),
containerClassName: 'max-w-md', containerClassName: AboutModal?.containerClassName ?? 'max-w-md',
}), }),
}, },
{ {
title: t('Header:Preferences'), title: UserPreferencesModal.menuTitle ?? t('Header:Preferences'),
icon: 'settings', icon: 'settings',
onClick: () => onClick: () =>
show({ show({
content: UserPreferencesModal, content: UserPreferencesModal,
title: t('UserPreferencesModal:User preferences'), title: UserPreferencesModal.title ?? t('UserPreferencesModal:User preferences'),
containerClassName: 'flex max-w-4xl p-6 flex-col', 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 filtersMeta from './filtersMeta.js';
import { useAppConfig } from '@state'; import { useAppConfig } from '@state';
import { useDebounce, useSearchParams } from '@hooks'; import { useDebounce, useSearchParams } from '@hooks';
import { utils } from '@ohif/core'; import { utils, Types as coreTypes } from '@ohif/core';
import { import {
StudyListExpandedRow, StudyListExpandedRow,
@ -465,28 +465,33 @@ function WorkList({
const hasStudies = numOfStudies > 0; const hasStudies = numOfStudies > 0;
const AboutModal = customizationService.getCustomization('ohif.aboutModal'); const AboutModal = customizationService.getCustomization(
const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal'); 'ohif.aboutModal'
) as coreTypes.MenuComponentCustomization;
const UserPreferencesModal = customizationService.getCustomization(
'ohif.userPreferencesModal'
) as coreTypes.MenuComponentCustomization;
const menuOptions = [ const menuOptions = [
{ {
title: t('Header:About'), title: AboutModal?.menuTitle ?? t('Header:About'),
icon: 'info', icon: 'info',
onClick: () => onClick: () =>
show({ show({
content: AboutModal as React.ComponentType, content: AboutModal,
title: t('AboutModal:About OHIF Viewer'), title: AboutModal?.title ?? t('AboutModal:About OHIF Viewer'),
containerClassName: 'max-w-md ', containerClassName: AboutModal?.containerClassName ?? 'max-w-md',
}), }),
}, },
{ {
title: t('Header:Preferences'), title: UserPreferencesModal.menuTitle ?? t('Header:Preferences'),
icon: 'settings', icon: 'settings',
onClick: () => onClick: () =>
show({ show({
title: t('UserPreferencesModal:User preferences'),
content: UserPreferencesModal as React.ComponentType, 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>; callbacks: Array<(...props: any) => any>;
} }
export type MenuComponentCustomization = React.ComponentType & {
menuTitle?: string;
title?: string;
containerClassName?: string;
};
export type Customization = export type Customization =
| MenuComponentCustomization
| React.ComponentType | React.ComponentType
| BaseCustomization | BaseCustomization
| LabelCustomization | LabelCustomization