diff --git a/src/files-card-body.scss b/src/files-card-body.scss index 5bd9197c..f031b155 100644 --- a/src/files-card-body.scss +++ b/src/files-card-body.scss @@ -16,7 +16,7 @@ text-align: start; } - tbody tr { + tbody tr:not(.drag-drop-upload) { --color-folder: var(--pf-v5-global--primary-color--100); --color-icon: var(--pf-v5-global--Color--400); --focus-width: 1px; @@ -313,11 +313,5 @@ // use all available space when there is not enough files to fill the whole view // so drag&drop works in empty space .fileview-wrapper { - height: 100%; -} - -// DEBUG highlight for drag&drop -.fileview-wrapper.files-drag-hover { - border: solid; - border-color: red; + block-size: 100%; } diff --git a/src/files-card-body.tsx b/src/files-card-body.tsx index 72fcb7ec..28a95e91 100644 --- a/src/files-card-body.tsx +++ b/src/files-card-body.tsx @@ -24,8 +24,9 @@ import { MenuItem, MenuList } from "@patternfly/react-core/dist/esm/components/M import { Spinner } from "@patternfly/react-core/dist/esm/components/Spinner"; import { Text, TextContent, TextVariants } from "@patternfly/react-core/dist/esm/components/Text"; import { Tooltip } from "@patternfly/react-core/dist/esm/components/Tooltip"; +import { Bullseye } from "@patternfly/react-core/dist/esm/layouts/Bullseye"; import { Flex } from "@patternfly/react-core/dist/esm/layouts/Flex"; -import { FolderIcon, SearchIcon } from '@patternfly/react-icons'; +import { FolderIcon, SearchIcon, UploadIcon } from '@patternfly/react-icons'; import { SortByDirection, Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table'; import cockpit from "cockpit"; @@ -158,6 +159,7 @@ export const FilesCardBody = ({ setShowHidden: React.Dispatch>, }) => { const [boxPerRow, setBoxPerRow] = useState(0); + const [dragDropActive, setDragDropActive] = useState(false); const dialogs = useDialogs(); const { addAlert, cwdInfo } = useFilesContext(); const { uploadedFiles } = useContext(UploadContext); @@ -173,7 +175,6 @@ export const FilesCardBody = ({ }, [files]); const isMounted = useRef(); const folderViewRef = useRef(null); - console.log(folderViewRef); function calculateBoxPerRow () { const boxes = document.querySelectorAll(".fileview tbody > tr") as NodeListOf; @@ -288,6 +289,9 @@ export const FilesCardBody = ({ // disable drag & drop when upload is in progress if (!isUploading && folderViewElem !== null) { + if (dragDropCnt === 0) { + setDragDropActive(true); + } dragDropCnt++; folderViewElem.classList.add("files-drag-hover"); } @@ -297,9 +301,10 @@ export const FilesCardBody = ({ event.preventDefault(); event.stopPropagation(); - dragDropCnt-- + dragDropCnt--; if (folderViewElem !== null && dragDropCnt === 0) { folderViewElem.classList.remove("files-drag-hover"); + setDragDropActive(false); } }; @@ -315,6 +320,7 @@ export const FilesCardBody = ({ cockpit.assert(event.dataTransfer !== null, "dataTransfer cannot be null"); dispatchEvent(new CustomEvent('files-drop', { detail: event.dataTransfer.files })); if (folderViewElem !== null) { + setDragDropActive(false); dragDropCnt = 0; folderViewElem.classList.remove("files-drag-hover"); } @@ -601,6 +607,17 @@ export const FilesCardBody = ({ + {dragDropActive && + + + + + + + } {sortedFiles.map((file, rowIndex) =>