Oneric/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests 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,
pollFormVisible: false,
showDropIcon: false,
showDropIcon: 'hide',
dropStopTimeout: null
}
},
@ -254,7 +254,7 @@ const PostStatusForm = {
e.preventDefault() // allow dropping text like before
this.dropFiles = e.dataTransfer.files
clearTimeout(this.dropStopTimeout)
this.showDropIcon = false
this.showDropIcon = 'hide'
}
},
fileDragStop (e) {
@ -262,13 +262,14 @@ const PostStatusForm = {
// directly caused unwanted flickering, this is not perfect either but
// much less noticable.
clearTimeout(this.dropStopTimeout)
this.dropStopTimeout = setTimeout(() => (this.showDropIcon = false), 100)
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 = true
this.showDropIcon = 'show'
}
},
onEmojiInputInput (e) {

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

@ -9,7 +9,8 @@
@dragover.prevent="fileDrag"
>
<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"
@dragleave="fileDragStop"
@drop.stop="fileDrop"
@ -512,6 +513,16 @@
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;
@ -521,9 +532,9 @@
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
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;