forked from noxious/client
Finish functionality back to top button on asset list
This commit is contained in:
parent
6215b19b20
commit
7a45145921
@ -19,7 +19,7 @@
|
|||||||
<div class="divider categories"></div>
|
<div class="divider categories"></div>
|
||||||
|
|
||||||
<!-- Assets -->
|
<!-- Assets -->
|
||||||
<div class="assets active" @scroll="onScroll">
|
<div class="assets active" ref="elementToScroll" @scroll="onScroll">
|
||||||
<div class="asset">
|
<div class="asset">
|
||||||
<input class="input-cyan search-field" placeholder="Search..." />
|
<input class="input-cyan search-field" placeholder="Search..." />
|
||||||
</div>
|
</div>
|
||||||
@ -48,7 +48,7 @@
|
|||||||
<div class="assets">
|
<div class="assets">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<button class="back-to-top" v-show="hasScrolled">
|
<button class="back-to-top" v-show="hasScrolled" @click="toTop">
|
||||||
<img src="/assets/icons/zoneEditor/chevron.svg" />
|
<img src="/assets/icons/zoneEditor/chevron.svg" />
|
||||||
</button>
|
</button>
|
||||||
<div class="divider assets-list"></div>
|
<div class="divider assets-list"></div>
|
||||||
@ -83,6 +83,7 @@ const socket = useSocketStore()
|
|||||||
const tileUploadField = ref(null)
|
const tileUploadField = ref(null)
|
||||||
const tiles = ref()
|
const tiles = ref()
|
||||||
const hasScrolled = ref(false)
|
const hasScrolled = ref(false)
|
||||||
|
const elementToScroll = ref()
|
||||||
|
|
||||||
const onScroll = (e: Event) => {
|
const onScroll = (e: Event) => {
|
||||||
let scrollTop = (e.target as HTMLBodyElement).scrollTop
|
let scrollTop = (e.target as HTMLBodyElement).scrollTop
|
||||||
@ -94,6 +95,15 @@ const onScroll = (e: Event) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toTop() {
|
||||||
|
elementToScroll.value.scrollTo({
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const handleFileUpload = (e: Event) => {
|
const handleFileUpload = (e: Event) => {
|
||||||
const files = (e.target as HTMLInputElement).files
|
const files = (e.target as HTMLInputElement).files
|
||||||
if (!files) return
|
if (!files) return
|
||||||
|
Loading…
x
Reference in New Issue
Block a user