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

fix(DataSource): migrate configuration dialog to ui-next components (#5626)

Browse Source 
* Fix to show data source on study list

* Update Button in Dialog select rows

* Updated legacy colors, small design updates

* Update dialog sizing
This commit is contained in:
Dan Rukas 2025-12-10 16:38:25 -05:00 committed by GitHub
parent 3a5def6eb7
commit c0f39aeb51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
extensions/default/src/Components/DataSourceConfigurationComponent.tsx
View File

@ -28,9 +28,9 @@ function DataSourceConfigurationComponent({
return;
}
const { factory: configurationAPIFactory } = customizationService.getCustomization(
activeDataSourceDef.configuration.configurationAPI
) ?? { factory: () => null };
const configurationAPIFactory =
customizationService.getCustomization(activeDataSourceDef.configuration.configurationAPI) ??
(() => null);
if (!configurationAPIFactory) {
return;
@ -66,6 +66,7 @@ function DataSourceConfigurationComponent({
show({
content: DataSourceConfigurationModalComponent,
title: t('Configure Data Source'),
containerClassName: 'max-w-3xl',
contentProps: {
configurationAPI,
configuredItems,

35
extensions/default/src/Components/ItemListComponent.tsx
View File

@ -2,8 +2,7 @@ import classNames from 'classnames';
import React, { ReactElement, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useSystem } from '@ohif/core';
import { Button, InputFilterText } from '@ohif/ui';
import { Icons } from '@ohif/ui-next';
import { Button, Icons, InputFilter } from '@ohif/ui-next';
import { Types } from '@ohif/core';
type ItemListComponentProps = {
@ -32,25 +31,30 @@ function ItemListComponent({
return (
<div className="flex min-h-[1px] grow flex-col gap-4">
<div className="flex items-center justify-between">
<div className="text-primary-light text-[20px]">{t(`Select ${itemLabel}`)}</div>
<InputFilterText
<div className="text-highlight text-xl">{t(`Select ${itemLabel}`)}</div>
<InputFilter
className="max-w-[40%] grow"
value={filterValue}
onDebounceChange={setFilterValue}
placeholder={t(`Search ${itemLabel} list`)}
></InputFilterText>
onChange={setFilterValue}
>
<InputFilter.SearchIcon />
<InputFilter.Input
placeholder={t(`Search ${itemLabel} list`)}
className="pl-8 pr-9"
/>
<InputFilter.ClearButton className="text-primary mr-0.5 p-0.5" />
</InputFilter>
</div>
<div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
{itemList == null ? (
<LoadingIndicatorProgress className={'h-full w-full'} />
) : itemList.length === 0 ? (
<div className="text-primary-light flex h-full flex-col items-center justify-center px-6 py-4">
<div className="text-highlight flex h-full flex-col items-center justify-center px-6 py-4">
<Icons.ToolMagnify className="mb-4" />
<span>{t(`No ${itemLabel} available`)}</span>
</div>
) : (
<>
<div className="bg-secondary-dark px-3 py-1.5 text-white">{t(itemLabel)}</div>
<div className="bg-popover text-foreground px-3 py-1.5">{t(itemLabel)}</div>
<div className="ohif-scrollbar overflow-auto">
{itemList
.filter(
@ -58,23 +62,24 @@ function ItemListComponent({
!filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())
)
.map(item => {
const border =
'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
const border = 'rounded border-transparent border-b-input border-[1px]';
return (
<div
className={classNames(
'hover:text-primary-light hover:bg-primary-dark group mx-2 flex items-center justify-between px-6 py-2',
'hover:text-highlight hover:bg-muted group mx-2 flex items-center justify-between px-6 py-2',
border
)}
key={item.id}
>
<div>{item.name}</div>
<div className="text-muted-foreground">{item.name}</div>
<Button
onClick={() => onItemClicked(item)}
className="invisible group-hover:visible"
endIcon={<Icons.ByName name="arrow-left" />}
variant="default"
size="sm"
>
{t('Select')}
<Icons.ChevronRight className="ml-2 h-3 w-3" />
</Button>
</div>
);