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

fix(DicomUpload): Fix upload form and some scrollbars styles (#5125)

Browse Source
This commit is contained in:
Alexey Klimovich 2025-07-17 02:38:11 +08:00 committed by GitHub
parent 5977326665
commit 26d77fb149
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
View File

@ -259,22 +259,24 @@ function DicomUploadProgress({
}, [getPercentCompleteRounded, percentComplete]); }, [getPercentCompleteRounded, percentComplete]);
/** /**
* Gets the css style for the 'n of m' (files completed) text. The only css attribute * Gets the CSS style for the 'n of m' (files completed) text.
* of the style is width such that the 'n of m' is always a fixed width and thus * The width changes according to numFilesCompleted and can vary,
* as each file completes uploading the text on screen does not constantly shift * e.g. "1 of 200", "10 of 200", "100 of 200" all have differents width.
* left and right.
*/ */
const getNofMFilesStyle = useCallback(() => { const getNofMFilesStyle = useCallback(() => {
// the number of digits accounts for the digits being on each side of the ' of ' // the number of digits accounts for the digits being on each side of the ' of '
const numDigits = 2 * dicomFileUploaderArr.length.toString().length; const numDigits =
// the number of digits + 2 spaces and 2 characters for ' of ' numFilesCompleted.toString().length + dicomFileUploaderArr.length.toString().length;
const numChars = numDigits + 4; // The number of digits + 3 additional characters (accounts for ' of ').
// Even though intuitively 4 should be better, this is the most accurate width.
// The font may play a part in this discrepancy.
const numChars = numDigits + 3;
return { width: `${numChars}ch` }; return { width: `${numChars}ch` };
}, []); }, [numFilesCompleted]);
const getNumCompletedAndTimeRemainingComponent = (): ReactElement => { const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
return ( return (
<div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg"> <div className="bg-primary-dark flex h-14 items-center px-1 pb-4 text-lg text-white">
{numFilesCompleted === dicomFileUploaderArr.length ? ( {numFilesCompleted === dicomFileUploaderArr.length ? (
<> <>
<span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${ <span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{`${dicomFileUploaderArr.length} ${
@ -290,21 +292,24 @@ function DicomUploadProgress({
</> </>
) : ( ) : (
<> <>
<div className="flex flex-wrap">
<span
style={getNofMFilesStyle()}
className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-right')}
>
{`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&nbsp;
</span>
<span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{' files completed.'}</span>
<br />
<span>
{timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''}
</span>
</div>
<span <span
style={getNofMFilesStyle()} className={
className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-end')} 'text-primary hover:text-primary-lightactive:text-aqua-pale ml-auto cursor-pointer whitespace-nowrap'
> }
{`${numFilesCompleted} of ${dicomFileUploaderArr.length}`}&nbsp;
</span>
<span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>{' files completed.'}&nbsp;</span>
<span className={NO_WRAP_ELLIPSIS_CLASS_NAMES}>
{timeRemaining ? `Less than ${getFormattedTimeRemaining()} remaining. ` : ''}
</span>
<span
className={classNames(
NO_WRAP_ELLIPSIS_CLASS_NAMES,
'text-primary hover:text-primary-light active:text-aqua-pale ml-auto cursor-pointer'
)}
onClick={cancelAllUploads} onClick={cancelAllUploads}
> >
Cancel All Uploads Cancel All Uploads
@ -354,7 +359,7 @@ function DicomUploadProgress({
></ProgressLoadingBar> ></ProgressLoadingBar>
</div> </div>
<div className="ml-1 flex w-24 items-center"> <div className="ml-1 flex w-24 items-center">
<div className="w-10 text-right">{`${getPercentCompleteRounded()}%`}</div> <div className="w-10 text-right text-foreground">{`${getPercentCompleteRounded()}%`}</div>
{getShowFailedOnlyIconComponent()} {getShowFailedOnlyIconComponent()}
</div> </div>
</> </>

2
extensions/cornerstone/src/components/DicomUpload/DicomUploadProgressItem.tsx
View File

@ -75,7 +75,7 @@ const DicomUploadProgressItem = memo(
<div className="self-top flex w-0 shrink grow flex-col gap-1"> <div className="self-top flex w-0 shrink grow flex-col gap-1">
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div> <div className="flex w-6 shrink-0 items-center justify-center">{getStatusIcon()}</div>
<div className="overflow-hidden text-ellipsis whitespace-nowrap"> <div className="overflow-hidden text-ellipsis whitespace-nowrap text-white">
{dicomFileUploader.getFileName()} {dicomFileUploader.getFileName()}
</div> </div>
</div> </div>