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 }) => (
-
+
-
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,