imi-bas/pronature-platform
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

assetbrowser improvement

Browse Source
This commit is contained in:
goynov
2026-04-03 13:46:46 +03:00
parent 6cc9d48bfe
commit 9a8446c732
3 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AssetsManagement/AssetBrowser.vue
+10 -8
View File
@@ -12,17 +12,19 @@
<v-container class="asset-browser"> <v-container class="asset-browser">
<v-row> <v-row>
<v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative img-preview"> <v-col v-for="(v, i) in items" :key="i" cols="12" xs="6" sm="4" md="3" xl="2" class="position-relative img-preview">
<div class="img-wrapper"> <div class="position-relative img-wrapper">
<img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></img> <img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer"></img>
<div class="btn-play position-absolute cursor-pointer top-0 right-0 w-100 h-100 d-flex justify-center align-center" @click.self="$emit('select', v)">
<v-btn icon="mdi-play" @click="preview(v)" variant="elevated" color="light-blue-darken-4" size="x-large"></v-btn>
<slot name="action-buttons" v-bind:object="v"></slot>
</div>
</div> </div>
<div class="d-flex"> <div class="d-flex">
<span class="flex-grow-1">{{ v.name }}</span> <span class="flex-grow-1">{{ v.name }}</span>
<v-icon variant="tonal" density="comfortable" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" <v-btn class="position-absolute top-0 left-0 ma-5" density="comfortable" size="small" rounded
:color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-5"> :color="$p.objectTypes.find(t=>t.value == v.type).color"
</v-icon> :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`">
<v-btn variant="tonal" density="comfortable" size="small" icon="mdi-play" @click="preview(v)" </v-btn>
color="light-blue-darken-4" class="position-absolute top-0 right-0 ma-6"></v-btn>
<slot name="action-buttons" v-bind:object="v"></slot>
</div> </div>
</v-col> </v-col>
</v-row> </v-row>
src/pages/manage/game-objects/list.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template> <template>
<AssetBrowser @select="$router.push(`/manage/game-objects/${$event.id}`)" ref="browser"> <AssetBrowser @select="$router.push(`/manage/game-objects/${$event.id}`)" ref="browser">
<template v-slot:action-buttons="{ object }"> <template v-slot:action-buttons="{ object }">
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/manage/game-objects/${object.id}`" color="blue-lighten-3"></v-btn> <v-btn density="comfortable" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/manage/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
<v-btn variant="tonal" density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn> <v-btn density="comfortable" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red-lighten-2"></v-btn>
</template> </template>
</AssetBrowser> </AssetBrowser>
<v-dialog v-model="confirmDialog" width="auto"> <v-dialog v-model="confirmDialog" width="auto">
src/styles/style.scss
+11 -4
View File
@@ -31,12 +31,12 @@ video{
.browse-asset { .browse-asset {
position: absolute !important; position: absolute !important;
bottom: 44px; //bottom: 44px;
&.edit{ &.edit{
left: 22px; left: 25px;
} }
&.remove { &.remove {
right: 22px; right: 25px;
} }
} }
@@ -66,6 +66,14 @@ video{
max-width: 125%; max-width: 125%;
} }
} }
.btn-play {
opacity: 0;
transition: opacity 1s;
}
&:hover .btn-play{
opacity: .77;
}
} }
.hover-effect { .hover-effect {
@@ -146,4 +154,3 @@ audio {
bottom: 0 !important; bottom: 0 !important;
right: 0 !important; right: 0 !important;
} }