Add dropable area to step [SCI-6814]

app/assets/stylesheets/steps/step.scss

@@ -111,6 +111,34 @@
   &.showing-comments {
     border: 1px dotted $brand-primary;
   }
+
+  .drop-message {
+    @include font-h3;
+    align-items: center;
+    color: $brand-primary;
+    display: none;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &.draging-file {
+    background-color: $brand-focus-light;
+    position: relative;
+
+    .drop-message {
+      display: flex;
+    }
+
+    *:not(.drop-message) {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
 }
 
 .step-element-header {
@@ -137,7 +165,12 @@
   }
 
   .step-element-controls {
-    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, $color-concrete 15%, $color-concrete 100%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      $color-concrete 15%,
+      $color-concrete 100%
+    );
     display: flex;
     margin-left: auto;
     position: absolute;

app/javascript/vue/protocol/mixins/attachments.js

@@ -11,6 +11,12 @@ export default {
     };
   },
   methods: {
+    dropFile(e) {
+      if (!this.showFileModal && e.dataTransfer && e.dataTransfer.files.length) {
+        this.dragingFile = false;
+        this.uploadFiles(e.dataTransfer.files);
+      }
+    },
     uploadFiles(files) {
       const filesToUploadCntr = files.length;
       let filesUploadedCntr = 0;

app/javascript/vue/protocol/step.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="step-container"
        :id="`stepContainer${step.id}`"
-       :class="{'showing-comments': showCommentsSidebar}"
+       @drop.prevent="dropFile"
+       @dragenter.prevent="!showFileModal ? dragingFile = true : null"
+       @dragleave.prevent="!showFileModal ? dragingFile = false : null"
+       @dragover.prevent
+       :class="{ 'draging-file': dragingFile, 'showing-comments': showCommentsSidebar }"
   >
+    <div class="drop-message">
+      {{ i18n.t('protocols.steps.drop_message', {position: step.attributes.position + 1}) }}
+    </div>
     <div class="step-header">
       <a class="step-collapse-link"
            :href="'#stepBody' + step.id"
@@ -123,7 +130,8 @@
         attachments: [],
         confirmingDelete: false,
         showFileModal: false,
-        showCommentsSidebar: false
+        showCommentsSidebar: false,
+        dragingFile: false
       }
     },
     mixins: [AttachmentsMixin],

config/locales/en.yml

@@ -2515,6 +2515,7 @@ en:
       comments: "Comments"
       empty_checklist: "No items"
       comment_title: "%{user} at %{time}:"
+      drop_message: "Drop file to add to step %{position}"
       insert:
         button: 'Insert'
         title: 'insert  content'