add better visual indication for dropping files, make dropzone bigger

This commit is contained in:
Shpuld Shpuldson 2020-06-10 11:01:38 +03:00
parent aa125072b3
commit cd9d732afa
4 changed files with 47 additions and 25 deletions

View file

@ -45,20 +45,6 @@ const mediaUpload = {
this.$emit('all-uploaded')
}
},
fileDrop (e) {
if (e.dataTransfer.files.length > 0) {
e.preventDefault() // allow dropping text like before
this.multiUpload(e.dataTransfer.files)
}
},
fileDrag (e) {
let types = e.dataTransfer.types
if (types.contains('Files')) {
e.dataTransfer.dropEffect = 'copy'
} else {
e.dataTransfer.dropEffect = 'none'
}
},
clearFile () {
this.uploadReady = false
this.$nextTick(() => {

View file

@ -1,10 +1,5 @@
<template>
<div
class="media-upload"
@drop.prevent
@dragover.prevent="fileDrag"
@drop="fileDrop"
>
<div class="media-upload">
<label
class="label"
:title="$t('tool_tip.media_upload')"

View file

@ -82,7 +82,9 @@ const PostStatusForm = {
contentType
},
caret: 0,
pollFormVisible: false
pollFormVisible: false,
showDropIcon: false,
dropStopTimeout: null
}
},
computed: {
@ -248,13 +250,26 @@ const PostStatusForm = {
}
},
fileDrop (e) {
if (e.dataTransfer.files.length > 0) {
if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files
clearTimeout(this.dropStopTimeout)
this.showDropIcon = false
}
},
fileDragStop (e) {
// The false-setting is done with delay because just using leave-events
// directly caused unwanted flickering, this is not perfect either but
// much less noticable.
clearTimeout(this.dropStopTimeout)
this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
},
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy'
if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
clearTimeout(this.dropStopTimeout)
this.showDropIcon = true
}
},
onEmojiInputInput (e) {
this.$nextTick(() => {

View file

@ -6,7 +6,14 @@
<form
autocomplete="off"
@submit.prevent="postStatus(newStatus)"
@dragover.prevent.capture="fileDrag"
>
<div
v-show="showDropIcon"
class="drop-indicator icon-upload"
@dragleave.capture="fileDragStop"
@drop.stop="fileDrop"
/>
<div class="form-group">
<i18n
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@ -97,8 +104,6 @@
class="form-post-body"
@keydown.meta.enter="postStatus(newStatus)"
@keyup.ctrl.enter="postStatus(newStatus)"
@drop="fileDrop"
@dragover.prevent="fileDrag"
@input="resize"
@compositionupdate="resize"
@paste="paste"
@ -447,7 +452,8 @@
form {
display: flex;
flex-direction: column;
padding: 0.6em;
margin: 0.6em;
position: relative;
}
.form-group {
@ -505,5 +511,25 @@
cursor: pointer;
z-index: 4;
}
.drop-indicator {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
font-size: 5em;
display: flex;
align-items: center;
justify-content: center;
color: $fallback--text;
color: var(--text, $fallback--text);
opacity: 0.6;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-radius: $fallback--tooltipRadius;
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
border: 2px dashed $fallback--text;
border: 2px dashed var(--text, $fallback--text);
}
}
</style>