Commit ea2b2a35 authored by Shpuld Shpludson's avatar Shpuld Shpludson

add fade-in fade-out

parent 855b8d4d
Pipeline #27041 passed with stages
in 5 minutes and 49 seconds
......@@ -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) {
......
......@@ -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;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment