add drag-n-drop indicator, remove debug indicator

cockpit-project · Nov 18, 2024 · c28c79a · c28c79a
1 parent 91066a7
commit c28c79a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -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<React.SetStateAction<boolean>>,
 }) => {
     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<boolean>();
     const folderViewRef = useRef<HTMLDivElement>(null);
-    console.log(folderViewRef);
 
     function calculateBoxPerRow () {
         const boxes = document.querySelectorAll(".fileview tbody > tr") as NodeListOf<HTMLElement>;
@@ -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 = ({
                         </Tr>
                     </Thead>
                     <Tbody>
+                        {dragDropActive &&
+                            <Tr className="drag-drop-upload">
+                                <Td colSpan={5}>
+                                    <Bullseye>
+                                        <EmptyStatePanel
+                                          icon={UploadIcon}
+                                          paragraph={_("Drop files to upload")}
+                                        />
+                                    </Bullseye>
+                                </Td>
+                            </Tr>}
                         {sortedFiles.map((file, rowIndex) =>
                             <Row
                               key={rowIndex}