diff --git a/src/components/manager/ManagerDropBoxContent.js b/src/components/manager/ManagerDropBoxContent.js index 34460c1f6..f8339b12a 100644 --- a/src/components/manager/ManagerDropBoxContent.js +++ b/src/components/manager/ManagerDropBoxContent.js @@ -21,6 +21,7 @@ import { Spin, Statistic, Tree, + Typography, Upload, message, } from "antd"; @@ -47,10 +48,21 @@ import {deleteDropBox, ingestDropBox} from "../../lib/auth/permissions"; import FileDisplay, { VIEWABLE_FILE_EXTENSIONS } from "../display/FileDisplay"; -const DROP_BOX_CONTENT_CONTAINER_STYLE = {display: "flex", flexDirection: "column", gap: "1em"}; -const DROP_BOX_ACTION_CONTAINER_STYLE = {display: "flex", gap: "12px"}; +const DROP_BOX_CONTENT_CONTAINER_STYLE = { display: "flex", flexDirection: "column", gap: 8 }; +const DROP_BOX_ACTION_CONTAINER_STYLE = { + display: "flex", + gap: "12px", + alignItems: "baseline", + position: "sticky", + paddingBottom: 4, + backgroundColor: "white", + boxShadow: "0 12px 12px white, 0 -10px 0 white", + top: 8, + zIndex: 10, +}; +const DROP_BOX_INFO_CONTAINER_STYLE = { display: "flex", gap: "2em", paddingTop: 8 }; -const TREE_CONTAINER_STYLE = {position: "relative", minHeight: 72}; +const TREE_CONTAINER_STYLE = { minHeight: 72, overflowY: "auto" }; const TREE_DROP_ZONE_OVERLAY_STYLE = { position: "absolute", @@ -262,13 +274,16 @@ FileContentsModal.propTypes = { }; -const DropBoxInformation = () => ( +const DropBoxInformation = ({ style }) => ( + `} style={style} /> ); +DropBoxInformation.propTypes = { + style: PropTypes.object, +}; const DROP_BOX_ROOT_KEY = "/"; @@ -564,6 +579,10 @@ const ManagerDropBoxContent = () => { loading={isDeleting} onClick={showFileDeleteModal}> Delete + + + {selectedEntries.length} item{selectedEntries.length === 1 ? "" : "s"} selected + @@ -594,14 +613,15 @@ const ManagerDropBoxContent = () => { description="Encountered an error while trying to access the drop box service" />} - acc + f.size, 0))} - /> - - +
+ acc + f.size, 0))} + /> + +
;