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; return;
} }
const { factory: configurationAPIFactory } = customizationService.getCustomization( const configurationAPIFactory =
activeDataSourceDef.configuration.configurationAPI customizationService.getCustomization(activeDataSourceDef.configuration.configurationAPI) ??
) ?? { factory: () => null }; (() => null);
if (!configurationAPIFactory) { if (!configurationAPIFactory) {
return; return;
@ -66,6 +66,7 @@ function DataSourceConfigurationComponent({
show({ show({
content: DataSourceConfigurationModalComponent, content: DataSourceConfigurationModalComponent,
title: t('Configure Data Source'), title: t('Configure Data Source'),
containerClassName: 'max-w-3xl',
contentProps: { contentProps: {
configurationAPI, configurationAPI,
configuredItems, 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 React, { ReactElement, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSystem } from '@ohif/core'; import { useSystem } from '@ohif/core';
import { Button, InputFilterText } from '@ohif/ui'; import { Button, Icons, InputFilter } from '@ohif/ui-next';
import { Icons } from '@ohif/ui-next';
import { Types } from '@ohif/core'; import { Types } from '@ohif/core';
type ItemListComponentProps = { type ItemListComponentProps = {
@ -32,25 +31,30 @@ function ItemListComponent({
return ( return (
<div className="flex min-h-[1px] grow flex-col gap-4"> <div className="flex min-h-[1px] grow flex-col gap-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-primary-light text-[20px]">{t(`Select ${itemLabel}`)}</div> <div className="text-highlight text-xl">{t(`Select ${itemLabel}`)}</div>
<InputFilterText <InputFilter
className="max-w-[40%] grow" className="max-w-[40%] grow"
value={filterValue} onChange={setFilterValue}
onDebounceChange={setFilterValue} >
placeholder={t(`Search ${itemLabel} list`)} <InputFilter.SearchIcon />
></InputFilterText> <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>
<div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]"> <div className="relative flex min-h-[1px] grow flex-col bg-black text-[14px]">
{itemList == null ? ( {itemList == null ? (
<LoadingIndicatorProgress className={'h-full w-full'} /> <LoadingIndicatorProgress className={'h-full w-full'} />
) : itemList.length === 0 ? ( ) : 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" /> <Icons.ToolMagnify className="mb-4" />
<span>{t(`No ${itemLabel} available`)}</span> <span>{t(`No ${itemLabel} available`)}</span>
</div> </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"> <div className="ohif-scrollbar overflow-auto">
{itemList {itemList
.filter( .filter(
@ -58,23 +62,24 @@ function ItemListComponent({
!filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase()) !filterValue || item.name.toLowerCase().includes(filterValue.toLowerCase())
) )
.map(item => { .map(item => {
const border = const border = 'rounded border-transparent border-b-input border-[1px]';
'rounded border-transparent border-b-secondary-light border-[1px] hover:border-primary-light';
return ( return (
<div <div
className={classNames( 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 border
)} )}
key={item.id} key={item.id}
> >
<div>{item.name}</div> <div className="text-muted-foreground">{item.name}</div>
<Button <Button
onClick={() => onItemClicked(item)} onClick={() => onItemClicked(item)}
className="invisible group-hover:visible" className="invisible group-hover:visible"
endIcon={<Icons.ByName name="arrow-left" />} variant="default"
size="sm"
> >
{t('Select')} {t('Select')}
<Icons.ChevronRight className="ml-2 h-3 w-3" />
</Button> </Button>
</div> </div>
); );