Mirrors/overte-lubosz
3
0
Fork 0
mirror of https://github.com/lubosz/overte.git synced 2025-04-24 03:53: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
>
<template>
<draggable tag="v-row" :list="items">
<draggable :group="options" :list="items" handle=".handle">
<v-col
v-for="item in items"
v-bind:key="item.uuid"
@ -79,19 +78,21 @@
sm="6"
md="4"
lg="3"
class="py-1 draggable-card"
class="py-1 column-item"
>
<v-list-item
one-line
v-if="!item.folder"
class="mx-auto top-level-item"
class="mx-auto draggable-card"
max-width="344"
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"
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>
<v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
@ -170,13 +171,12 @@
</v-list-item>
<!-- The Folder Card -->
<!-- The Folder List Item -->
<v-list-group
value="true"
v-if="item.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>
<v-list-item
one-line
@ -184,22 +184,31 @@
max-width="344"
outlined
>
Test {{item.name}}
{{item.name}}
</v-list-item>
</template>
<v-col
v-for="item in item.items"
v-bind:key="item.uuid"
class="py-1"
>
<v-col
v-for="item in item.items"
v-bind:key="item.uuid"
cols="12"
sm="6"
md="4"
lg="3"
class="py-1 column-item"
>
<draggable
:list="item.items"
:group="options"
>
<v-list-item
one-line
class="mx-auto second-level-item"
max-width="344"
class="mx-auto draggable-card"
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-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>
@ -266,7 +275,8 @@
</v-list>
</v-menu>
</v-list-item>
</v-list-item>
</draggable>
</v-col>
</v-list-group>
</v-col>
@ -710,6 +720,12 @@ export default {
"url": "https://googfdafsgaergale.com/vr.js",
"uuid": "54hgfhgf25fdfadf4354353",
},
{
"type": "script",
"name": "FOLDERSCRIPT2",
"url": "https://googfdafsgaergale.com/vr.js",
"uuid": "54hgfhgf25ffdafddfadf4354353",
},
],
"uuid:": "54354363wgsegs45ujs",
},
@ -1082,7 +1098,13 @@ export default {
}
},
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);
}
.draggable-card .handle {
width: 40px !important;
}
.top-level-folder {
background-color: rgba(39,39,39, 1.0);
}
.second-level-item {
background-color: rgba(39,39,39, 0.7);
.top-level-folder .v-list-group__header__prepend-icon {
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 }