Fluent: improve dropzone (#5328)

* Fluent: improve dropzone * Changelog
microsoft · Oct 18, 2024 · ae69d04 · ae69d04
1 parent 7f4b09c
commit ae69d04
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -72,6 +72,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 -  Resolved [#4847](https://github.com/microsoft/BotFramework-WebChat/issues/4847). Migrated to npm workspaces from lerna, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Resolved [#5302](https://github.com/microsoft/BotFramework-WebChat/issues/5302). Migrated to `core-js-pure/Promise.withResolveers` from `p-defer`, in PR [#5301](https://github.com/microsoft/BotFramework-WebChat/pull/5301), by [@compulim](https://github.com/compulim)
 -  Improved message bubble layout in Fluent theme to allow growth beyond 450px up to 75% of container width, in PR [#5324](https://github.com/microsoft/BotFramework-WebChat/pull/5324), by [@OEvgeny](https://github.com/OEvgeny)
+-  Improved drop zone behavior and styling in Fluent theme, in PR [#5328](https://github.com/microsoft/BotFramework-WebChat/pull/5328), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Fixed
 

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]);