From 63730358b69b00702e7369dbc8715f77928bf5e6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 17 May 2021 19:29:03 +0300
Subject: [PATCH] Fix drag-n-drop indication

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+extensions/notice.module.css | 2 +-
 src/renderer/components/hotbar/hotbar-cell.tsx        | 2 +-
 src/renderer/components/input/drop-file-input.scss    | 7 ++-----
 src/renderer/components/input/drop-file-input.tsx     | 8 +++++++-
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/+extensions/notice.module.css b/src/renderer/components/+extensions/notice.module.css
index 200855b549..5cc5260092 100644
--- a/src/renderer/components/+extensions/notice.module.css
+++ b/src/renderer/components/+extensions/notice.module.css
@@ -20,7 +20,7 @@
  */
 
 .notice {
-  @apply p-8 flex flex-col gap-2 mb-14 rounded-lg;
+  @apply p-8 flex flex-col gap-2 mb-14 mt-3 rounded-lg;
   background-color: var(--noticeBackground);
   border: 1px solid var(--boxShadow);
   color: var(--textColorTertiary);
diff --git a/src/renderer/components/hotbar/hotbar-cell.tsx b/src/renderer/components/hotbar/hotbar-cell.tsx
index aa19faa052..c9e75e08fd 100644
--- a/src/renderer/components/hotbar/hotbar-cell.tsx
+++ b/src/renderer/components/hotbar/hotbar-cell.tsx
@@ -8,7 +8,7 @@ import { cssNames } from "../../utils";
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children?: ReactNode;
   index: number;
-  innerRef?: React.LegacyRef<HTMLDivElement>;
+  innerRef?: React.Ref<HTMLDivElement>;
 }
 
 export function HotbarCell({ innerRef, children, className, ...rest }: Props) {
diff --git a/src/renderer/components/input/drop-file-input.scss b/src/renderer/components/input/drop-file-input.scss
index 5a6aae99c8..aa0ca4f9c1 100644
--- a/src/renderer/components/input/drop-file-input.scss
+++ b/src/renderer/components/input/drop-file-input.scss
@@ -21,10 +21,7 @@
 
 .DropFileInput {
   &.droppable {
-    box-shadow: 0 0 0 5px $primary; // fixme: might not work sometimes
-
-    > * {
-      pointer-events: none;
-    }
+    box-shadow: inset 0 0 0 6px $primary;
+    transition: all 0.3s;
   }
 }
\ No newline at end of file
diff --git a/src/renderer/components/input/drop-file-input.tsx b/src/renderer/components/input/drop-file-input.tsx
index 276fb8d839..e3c9b512aa 100644
--- a/src/renderer/components/input/drop-file-input.tsx
+++ b/src/renderer/components/input/drop-file-input.tsx
@@ -39,15 +39,21 @@ export interface DropFileMeta<T extends HTMLElement = any> {
 @observer
 export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
   @observable dropAreaActive = false;
+  dragCounter = 0; // Counter preventing firing onDragLeave() too early (https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element)
 
   @autobind()
   onDragEnter() {
+    this.dragCounter++;
     this.dropAreaActive = true;
   }
 
   @autobind()
   onDragLeave() {
-    this.dropAreaActive = false;
+    this.dragCounter--;
+
+    if (this.dragCounter == 0) {
+      this.dropAreaActive = false;
+    }
   }
 
   @autobind()