commit: 02ba99247625a8d757ef62a1f2a73fa82d6085be
parent: 4f66221adc6afe85523d90900adcc616ec0c2cec
Author: Shpuld Shpludson <shp@cock.li>
Date: Wed, 10 Jun 2020 10:27:48 +0000
Merge branch 'feat/drag-and-drop-improovements' into 'develop'
Add visual indication for drag&dropping files, make dropzone bigger
See merge request pleroma/pleroma-fe!1137
Diffstat:
5 files changed, 60 insertions(+), 25 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Change heart to thumbs up in reaction picker
- Close the media modal on navigation events
- Add colons to the emoji alt text, to make them copyable
+- Add better visual indication for drag-and-drop for files
### Fixed
- Status ellipsis menu closes properly when selecting certain options
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
@@ -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(() => {
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
@@ -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')"
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -82,7 +82,9 @@ const PostStatusForm = {
contentType
},
caret: 0,
- pollFormVisible: false
+ pollFormVisible: false,
+ showDropIcon: 'hide',
+ dropStopTimeout: null
}
},
computed: {
@@ -248,13 +250,27 @@ 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 = 'hide'
}
},
+ 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.showDropIcon = 'fade'
+ this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
+ },
fileDrag (e) {
e.dataTransfer.dropEffect = 'copy'
+ if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
+ clearTimeout(this.dropStopTimeout)
+ this.showDropIcon = 'show'
+ }
},
onEmojiInputInput (e) {
this.$nextTick(() => {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -6,7 +6,15 @@
<form
autocomplete="off"
@submit.prevent="postStatus(newStatus)"
+ @dragover.prevent="fileDrag"
>
+ <div
+ v-show="showDropIcon !== 'hide'"
+ :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
+ class="drop-indicator icon-upload"
+ @dragleave="fileDragStop"
+ @drop.stop="fileDrop"
+ />
<div class="form-group">
<i18n
v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'"
@@ -97,8 +105,6 @@
class="form-post-body"
@keydown.meta.enter="postStatus(newStatus)"
@keydown.ctrl.enter="postStatus(newStatus)"
- @drop="fileDrop"
- @dragover.prevent="fileDrag"
@input="resize"
@compositionupdate="resize"
@paste="paste"
@@ -447,7 +453,8 @@
form {
display: flex;
flex-direction: column;
- padding: 0.6em;
+ margin: 0.6em;
+ position: relative;
}
.form-group {
@@ -505,5 +512,35 @@
cursor: pointer;
z-index: 4;
}
+
+ @keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 0.6; }
+ }
+
+ @keyframes fade-out {
+ from { opacity: 0.6; }
+ to { opacity: 0; }
+ }
+
+ .drop-indicator {
+ position: absolute;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ font-size: 5em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0.6;
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ 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>
