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]);
/**
* Gets the css style for the 'n of m' (files completed) text. The only css attribute
* of the style is width such that the 'n of m' is always a fixed width and thus
* as each file completes uploading the text on screen does not constantly shift
* left and right.
* Gets the CSS style for the 'n of m' (files completed) text.
* The width changes according to numFilesCompleted and can vary,
* e.g. "1 of 200", "10 of 200", "100 of 200" all have differents width.
*/
const getNofMFilesStyle = useCallback(() => {
// the number of digits accounts for the digits being on each side of the ' of '
const numDigits = 2 * dicomFileUploaderArr.length.toString().length;
// the number of digits + 2 spaces and 2 characters for ' of '
const numChars = numDigits + 4;
const numDigits =
numFilesCompleted.toString().length + dicomFileUploaderArr.length.toString().length;
// 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` };
}, []);
}, [numFilesCompleted]);
const getNumCompletedAndTimeRemainingComponent = (): ReactElement => {
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 ? (
<>
<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
style={getNofMFilesStyle()}
className={classNames(NO_WRAP_ELLIPSIS_CLASS_NAMES, 'text-end')}
>
{`${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'
)}
className={
'text-primary hover:text-primary-lightactive:text-aqua-pale ml-auto cursor-pointer whitespace-nowrap'
}
onClick={cancelAllUploads}
>
Cancel All Uploads
@ -354,7 +359,7 @@ function DicomUploadProgress({
></ProgressLoadingBar>
</div>
<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()}
</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="flex gap-4">
<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()}
</div>
</div>