🚸 #1795 - feat: improve drag and drop ux.

maykinmedia · Nov 21, 2023 · b4f774e · b4f774e
1 parent 1b4007f
commit b4f774e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/src/open_inwoner/components/templates/components/Form/FileInput.html b/src/open_inwoner/components/templates/components/Form/FileInput.html
@@ -3,12 +3,10 @@
 <div class="form__control file-input">
     {% render_card direction="vertical" %}
         {% icon icon="upload" icon_position="before" outlined=True %}
-        <div class="inputfile-group">
-            <input class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}>
-            <label class="button button--primary" aria-label="_('Sleep of selecteer bestand')" for="id_file">
-                {% trans 'Sleep of selecteer bestand' %}
-            </label>
-        </div>
+        <input multiple class="file-input__input" id="{{ field.auto_id }}" name="file" type="file"{% if field.field.required %} required{% endif %}>
+        <label class="button button--primary" aria-label="_('Sleep of selecteer bestand')" for="id_file">
+            {% trans 'Sleep of selecteer bestand' %}
+        </label>
     {% endrender_card %}
 
     {% if field.help_text %}<p class="p p--muted p--small">{{ field.help_text }}</p>{% endif %}

diff --git a/src/open_inwoner/js/components/form/FileInput.js b/src/open_inwoner/js/components/form/FileInput.js
@@ -99,6 +99,9 @@ export class FileInput extends Component {
    * Gets called when dragging ends on the card (drop zone).
    */
   onDragLeave(e) {
+    if(e.target !== this.getCard()) {
+      return;
+    }
     this.node.classList.remove('file-input--drag-active')
   }
 

diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -8,6 +8,12 @@
 
   &--drag-active .card:first-child {
     background-color: var(--color-gray-lightest);
+    border-style: dashed;
+  }
+
+  &--drag-active .card__body,
+  .card:first-child [class*='icon'] {
+    pointer-events: none;
   }
 
   .card__body {