Fluent: improve dropzone

microsoft · Oct 17, 2024 · c8b8244 · c8b8244
1 parent 4744d69
commit c8b8244
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/...ml/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png b/...ml/drag-and-drop-upload-js-fluent-theme-applied-drag-and-drop-upload-2-snap.png
diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.module.css b/packages/fluent-theme/src/components/dropZone/DropZone.module.css
@@ -8,11 +8,11 @@
   place-content: center;
   place-items: center;
   position: absolute;
+  transition: all var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone--droppable {
-  background-color: #e00;
-  color: White;
+  background-color: var(--webchat-colorBrandBackground2Hover);
 }
 
 :global(.webchat-fluent) .sendbox__attachment-drop-zone-icon {

diff --git a/packages/fluent-theme/src/components/dropZone/DropZone.tsx b/packages/fluent-theme/src/components/dropZone/DropZone.tsx
@@ -62,12 +62,19 @@ const DropZone = (props: { readonly onFilesAdded: (files: File[]) => void }) =>
 
     const handleDragLeave = () => --entranceCounter <= 0 && setDropZoneState(false);
 
+    const handleDragEnd = () => {
+      entranceCounter = 0;
+      setDropZoneState(false);
+    };
+
     document.addEventListener('dragenter', handleDragEnter, false);
     document.addEventListener('dragleave', handleDragLeave, false);
+    document.addEventListener('dragend', handleDragEnd, false);
 
     return () => {
       document.removeEventListener('dragenter', handleDragEnter);
       document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragend', handleDragEnd);
     };
   }, [setDropZoneState]);