Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-08 20:56:52 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Semi working drag-between state...

Browse source
This commit is contained in:
Kasen IO 2020-04-08 03:19:52 -04:00
parent 7d1bcc9cb9
commit 2e77393b93
2 changed files with 83 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
scripts/system/inventory/src/App.vue
View file

@ -70,8 +70,7 @@
hide-default-footer hide-default-footer
> >
<template> <template>
<draggable :group="options" :list="items" handle=".handle">
<draggable tag="v-row" :list="items">
<v-col <v-col
v-for="item in items" v-for="item in items"
v-bind:key="item.uuid" v-bind:key="item.uuid"
@ -79,19 +78,21 @@
sm="6" sm="6"
md="4" md="4"
lg="3" lg="3"
class="py-1 draggable-card" class="py-1 column-item"
> >
<v-list-item <v-list-item
one-line one-line
v-if="!item.folder" v-if="!item.folder"
class="mx-auto top-level-item" class="mx-auto draggable-card"
max-width="344" max-width="344"
outlined outlined
> >
<div class="handle pa-2">
<v-icon color="orange darken-2">mdi-blur-linear</v-icon>
</div>
<v-list-item-content <v-list-item-content
class="pb-1 pt-2" class="pb-1 pt-2 pl-4"
> >
<div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div> <div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
<v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title> <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
@ -170,13 +171,12 @@
</v-list-item> </v-list-item>
<!-- The Folder Card --> <!-- The Folder List Item -->
<v-list-group <v-list-group
value="true"
v-if="item.folder" v-if="item.folder"
class="top-level-folder" class="top-level-folder"
> >
<!-- prepend-icon="mdi-blur-linear" put this in the list group, no idea how to make it a handle yet though... -->
<template v-slot:activator> <template v-slot:activator>
<v-list-item <v-list-item
one-line one-line
@ -184,22 +184,31 @@
max-width="344" max-width="344"
outlined outlined
> >
Test {{item.name}} {{item.name}}
</v-list-item> </v-list-item>
</template> </template>
<v-col <v-col
v-for="item in item.items" v-for="item in item.items"
v-bind:key="item.uuid" v-bind:key="item.uuid"
class="py-1" cols="12"
> sm="6"
md="4"
lg="3"
class="py-1 column-item"
>
<draggable
:list="item.items"
:group="options"
>
<v-list-item <v-list-item
one-line one-line
class="mx-auto second-level-item" class="mx-auto draggable-card"
max-width="344"
outlined outlined
> >
<div class="handle pa-2">
<v-icon color="orange darken-2">mdi-blur-linear</v-icon>
</div>
<v-list-item-content class="pb-1 pt-2"> <v-list-item-content class="pb-1 pt-2">
<v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title> <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
<v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle> <v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
@ -266,7 +275,8 @@
</v-list> </v-list>
</v-menu> </v-menu>
</v-list-item> </v-list-item>
</draggable>
</v-col> </v-col>
</v-list-group> </v-list-group>
</v-col> </v-col>
@ -710,6 +720,12 @@ export default {
"url": "https://googfdafsgaergale.com/vr.js", "url": "https://googfdafsgaergale.com/vr.js",
"uuid": "54hgfhgf25fdfadf4354353", "uuid": "54hgfhgf25fdfadf4354353",
}, },
{
"type": "script",
"name": "FOLDERSCRIPT2",
"url": "https://googfdafsgaergale.com/vr.js",
"uuid": "54hgfhgf25ffdafddfadf4354353",
},
], ],
"uuid:": "54354363wgsegs45ujs", "uuid:": "54354363wgsegs45ujs",
}, },
@ -1082,7 +1098,13 @@ export default {
} }
}, },
computed: { computed: {
options : function (){
return {
name: 'column-item',
pull: true,
put: true
}
}
} }
}; };

44
scripts/system/inventory/src/assets/styles/styles.css
View file

@ -1,13 +1,51 @@
.top-level-item { /* Top Level */
.draggable-card {
background-color: rgba(39,39,39, 1.0); background-color: rgba(39,39,39, 1.0);
} }
.draggable-card .handle {
width: 40px !important;
}
.top-level-folder { .top-level-folder {
background-color: rgba(39,39,39, 1.0); background-color: rgba(39,39,39, 1.0);
} }
.second-level-item { .top-level-folder .v-list-group__header__prepend-icon {
background-color: rgba(39,39,39, 0.7); background-color: rgba(0,0,0, 0.3);
width: 50px;
height: 50px;
margin: 5px 5px 7px 0px !important;
padding: 5px 18px 5px 8px;
}
.top-level-folder .handle {
width: 40px !important;
}
/* Second Level */
.v-list-group .column-item {
max-width: 100% !important;
margin-top: 5px;
margin-bottom: 5px;
}
.v-list-group .draggable-card {
background-color: rgba(0,0,0, 0.3);
padding-right: 16px;
padding-left: 0px !important;
}
.v-list-group .draggable-card .handle {
margin-right: 16px;
}
/* Universal */
.handle {
background-color: rgba(0,0,0, 0.3);
} }
.inventoryApp::-webkit-scrollbar { width: 0 !important } .inventoryApp::-webkit-scrollbar { width: 0 !important }