From 00240896a694caeb2a8447d1ef83b09e3182c271 Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Wed, 28 Feb 2024 07:58:40 +0000
Subject: [PATCH] fixes #3730
Closes #3730
Merge request studip/studip!2615
---
.../vue/components/stock-images/UploadBox.vue | 39 ++++++++++++++-----
1 file changed, 30 insertions(+), 9 deletions(-)
diff --git a/resources/vue/components/stock-images/UploadBox.vue b/resources/vue/components/stock-images/UploadBox.vue
index a0941dd3c15..80de74695b6 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%;
--
GitLab