From d0cc3155f101d8029b396844fa53bbf090b29ab4 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Wed, 20 Jul 2022 13:39:04 +0200
Subject: [PATCH] Only activate overlay when dragging files [SCI-6997] (#4272)

---
 .../stylesheets/steps/components/checklist.scss      |  2 +-
 app/javascript/vue/protocol/step.vue                 | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss
index a8067418f..ee339e878 100644
--- a/app/assets/stylesheets/steps/components/checklist.scss
+++ b/app/assets/stylesheets/steps/components/checklist.scss
@@ -50,7 +50,7 @@
   }
 
   .sci-checkbox-container {
-    margin: 10px 0;
+    margin: 16px 0;
 
     &.disabled {
       pointer-events: none;
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 25daf9763..e48f8b3aa 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -2,7 +2,7 @@
   <div ref="stepContainer" class="step-container"
        :id="`stepContainer${step.id}`"
        @drop.prevent="dropFile"
-       @dragenter.prevent="!showFileModal ? dragingFile = true : null"
+       @dragenter.prevent="dragEnter($event)"
        @dragover.prevent
        :class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar, 'editing-name': editingName }"
   >
@@ -250,6 +250,16 @@
       }
     },
     methods: {
+      dragEnter(e) {
+        if (this.showFileModal) return;
+
+        // Detect if dragged element is a file
+        // https://stackoverflow.com/a/8494918
+        let dt = e.dataTransfer;
+        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
+          this.dragingFile = true;
+        }
+      },
       loadAttachments() {
         $.get(this.urls.attachments_url, (result) => {
           this.attachments = result.data