zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Code Issues Projects Releases Wiki Activity

Move illustration to DbUpload component

Browse Source
This commit is contained in:
lana-k
2020-12-20 12:36:09 +01:00
parent 43e357de5b
commit 6b72a937ea
2 changed files with 122 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/components/DbUpload.vue
View File

@@ -3,8 +3,8 @@
<label for="assetsFieldHandle">
<div
class="drop-area"
@dragover.prevent="$emit('dragover')"
@dragleave="$emit('dragleave')"
@dragover.prevent="state = 'dragover'"
@dragleave="state=''"
@drop="drop"
>
<input
@@ -19,6 +19,30 @@
</div>
</div>
</label>
<div v-if="illustrated" id="img-container">
<img id="drop-file-top-img" :src="require('@/assets/images/dropFileTop.png')" />
<img
id="left-arm-img"
:class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/leftArm.png')"
/>
<img
id="file-img"
:class="{
'swing': state === 'dragover',
'fly': state === 'drop',
}"
:src="require('@/assets/images/file.png')"
@animationend="onFlyEnd"
/>
<img id="drop-file-bottom-img" :src="require('@/assets/images/dropFileBottom.png')" />
<img id="body-img" :src="require('@/assets/images/body.png')" />
<img
id="right-arm-img"
:class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/rightArm.png')"
/>
</div>
<div id="error" class="error"></div>
</div>
</template>
@@ -26,6 +50,18 @@
<script>
export default {
name: 'DbUpload',
props: {
illustrated: {
type: Boolean,
required: false,
default: false
}
},
data () {
return {
state: ''
}
},
methods: {
loadDb () {
return this.$db.loadDb(this.$refs.file.files[0])
@@ -39,13 +75,16 @@ export default {
drop (event) {
event.preventDefault()
this.$refs.file.files = event.dataTransfer.files
this.$emit('drop')
this.state = 'drop'
this.loadDb()
.then(() => {
// Clean up
event.currentTarget.classList.add('bg-gray-100')
event.currentTarget.classList.remove('bg-green-300')
// event.currentTarget.classList.add('bg-gray-100')
// event.currentTarget.classList.remove('bg-green-300')
})
},
onFlyEnd (event) {
console.log('END!!!', event.animationName.startsWith('fly'))
}
}
}
@@ -78,4 +117,80 @@ label {
input {
display: none;
}
#img-container {
position: absolute;
top: calc(50% - 120px);
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
height: 338px;
pointer-events: none;
}
#drop-file-top-img {
width: 450px;
height: 171px;
position: absolute;
top: 0;
left: 0;
}
#drop-file-bottom-img {
width: 450px;
height: 167px;
position: absolute;
bottom: 0;
left: 0;
}
#body-img {
width: 74px;
position: absolute;
top: 94.05px;
left: 46px;
}
#right-arm-img {
width: 106px;
position: absolute;
top: 110.05px;
left: 78px;
}
#left-arm-img {
width: 114px;
position: absolute;
top: 69.05px;
left: 69px;
}
#file-img {
width: 125px;
position: absolute;
top: 15.66px;
left: 152px;
}
.swing {
animation: swing ease-in-out 0.6s infinite alternate;
}
#left-arm-img.swing {
transform-origin: 9px 83px;
}
#right-arm-img.swing {
transform-origin: 0 56px;
}
#file-img.swing {
transform-origin: -74px 139px;
}
@keyframes swing {
0% { transform: rotate(0deg); }
100% { transform: rotate(-7deg); }
}
#file-img.fly {
animation: fly ease-in-out 1s 1 normal;
transform-origin: center center;
top: 183px;
left: 225px;
transition: top 1s ease-in-out, left 1s ease-in-out;
}
@keyframes fly {
100% { transform: rotate(360deg) scale(0.5); }
}
</style>

107
src/views/Home.vue
View File

@@ -1,29 +1,6 @@
<template>
<div id="dbloader-container">
<db-upload @dragover="state='dragover'" @dragleave="state=''" @drop="state='drop'"/>
<div id="img-container">
<img id="drop-file-top-img" :src="require('@/assets/images/dropFileTop.png')" />
<img
id="left-arm-img"
:class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/leftArm.png')"
/>
<img
id="file-img"
:class="{
'swing': state === 'dragover',
'fly': state === 'drop',
}"
:src="require('@/assets/images/file.png')"
/>
<img id="drop-file-bottom-img" :src="require('@/assets/images/dropFileBottom.png')" />
<img id="body-img" :src="require('@/assets/images/body.png')" />
<img
id="right-arm-img"
:class="{'swing': state === 'dragover'}"
:src="require('@/assets/images/rightArm.png')"
/>
</div>
<db-upload illustrated />
<div id="note">
Sqliteviz is fully client-side. Your database never leaves your computer.
</div>
@@ -38,12 +15,7 @@ import dbUpload from '@/components/DbUpload'
export default {
name: 'Home',
components: { dbUpload },
data () {
return {
state: ''
}
}
components: { dbUpload }
}
</script>
@@ -67,53 +39,6 @@ export default {
margin-top: 83px;
}
#img-container {
position: absolute;
top: calc(50% - 120px);
transform: translate(0, -50%);
width: 450px;
height: 338px;
pointer-events: none;
}
#drop-file-top-img {
width: 450px;
height: 171px;
position: absolute;
top: 0;
left: 0;
}
#drop-file-bottom-img {
width: 450px;
height: 167px;
position: absolute;
bottom: 0;
left: 0;
}
#body-img {
width: 74px;
position: absolute;
top: 94.05px;
left: 46px;
}
#right-arm-img {
width: 106px;
position: absolute;
top: 110.05px;
left: 78px;
}
#left-arm-img {
width: 114px;
position: absolute;
top: 69.05px;
left: 69px;
}
#file-img {
width: 125px;
position: absolute;
top: 15.66px;
left: 152px;
}
>>>.drop-area {
width: 706px;
height: 482px;
@@ -126,32 +51,4 @@ export default {
bottom: 42px;
max-width: 300px;
}
.swing {
animation: swing ease-in-out 0.6s infinite alternate;
}
#left-arm-img.swing {
transform-origin: 9px 83px;
}
#right-arm-img.swing {
transform-origin: 0 56px;
}
#file-img.swing {
transform-origin: -74px 139px;
}
@keyframes swing {
0% { transform: rotate(0deg); }
100% { transform: rotate(-7deg); }
}
#file-img.fly {
animation: fly ease-in-out 1s 1 normal;
transform-origin: center center;
top: 183px;
left: 225px;
transition: top 1s ease-in-out, left 1s ease-in-out;
}
@keyframes fly {
100% { transform: rotate(360deg) scale(0.5); }
}
</style>