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

Fix back to top scroll functionality

Browse Source
This commit is contained in:
Colin Kallemein 2024-07-20 16:52:31 +02:00
parent 33fd32348f
commit ddfa3b4952
2 changed files with 24 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,15 +38,12 @@
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-[15%]"></div>
<!-- Assets list -->
<div class="overflow-auto h-full w-[35%] flex flex-col relative" ref="elementToScroll" @scroll="onScroll">
<div class="overflow-auto h-full w-[35%] flex flex-col relative">
<TileList v-if="selectedCategory === 'tiles'" />
<ObjectList v-if="selectedCategory === 'objects'" />
<ObjectList v-if="selectedCategory === 'objects'" />
</div>
<button class="left-[calc(50%_-_60px)] absolute bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
<img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
<div class="absolute w-[1px] bg-cyan-200 h-full top-0 left-1/2"></div>
<!-- Asset details -->
@ -68,24 +65,4 @@ import { useAssetManagerStore } from '@/stores/assetManager'
const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles')
const hasScrolled = ref(false)
const elementToScroll = ref()
const onScroll = (e: Event) => {
let scrollTop = (e.target as HTMLBodyElement).scrollTop
if (scrollTop > 200) {
hasScrolled.value = true
} else if (scrollTop <= 200) {
hasScrolled.value = false
}
}
function toTop() {
elementToScroll.value.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
})
}
</script>

26
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -7,8 +7,8 @@
<input v-model="searchQuery" class="input-cyan w-full" placeholder="Search..." @input="handleSearch" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div v-bind="containerProps" style="height: 400px; overflow-y: auto;">
<div v-bind="wrapperProps">
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
<div v-bind="wrapperProps" ref="elementToScroll">
<a
v-for="{ data: tile } in list"
:key="tile.id"
@ -25,6 +25,9 @@
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</a>
</div>
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-[50px] h-[50px] rounded-lg bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
<img class="absolute invert w-[30px] h-[30px] left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
</button>
</div>
</template>
@ -44,6 +47,9 @@ const assetStore = useAssetStore()
const searchQuery = ref('')
const hasScrolled = ref(false)
const elementToScroll = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
@ -78,12 +84,26 @@ const filteredTiles = computed(() => {
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(
filteredTiles,
{
itemHeight: 28,
itemHeight: 48,
},
)
const virtualList = ref({ scrollTo })
const onScroll = () => {
let scrollTop = elementToScroll.value.style.marginTop.replace('px', '');
if (scrollTop > 80) {
hasScrolled.value = true
} else if (scrollTop <= 80) {
hasScrolled.value = false
}
}
function toTop() {
virtualList.value?.scrollTo(0)
}
onMounted(() => {
gameStore.connection?.emit('gm:tile:list', {}, (response: Tile[]) => {
assetManagerStore.setTileList(response)