Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add fade-in fade-out

Browse source
This commit is contained in:
Shpuld Shpuldson 2020-06-10 12:41:02 +03:00
parent 855b8d4dad
commit ea2b2a35bb
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/post_status_form/post_status_form.js
View file

@ -83,7 +83,7 @@ const PostStatusForm = {
}, },
caret: 0, caret: 0,
pollFormVisible: false, pollFormVisible: false,
showDropIcon: false, showDropIcon: 'hide',
dropStopTimeout: null dropStopTimeout: null
} }
}, },
@ -254,7 +254,7 @@ const PostStatusForm = {
e.preventDefault() // allow dropping text like before e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files this.dropFiles = e.dataTransfer.files
clearTimeout(this.dropStopTimeout) clearTimeout(this.dropStopTimeout)
this.showDropIcon = false this.showDropIcon = 'hide'
} }
}, },
fileDragStop (e) { fileDragStop (e) {
@ -262,13 +262,14 @@ const PostStatusForm = {
// directly caused unwanted flickering, this is not perfect either but // directly caused unwanted flickering, this is not perfect either but
// much less noticable. // much less noticable.
clearTimeout(this.dropStopTimeout) clearTimeout(this.dropStopTimeout)
this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100) this.showDropIcon = 'fade'
this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
}, },
fileDrag (e) { fileDrag (e) {
e.dataTransfer.dropEffect = 'copy' e.dataTransfer.dropEffect = 'copy'
if (e.dataTransfer && e.dataTransfer.types.includes('Files')) { if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
clearTimeout(this.dropStopTimeout) clearTimeout(this.dropStopTimeout)
this.showDropIcon = true this.showDropIcon = 'show'
} }
}, },
onEmojiInputInput (e) { onEmojiInputInput (e) {

15
src/components/post_status_form/post_status_form.vue
View file

@ -9,7 +9,8 @@
@dragover.prevent="fileDrag" @dragover.prevent="fileDrag"
> >
<div <div
v-show="showDropIcon" v-show="showDropIcon !== 'hide'"
:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
class="drop-indicator icon-upload" class="drop-indicator icon-upload"
@dragleave="fileDragStop" @dragleave="fileDragStop"
@drop.stop="fileDrop" @drop.stop="fileDrop"
@ -512,6 +513,16 @@
z-index: 4; 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 { .drop-indicator {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
@ -521,9 +532,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: 0.6;
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
opacity: 0.6;
background-color: $fallback--bg; background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg); background-color: var(--bg, $fallback--bg);
border-radius: $fallback--tooltipRadius; border-radius: $fallback--tooltipRadius;