dev

src/components/AssetsManagement/AssetBrowser.vue

@@ -2,17 +2,18 @@
     <v-chip-group variant="flat" v-if="!hideFilter" class="pa-4" multiple column v-model="selectedTypes">
         <v-chip v-for="(f,i) in $p.objectTypes" :key="i" :text="l[f.value]" :value="f.value" :color="f.color" filter></v-chip>
     </v-chip-group>
-    <v-container>
+    <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">
+            <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">
-                <!-- <router-link :to="`/game-objects/${v.id}`"> -->
+                <div class="img-wrapper">
-                <v-img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></v-img>
+                    <img :src="`/asset/thumb/${v.asset?.thumb}`" class="cursor-pointer" @click="$emit('select', v)"></img>
-                <!-- </router-link> -->
+                </div>
                 <div class="d-flex">
                     <span class="flex-grow-1">{{ v.name }}</span>
-                    <v-btn density="comfortable" size="small" :icon="`mdi-${ $p.objectTypes.find(t=>t.value == v.type).icon }`" 
+                    <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-6"></v-btn>
+                        :color="$p.objectTypes.find(t=>t.value == v.type).color" class="position-absolute top-0 left-0 ma-5">
-                    <v-btn density="comfortable" size="small" icon="mdi-play-circle" @click="preview(v)" 
+                    </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>
                 </div>

src/components/SceneDesigner/SceneDesigner.vue

@@ -7,13 +7,12 @@
             <v-btn size="small" class="text-none" value="move" prepend-icon="mdi-cursor-move">Move</v-btn>
             <v-btn size="small" class="text-none" value="pan" prepend-icon="mdi-hand-back-right-outline">Pan</v-btn>
 
-            <v-btn size="small" class="text-none" value="Scene" prepend-icon="mdi-panorama-outline">Add scene</v-btn>
+            <v-btn size="small" class="text-none" value="Scene" prepend-icon="mdi-panorama-outline">{{ l.addScene }}</v-btn>
             <v-btn size="small" class="text-none" value="GameObject"
-                v-if="selectedItem.length == 1 && selectedItem[0].__type == 'Scene'" prepend-icon="mdi-bird">Add game
+                v-if="selectedItem.length == 1 && selectedItem[0].__type == 'Scene'" prepend-icon="mdi-bird">{{ l.createGameObject }}</v-btn>
-                object</v-btn>
             <v-btn size="small" class="text-none" value="Task"
                 v-if="selectedItem.length == 1 && selectedItem[0].__type == 'GameObject'"
-                prepend-icon="mdi-checkbox-marked-circle-plus-outline">Add task</v-btn>
+                prepend-icon="mdi-checkbox-marked-circle-plus-outline">{{ l.addTask }}</v-btn>
         </v-btn-toggle>
         <div @wheel="onWheel" @mousedown="onMouseDown" @mouseup="onMouseUp" @mousemove="onDrag"
             :class="`svg-container ${mode}`" ref="svgContainer">

src/pages/game-objects/list.vue

@@ -1,8 +1,8 @@
 <template>
     <AssetBrowser @select="$router.push(`/game-objects/${$event.id}`)" ref="browser">
         <template v-slot:action-buttons="{ object }">
-            <v-btn density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="primary"></v-btn>
+            <v-btn variant="tonal" density="comfortable" size="small" class="browse-asset edit" icon="mdi-pencil-outline" :to="`/game-objects/${object.id}`" color="blue-lighten-3"></v-btn>
-            <v-btn density="comfortable" size="small" class="browse-asset remove" icon="mdi-close" @click="confirmTarget = object; confirmDialog = true" color="red"></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>
         </template>
     </AssetBrowser>
     <v-dialog v-model="confirmDialog" width="auto">

src/pages/scenarios/[[id]].vue

@@ -5,7 +5,7 @@
                 <v-icon icon="mdi-pencil"></v-icon> {{ id == 'add' ? l.createScenario : l.editScenario }}
             </v-tab>
             <v-tab value="scenes">
-                <v-icon icon="mdi-panorama-outline"></v-icon> Edit scenes
+                <v-icon icon="mdi-panorama-outline"></v-icon> {{ l.editScenes }}
             </v-tab>
         </v-tabs>
         <v-tabs-window v-model="panel">
@@ -19,7 +19,7 @@
                 <SceneDesigner v-model="object" ref="sceneDesigner" ></SceneDesigner>
             </v-tabs-window-item>
         </v-tabs-window>
-        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">Save</v-btn>
+        <v-btn @click="save" :loading="loading" prepend-icon="mdi-content-save" color="primary">{{ l.save }}</v-btn>
     </v-container>
 </template>
 

src/plugins/lang.js

@@ -30,7 +30,9 @@ const lang = {
         no: 'No',
         createScenario: 'Create scenario',
         editScenario: 'Edit scenario',
-        addScene: 'Add scene'
+        editScenes: 'Edit scenes',
+        addScene: 'Add scene',
+        addTask: 'Add task'
     },
     bg: {
         _code: 'bg',
@@ -63,7 +65,9 @@ const lang = {
         no: 'Не',
         createScenario: 'Създаване на сценарий',
         editScenario: 'Редактиране на сценарий',
-        addScene: 'Добавяне на сцена'
+        editScenes: 'Редактиране на сцени',
+        addScene: 'Добавяне на сцена',
+        addTask: 'Добавяне на задача'
     },
 }
 

src/plugins/params.js

@@ -37,7 +37,7 @@ export default {
                 value: 'video',
                 icon: 'filmstrip',
                 type: 'Descriptive',
-                color: 'purple-darken-3'
+                color: 'blue-lighten-5'
             }]
         }
     }

src/styles/style.scss

@@ -22,12 +22,40 @@ video{
 
 .browse-asset {
     position: absolute !important;
-    right: 22px;
+    bottom: 44px;
     &.edit{
-        bottom: 77px;
+        left: 22px;
     }
     &.remove {
-        bottom: 44px;
+        right: 22px;
+    }
+}
+
+.asset-browser{
+    background-color: rgba(128,128,128,.05);
+}
+
+.img-preview {
+    display: flex;
+    flex-direction: column;
+    .img-wrapper{
+        flex-grow: 1;
+        overflow: hidden;
+        max-width: 270px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height:180px;
+    }
+    img{
+        display: block;
+        max-height:180px;
+        max-width: 95%;
+        transition: all 1s;
+        margin: auto;
+        &:hover{
+            max-width: 125%;
+        }
     }
 }