6f58e9e7bb
* Redo version page * More work on editing page * Make saving work * Finish version editing * Version creation (base) * Add creation buttons * Add file uploader to versions page * Add version file parsing * Finish PR * Fix version page responsiveness and use more consistent card design * Whoops that wasn't supposed to be there * Fixes + allow whole page dragging * Re-add lost merge data * Remove debug line * Move back to list btm Co-authored-by: Prospector <prospectordev@gmail.com>
83 lines
1.7 KiB
Vue
83 lines
1.7 KiB
Vue
<template>
|
|
<div
|
|
ref="drop_area"
|
|
class="drop-area"
|
|
@drop.stop.prevent="
|
|
(event) => {
|
|
$refs.drop_area.style.visibility = 'hidden'
|
|
|
|
if (event.dataTransfer && event.dataTransfer.files) {
|
|
$emit('change', event.dataTransfer.files)
|
|
}
|
|
}
|
|
"
|
|
@dragenter.prevent="allowDrag"
|
|
@dragover.prevent="allowDrag"
|
|
@dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'DropArea',
|
|
props: {
|
|
accept: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
mounted() {
|
|
document.addEventListener('dragenter', () => {
|
|
this.$refs.drop_area.style.visibility = 'visible'
|
|
})
|
|
},
|
|
methods: {
|
|
allowDrag(event) {
|
|
const file = event.dataTransfer?.items[0]
|
|
|
|
if (
|
|
file &&
|
|
this.accept
|
|
.split(',')
|
|
.reduce(
|
|
(acc, t) => acc || file.type.startsWith(t) || file.type === t,
|
|
false
|
|
)
|
|
) {
|
|
// Adds file dropping indicator
|
|
event.dataTransfer.dropEffect = 'copy'
|
|
event.preventDefault()
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.drop-area {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
visibility: hidden;
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
transition: visibility 0.2s ease-in-out, background-color 0.1s ease-in-out;
|
|
display: flex;
|
|
|
|
&::before {
|
|
--indent: 4rem;
|
|
|
|
content: ' ';
|
|
position: relative;
|
|
top: var(--indent);
|
|
left: var(--indent);
|
|
width: calc(100% - (2 * var(--indent)));
|
|
height: calc(100% - (2 * var(--indent)));
|
|
border-radius: 1rem;
|
|
border: 0.25rem dashed var(--color-button-bg);
|
|
}
|
|
}
|
|
</style>
|