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

Fixed styling issues modal, added scroll to top button (WIP)

Browse Source
This commit is contained in:
Colin Kallemein 2024-06-23 12:43:23 +02:00
parent 9bbaeb856d
commit 1cfe6b9eee
1 changed files with 86 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,9 +16,10 @@
<span class="category-name">NPC's</span>
</a>
</div>
<div class="divider categories"></div>
<!-- Assets -->
<div class="assets active">
<div class="assets active" @scroll="onScroll">
<div class="asset">
<!-- @TODO: can this pls be less html, make input 100% and fix the spacing below -->
<div class="modal-form">
@ -31,7 +32,10 @@
</div>
<div class="asset">
<span class="asset-name">Upload new</span>
<input ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Choose file
</label>
</div>
<a class="asset" v-for="(tile, index) in tiles" :key="index">
<div class="asset-details">
@ -51,6 +55,10 @@
<div class="assets">
</div>
<button class="back-to-top" v-show="hasScrolled">
<img src="/assets/icons/zoneEditor/chevron.svg" />
</button>
<div class="divider assets-list"></div>
<div class="asset-info">
<div class="image-container">
@ -81,6 +89,17 @@ import config from '@/config'
const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref()
const hasScrolled = ref(false)
const onScroll = (e: Event) => {
let scrollTop = (e.target as HTMLBodyElement).scrollTop
if (scrollTop > 200) {
hasScrolled.value = true
} else if (scrollTop <= 200) {
hasScrolled.value = false
}
}
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
@ -114,8 +133,44 @@ onMounted(() => {
}
.assets-container {
display: flex;
height: 100%;
height: calc(100% + 20px);
width: 100%;
position: relative;
.divider {
position: absolute;
width: 1px;
background-color: $dark-cyan;
height: 100%;
top: 0;
&.categories {
left: 15%; //width % of .asset-categories
}
&.assets-list {
left: 50%; //width % of .asset-categories + .assets
}
}
button.back-to-top {
position: fixed;
left: calc(50% - 60px);
bottom: 10px;
min-width: unset;
width: 50px;
height: 50px;
border-radius: 8px;
background-color: rgba($cyan, 0.8);
padding: 0;
img {
position: absolute;
filter: invert(100%);
width: 30px;
height: 30px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(180deg);
}
}
.asset-categories {
width: 15%;
@ -124,6 +179,7 @@ onMounted(() => {
.assets {
overflow:auto;
height: 100%;
width: 35%;
display: none;
&.active {
@ -132,7 +188,7 @@ onMounted(() => {
}
.asset-info {
display: flex;
width: 60%;
width: 50%;
&::after {
display: none;
}
@ -181,15 +237,15 @@ onMounted(() => {
.asset-categories, .assets, .asset-info {
flex-direction: column;
position: relative;
&::after {
content: '';
position: absolute;
right: 0;
width: 1px;
height: calc(100% + 20px);
top: 0;
background-color: $dark-cyan;
}
// &::after {
// content: '';
// position: absolute;
// right: 0;
// width: 1px;
// height: 100%;
// top: 0;
// background-color: $dark-cyan;
// }
.category, .asset, .image-container {
position: relative;
@ -206,6 +262,23 @@ onMounted(() => {
&.selected {
background-color: rgba($cyan, 0.8);
}
.file-upload {
background-color: rgba($cyan, 0.5);
border: 1px solid $white;
border-radius: 5px;
text-shadow: 0 3px 6px rgba($black, 0.2);
padding: 6px 15px;
display: inline-flex;
margin-left: 20px;
&:hover {
background-color: $cyan;
cursor: pointer;
}
input[type="file"] {
display: none;
}
}
}
}