mirror of
https://thingvellir.net/git/overte
synced 2025-03-27 23:52:03 +01:00
Nesting works correctly now...
This commit is contained in:
Kasen IO
parent
f5f49ec3ae
commit
633c7e4515
2 changed files with 163 additions and 273 deletions
|
|
@ -75,7 +75,15 @@
|
|||
|
||||
<v-content>
|
||||
<v-container fluid>
|
||||
<itemiterator :items="items"></itemiterator>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="py-1 column-item"
|
||||
>
|
||||
<itemiterator :itemsForIterator="items"></itemiterator>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-content>
|
||||
|
||||
|
|
@ -659,18 +667,18 @@ export default {
|
|||
{
|
||||
"hasChildren": false,
|
||||
"type": "script",
|
||||
"name": "TESTFOLDERSCRIPT",
|
||||
"name": "inception1",
|
||||
"url": "https://googfdafsgaergale.com/vr.js",
|
||||
"folder": "No Folder",
|
||||
"uuid": "54hgfhgf25fdfadf4354353",
|
||||
"uuid": "54hgfhgf25fdfadeqwqeqf4354353",
|
||||
},
|
||||
{
|
||||
"hasChildren": false,
|
||||
"type": "script",
|
||||
"name": "FOLDERSCRIPT2",
|
||||
"name": "inception432",
|
||||
"url": "https://googfdafsgaergale.com/vr.js",
|
||||
"folder": "No Folder",
|
||||
"uuid": "54hgfhgf25ffdafddfadf4354353",
|
||||
"uuid": "54hgfhgf25ffdafdWDQDQWWQdfadf4354353",
|
||||
},
|
||||
],
|
||||
"uuid": "54354363wgtrhtrhegs45ujs"
|
||||
|
|
|
|||
|
|
@ -9,278 +9,160 @@
|
|||
-->
|
||||
|
||||
<template>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="py-1 column-item"
|
||||
>
|
||||
<draggable :group="options" :list="items" handle=".handle">
|
||||
<v-item-group
|
||||
v-for="item in items"
|
||||
v-bind:key="item.uuid"
|
||||
<draggable :group="options" :list="itemsForIterator" handle=".handle">
|
||||
<v-item-group
|
||||
v-for="item in itemsForIterator"
|
||||
v-bind:key="item.uuid"
|
||||
>
|
||||
<v-list-item
|
||||
one-line
|
||||
v-if="!item.hasChildren"
|
||||
class="mx-auto draggable-card"
|
||||
max-width="344"
|
||||
outlined
|
||||
>
|
||||
<v-list-item
|
||||
one-line
|
||||
v-if="!item.hasChildren"
|
||||
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 pl-4"
|
||||
<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 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>
|
||||
<v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-menu bottom left>
|
||||
<template v-slot:activator="{ on }">
|
||||
<!-- settings.displayDensity.size >= 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size >= 1"
|
||||
medium
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<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-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-menu bottom left>
|
||||
<template v-slot:activator="{ on }">
|
||||
<!-- settings.displayDensity.size >= 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size >= 1"
|
||||
medium
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
<!-- settings.displayDensity.size < 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size < 1"
|
||||
small
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
<!-- settings.displayDensity.size < 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size < 1"
|
||||
small
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list color="grey darken-3">
|
||||
<v-list-item
|
||||
@click="useItem(item.type, item.url)"
|
||||
>
|
||||
<v-list-item-title>Use</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-play</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
editDialogStore.show = true;
|
||||
editDialogStore.uuid = item.uuid;
|
||||
editDialogStore.data.type = item.type.toUpperCase();
|
||||
editDialogStore.data.folder = null;
|
||||
editDialogStore.data.name = item.name;
|
||||
editDialogStore.data.url = item.url;
|
||||
getFolderList('edit');
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Edit</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
shareDialogStore.show = true;
|
||||
shareDialogStore.data.url = item.url;
|
||||
shareDialogStore.data.uuid = item.uuid;
|
||||
sendAppMessage('web-to-script-request-nearby-users', '')
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Share</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
removeDialogStore.show = true;
|
||||
removeDialogStore.uuid = item.uuid;
|
||||
"
|
||||
color="red darken-1"
|
||||
>
|
||||
<v-list-item-title>Remove</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
</v-list-item>
|
||||
<v-list color="grey darken-3">
|
||||
<v-list-item
|
||||
@click="useItem(item.type, item.url)"
|
||||
>
|
||||
<v-list-item-title>Use</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-play</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
editDialogStore.show = true;
|
||||
editDialogStore.uuid = item.uuid;
|
||||
editDialogStore.data.type = item.type.toUpperCase();
|
||||
editDialogStore.data.folder = null;
|
||||
editDialogStore.data.name = item.name;
|
||||
editDialogStore.data.url = item.url;
|
||||
getFolderList('edit');
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Edit</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
shareDialogStore.show = true;
|
||||
shareDialogStore.data.url = item.url;
|
||||
shareDialogStore.data.uuid = item.uuid;
|
||||
sendAppMessage('web-to-script-request-nearby-users', '')
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Share</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
<v-list-item
|
||||
@click="
|
||||
removeDialogStore.show = true;
|
||||
removeDialogStore.uuid = item.uuid;
|
||||
"
|
||||
color="red darken-1"
|
||||
>
|
||||
<v-list-item-title>Remove</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
|
||||
</v-list-item>
|
||||
|
||||
|
||||
<!-- The Folder List Item -->
|
||||
<v-list-group
|
||||
v-if="item.hasChildren"
|
||||
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
|
||||
class="mx-auto"
|
||||
max-width="344"
|
||||
outlined
|
||||
>
|
||||
<v-icon class="folder-icon" color="teal">mdi-folder-settings</v-icon>
|
||||
{{item.name}}
|
||||
</v-list-item>
|
||||
</template>
|
||||
<div class="text-center my-2">
|
||||
<v-btn medium tile color="purple" class="mx-1 folder-button"
|
||||
@click="
|
||||
editFolderDialogStore.show = true;
|
||||
editFolderDialogStore.uuid = item.uuid;
|
||||
editFolderDialogStore.data.name = item.name;
|
||||
"
|
||||
>
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-btn medium tile color="red" class="mx-1 folder-button"
|
||||
@click="
|
||||
removeFolderDialogStore.show = true;
|
||||
removeFolderDialogStore.uuid = item.uuid;
|
||||
"
|
||||
>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
<v-btn medium tile color="blue" class="mx-1 folder-button"
|
||||
@click="sortFolder(item.uuid);"
|
||||
>
|
||||
<v-icon>mdi-ab-testing</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
class="py-1 column-item"
|
||||
|
||||
<!-- The Folder List Item -->
|
||||
<v-list-group
|
||||
v-if="item.hasChildren"
|
||||
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
|
||||
class="mx-auto"
|
||||
max-width="344"
|
||||
outlined
|
||||
>
|
||||
<draggable
|
||||
:list="item.items"
|
||||
:group="options"
|
||||
>
|
||||
<v-item-group
|
||||
v-for="item in item.items"
|
||||
v-bind:key="item.uuid"
|
||||
>
|
||||
<v-list-item
|
||||
one-line
|
||||
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">
|
||||
<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-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-menu bottom left>
|
||||
<template v-slot:activator="{ on }">
|
||||
<!-- settings.displayDensity.size >= 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size >= 1"
|
||||
medium
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
<!-- settings.displayDensity.size < 1 -->
|
||||
<v-btn
|
||||
:style="{backgroundColor: (getIconColor(item.type)) }"
|
||||
v-show="settings.displayDensity.size < 1"
|
||||
small
|
||||
fab
|
||||
dark
|
||||
v-on="on"
|
||||
>
|
||||
<v-icon>{{getIcon(item.type)}}</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list color="grey darken-3">
|
||||
|
||||
<v-list-item
|
||||
@click="useItem(item.type, item.url)"
|
||||
>
|
||||
<v-list-item-title>Use</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-play</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
@click="
|
||||
editDialogStore.show = true;
|
||||
editDialogStore.uuid = item.uuid;
|
||||
editDialogStore.data.type = item.type.toUpperCase();
|
||||
editDialogStore.data.folder = null;
|
||||
editDialogStore.data.name = item.name;
|
||||
editDialogStore.data.url = item.url;
|
||||
getFolderList('edit');
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Edit</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
@click="
|
||||
shareDialogStore.show = true;
|
||||
shareDialogStore.data.url = item.url;
|
||||
shareDialogStore.data.uuid = item.uuid;
|
||||
sendAppMessage('web-to-script-request-nearby-users', '')
|
||||
"
|
||||
>
|
||||
<v-list-item-title>Share</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item
|
||||
@click="
|
||||
removeDialogStore.show = true;
|
||||
removeDialogStore.uuid = item.uuid;
|
||||
"
|
||||
color="red darken-1"
|
||||
>
|
||||
<v-list-item-title>Remove</v-list-item-title>
|
||||
<v-list-item-action>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-list-item-action>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-list-item>
|
||||
</v-item-group>
|
||||
</draggable>
|
||||
</v-col>
|
||||
</v-list-group>
|
||||
</v-item-group>
|
||||
</draggable>
|
||||
</v-col>
|
||||
<v-icon class="folder-icon" color="teal">mdi-folder-settings</v-icon>
|
||||
{{item.name}}
|
||||
</v-list-item>
|
||||
</template>
|
||||
<div class="text-center my-2">
|
||||
<v-btn medium tile color="purple" class="mx-1 folder-button"
|
||||
@click="
|
||||
editFolderDialogStore.show = true;
|
||||
editFolderDialogStore.uuid = item.uuid;
|
||||
editFolderDialogStore.data.name = item.name;
|
||||
"
|
||||
>
|
||||
<v-icon>mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-btn medium tile color="red" class="mx-1 folder-button"
|
||||
@click="
|
||||
removeFolderDialogStore.show = true;
|
||||
removeFolderDialogStore.uuid = item.uuid;
|
||||
"
|
||||
>
|
||||
<v-icon>mdi-minus</v-icon>
|
||||
</v-btn>
|
||||
<v-btn medium tile color="blue" class="mx-1 folder-button"
|
||||
@click="sortFolder(item.uuid);"
|
||||
>
|
||||
<v-icon>mdi-ab-testing</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-container fluid>
|
||||
<itemiterator v-bind:key="item.uuid" v-for="item in itemsForIterator" :itemsForIterator="item.items"></itemiterator>
|
||||
</v-container>
|
||||
|
||||
</v-list-group>
|
||||
</v-item-group>
|
||||
</draggable>
|
||||
</template>
|
||||
|
||||
|
||||
|
|
@ -293,7 +175,7 @@ export default {
|
|||
components: {
|
||||
draggable
|
||||
},
|
||||
props: ['items'],
|
||||
props: ['itemsForIterator'],
|
||||
data: () => ({
|
||||
settings: {}
|
||||
}),
|
||||
|
|
|
|||
Loading…
Reference in a new issue