fixes #3730

Closes #3730

Merge request studip/studip!2615

1 files changed, 30 insertions, 9 deletions

diff --git a/resources/vue/components/stock-images/UploadBox.vue b/resources/vue/components/stock-images/UploadBox.vue
index a0941dd..80de746 100644
--- a/resources/vue/components/stock-images/UploadBox.vue
+++ b/resources/vue/components/stock-images/UploadBox.vue
@@ -1,13 +1,17 @@
 <template>
     <label id="stock-images-upload-box-drag-area">
-        <div class="holder">
+        <div class="holder" :class="{dragging: dragging}">
             <div class="box-centered">
                 <div class="icon-upload">
-                    <studip-icon shape="upload" :size="100" alt="" />
+                    <studip-icon shape="upload" :size="100" alt="" :role="dragging ? 'info_alt' : 'clickable' "/>
                 </div>
                 <strong>{{ $gettext('Bild auswählen oder per Drag & Drop hierher ziehen') }}</strong>
                 <div class="upload-button-holder">
-                    <input type="file" name="file" tabindex="-1" accept="image/*" ref="upload" @change="onUpload" />
+                    <input type="file" name="file" tabindex="-1" accept="image/*" ref="upload"
+                           @change="onUpload"
+                           @dragenter="setDragging(true)"
+                           @dragleave="setDragging(false)"
+                    />
                 </div>
             </div>
         </div>
@@ -16,18 +20,23 @@
 
 <script>
 export default {
-    data: () => ({}),
+    data: () => ({
+        dragging: false,
+    }),
     methods: {
         onUpload() {
             const files = this.$refs.upload.files;
             const file = files[0];
             this.$emit('upload', { file });
         },
+        setDragging(state) {
+            this.dragging = state;
+        },
     },
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 #stock-images-upload-box-drag-area {
     background-color: var(--content-color-20);
     height: 100%;
@@ -45,8 +54,16 @@ export default {
     display: flex;
     height: 100%;
     justify-content: center;
-    padding-bottom: 4px;
     padding: 0;
+    position: relative;
+
+    &.dragging {
+        background-color: var(--base-color);
+
+        .icon-upload + strong {
+            color: var(--white);
+        }
+    }
 }
 
 .box-centered {
@@ -61,13 +78,17 @@ export default {
     line-height: 1.2;
     display: block;
     font-weight: 500;
-    margin: 0 0 14px;
     text-align: center;
-    margin-left: 2em;
-    margin-right: 2em;
+    margin: 0 2em 14px;
 }
 
 .upload-button-holder input[type='file'] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
     opacity: 0;
     width: 100%;
     height: 100%;