diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUpload.css b/extensions/cornerstone/src/components/DicomUpload/DicomUpload.css deleted file mode 100644 index d37d2a6a6..000000000 --- a/extensions/cornerstone/src/components/DicomUpload/DicomUpload.css +++ /dev/null @@ -1,23 +0,0 @@ -.dicom-upload-drop-area-border-dash { - background-image: repeating-linear-gradient( - to right, - #7bb2ce 0%, - #7bb2ce 50%, - transparent 50%, - transparent 100% - ), - repeating-linear-gradient(to right, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%), - repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%), - repeating-linear-gradient(to bottom, #7bb2ce 0%, #7bb2ce 50%, transparent 50%, transparent 100%); - background-position: - left top, - left bottom, - left top, - right top; - background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; - background-size: - 20px 3px, - 20px 3px, - 3px 20px, - 3px 20px; -} diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx index 8284ee070..dd91df875 100644 --- a/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx +++ b/extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx @@ -5,8 +5,8 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import DicomFileUploader from '../../utils/DicomFileUploader'; import DicomUploadProgress from './DicomUploadProgress'; -import { Button, ButtonEnums } from '@ohif/ui'; -import './DicomUpload.css'; +import { Button } from '@ohif/ui-next'; +// Removed dashed border CSS; using simple 1px solid border with muted foreground color type DicomUploadProps = { dataSource; @@ -15,7 +15,8 @@ type DicomUploadProps = { }; function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): ReactElement { - const baseClassNames = 'min-h-[480px] flex flex-col bg-black select-none'; + const baseClassNames = + 'min-h-[375px] flex flex-col bg-black select-none rounded-lg overflow-hidden'; const [dicomFileUploaderArr, setDicomFileUploaderArr] = useState([]); const onDrop = useCallback(async acceptedFiles => { @@ -34,9 +35,10 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R {({ getRootProps }) => (
-
+
(
)} @@ -60,7 +67,8 @@ function DicomUpload({ dataSource, onComplete, onStarted }: DicomUploadProps): R {({ getRootProps, getInputProps }) => (
)}
-
or drag images or folders here
-
(DICOM files supported)
+
or drag images or folders here
+
(DICOM files supported)
)} diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx index e1de213a6..dd3f4d441 100644 --- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx +++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; import PropTypes from 'prop-types'; import { useSystem } from '@ohif/core'; -import { Button } from '@ohif/ui'; +import { Button } from '@ohif/ui-next'; import { Icons } from '@ohif/ui-next'; import DicomFileUploader, { EVENTS, @@ -276,7 +276,7 @@ function DicomUploadProgress({ const getNumCompletedAndTimeRemainingComponent = (): ReactElement => { return ( -
+
{numFilesCompleted === dicomFileUploaderArr.length ? ( <> {`${dicomFileUploaderArr.length} ${ @@ -308,7 +308,7 @@ function DicomUploadProgress({ @@ -337,11 +337,11 @@ function DicomUploadProgress({ const getPercentCompleteComponent = (): ReactElement => { return ( -
+
{numFilesCompleted === dicomFileUploaderArr.length ? ( <> -
+
{numFails > 0 ? `Completed with ${numFails} ${numFails > 1 ? 'errors' : 'error'}!` : 'Completed!'} @@ -359,7 +359,7 @@ function DicomUploadProgress({ >
-
{`${getPercentCompleteRounded()}%`}
+
{`${getPercentCompleteRounded()}%`}
{getShowFailedOnlyIconComponent()}
diff --git a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx index 37277d752..4ff3d0078 100644 --- a/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx +++ b/extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx @@ -56,7 +56,7 @@ const DicomUploadProgressItem = memo( return ( ); case UploadStatus.InProgress: @@ -71,7 +71,7 @@ const DicomUploadProgressItem = memo( }; return ( -
+
{getStatusIcon()}
diff --git a/extensions/cornerstone/src/customizations/miscCustomization.ts b/extensions/cornerstone/src/customizations/miscCustomization.ts index 073e38921..a19f3c084 100644 --- a/extensions/cornerstone/src/customizations/miscCustomization.ts +++ b/extensions/cornerstone/src/customizations/miscCustomization.ts @@ -1,6 +1,12 @@ import { CinePlayer } from '@ohif/ui-next'; import DicomUpload from '../components/DicomUpload/DicomUpload'; +// Provide a wider default container for the DICOM Upload modal, without +// affecting other dialogs. We attach a static property that WorkList reads. +const DicomUploadWithSize = Object.assign(DicomUpload, { + containerClassName: 'max-w-3xl', +}); + export default { cinePlayer: CinePlayer, autoCineModalities: ['OT', 'US'], @@ -11,6 +17,6 @@ export default { onBeforeDicomStore: ({ dicomDict, measurementData, naturalizedReport }) => { return dicomDict; }, - dicomUploadComponent: DicomUpload, + dicomUploadComponent: DicomUploadWithSize, codingValues: {}, }; diff --git a/platform/app/src/routes/WorkList/WorkList.tsx b/platform/app/src/routes/WorkList/WorkList.tsx index f86bdf6f7..9c97426ea 100644 --- a/platform/app/src/routes/WorkList/WorkList.tsx +++ b/platform/app/src/routes/WorkList/WorkList.tsx @@ -524,6 +524,7 @@ function WorkList({ DicomUploadComponent && dataSource.getConfig()?.dicomUploadEnabled ? { title: 'Upload files', + containerClassName: DicomUploadComponent?.containerClassName, closeButton: true, shouldCloseOnEsc: false, shouldCloseOnOverlayClick: false,