noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish functionality back to top button on asset list

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-23 14:24:10 +02:00
parent 6215b19b20
commit 7a45145921
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/utilities/assetManager/AssetManager.vue
View File

@ -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