assetbrowser improvement

src/components/AssetsManagement/AssetBrowser.vue

@@ -12,17 +12,19 @@
     <v-container class="asset-browser">
         <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">
-                <div class="img-wrapper">
-                    <img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></img>
+                <div class="position-relative img-wrapper">
+                    <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 class="d-flex">
                     <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 }`" 
-                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-5">
-                    </v-icon>
-                    <v-btn variant="tonal" density="comfortable" size="small" icon="mdi-play" @click="preview(v)" 
-                        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>
+                    <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"
+                           :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`">
+                    </v-btn>
                 </div>
             </v-col>
         </v-row>

src/pages/manage/game-objects/list.vue

@@ -1,8 +1,8 @@
 <template>
     <AssetBrowser @select="$router.push(`/manage/game-objects/${$event.id}`)" ref="browser">
         <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 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 edit" icon="mdi-pencil-outline" :to="`/manage/game-objects/${object.id}`" color="blue-lighten-3"></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>
     </AssetBrowser>
     <v-dialog v-model="confirmDialog" width="auto">

src/styles/style.scss

@@ -31,12 +31,12 @@ video{
 
 .browse-asset {
     position: absolute !important;
-    bottom: 44px;
+    //bottom: 44px;
     &.edit{
-        left: 22px;
+        left: 25px;
     }
     &.remove {
-        right: 22px;
+        right: 25px;
     }
 }
 
@@ -66,6 +66,14 @@ video{
             max-width: 125%;
         }
     }
+    .btn-play {
+        opacity: 0;
+        transition: opacity 1s;
+    }
+    
+    &:hover .btn-play{
+        opacity: .77;
+    }
 }
 
 .hover-effect {
@@ -145,5 +153,4 @@ audio {
     left:unset !important;
     bottom: 0 !important;
     right: 0 !important;
-}
-
+}