diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.css b/platform/viewer/src/connectedComponents/ViewerLocalFileData.css index 2e6f396fc..8b6f9324c 100644 --- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.css +++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.css @@ -13,3 +13,8 @@ .drag-drop-instructions h4 { color: var(--text-secondary-color); } + +.link-dialog { + color: var(--active-color); + cursor: pointer; +} diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js index b17d60ab2..e36f90718 100644 --- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js +++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js @@ -12,6 +12,44 @@ import { withTranslation } from 'react-i18next'; const { OHIFStudyMetadata } = metadata; const { studyMetadataManager, updateMetaDataManager } = utils; +const dropZoneLinkDialog = (onDrop, i18n, dir) => { + return ( + + {({ getRootProps, getInputProps }) => ( + + {dir ? ( + + {i18n('Load folders')} + + + ) : ( + + {i18n('Load files')} + + + )} + + )} + + ); +}; + +const linksDialogMessage = (onDrop, i18n) => { + return ( + <> + {i18n('Or click to ')} + {dropZoneLinkDialog(onDrop, i18n)} + {i18n(' or ')} + {dropZoneLinkDialog(onDrop, i18n, true)} + {i18n(' from dialog')} + + ); +}; + class ViewerLocalFileData extends Component { static propTypes = { studies: PropTypes.array, @@ -73,7 +111,7 @@ class ViewerLocalFileData extends Component { } return ( - + {({ getRootProps, getInputProps }) => (
{this.state.studies ? ( @@ -96,15 +134,10 @@ class ViewerLocalFileData extends Component { 'Drag and Drop DICOM files here to load them in the Viewer' )} -

- {this.props.t( - "Or click to load the browser's file selector" - )} -

+

{linksDialogMessage(onDrop, this.props.t)}

)}
- )}