Nesting works correctly now...

This commit is contained in:
Kasen IO 2020-04-20 00:41:03 -04:00
parent f5f49ec3ae
commit 633c7e4515
2 changed files with 163 additions and 273 deletions

View file

@ -75,7 +75,15 @@
<v-content> <v-content>
<v-container fluid> <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-container>
</v-content> </v-content>
@ -659,18 +667,18 @@ export default {
{ {
"hasChildren": false, "hasChildren": false,
"type": "script", "type": "script",
"name": "TESTFOLDERSCRIPT", "name": "inception1",
"url": "https://googfdafsgaergale.com/vr.js", "url": "https://googfdafsgaergale.com/vr.js",
"folder": "No Folder", "folder": "No Folder",
"uuid": "54hgfhgf25fdfadf4354353", "uuid": "54hgfhgf25fdfadeqwqeqf4354353",
}, },
{ {
"hasChildren": false, "hasChildren": false,
"type": "script", "type": "script",
"name": "FOLDERSCRIPT2", "name": "inception432",
"url": "https://googfdafsgaergale.com/vr.js", "url": "https://googfdafsgaergale.com/vr.js",
"folder": "No Folder", "folder": "No Folder",
"uuid": "54hgfhgf25ffdafddfadf4354353", "uuid": "54hgfhgf25ffdafdWDQDQWWQdfadf4354353",
}, },
], ],
"uuid": "54354363wgtrhtrhegs45ujs" "uuid": "54354363wgtrhtrhegs45ujs"

View file

@ -9,278 +9,160 @@
--> -->
<template> <template>
<v-col <draggable :group="options" :list="itemsForIterator" handle=".handle">
cols="12" <v-item-group
sm="6" v-for="item in itemsForIterator"
md="4" v-bind:key="item.uuid"
lg="3" >
class="py-1 column-item" <v-list-item
> one-line
<draggable :group="options" :list="items" handle=".handle"> v-if="!item.hasChildren"
<v-item-group class="mx-auto draggable-card"
v-for="item in items" max-width="344"
v-bind:key="item.uuid" outlined
> >
<v-list-item <div class="handle pa-2">
one-line <v-icon color="orange darken-2">mdi-blur-linear</v-icon>
v-if="!item.hasChildren" </div>
class="mx-auto draggable-card" <v-list-item-content
max-width="344" class="pb-1 pt-2 pl-4"
outlined >
> <div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div>
<div class="handle pa-2"> <v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title>
<v-icon color="orange darken-2">mdi-blur-linear</v-icon> <v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle>
</div> </v-list-item-content>
<v-list-item-content
class="pb-1 pt-2 pl-4" <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-icon>{{getIcon(item.type)}}</v-icon>
<v-list-item-title class="subtitle-1 mb-1">{{item.name}}</v-list-item-title> </v-btn>
<v-list-item-subtitle v-show="settings.displayDensity.size == 2">{{item.url}}</v-list-item-subtitle> <!-- settings.displayDensity.size < 1 -->
</v-list-item-content> <v-btn
:style="{backgroundColor: (getIconColor(item.type)) }"
<v-menu bottom left> v-show="settings.displayDensity.size < 1"
<template v-slot:activator="{ on }"> small
<!-- settings.displayDensity.size >= 1 --> fab
<v-btn dark
:style="{backgroundColor: (getIconColor(item.type)) }" v-on="on"
v-show="settings.displayDensity.size >= 1" >
medium <v-icon>{{getIcon(item.type)}}</v-icon>
fab </v-btn>
dark </template>
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 color="grey darken-3">
<v-list-item <v-list-item
@click="useItem(item.type, item.url)" @click="useItem(item.type, item.url)"
> >
<v-list-item-title>Use</v-list-item-title> <v-list-item-title>Use</v-list-item-title>
<v-list-item-action> <v-list-item-action>
<v-icon>mdi-play</v-icon> <v-icon>mdi-play</v-icon>
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>
<v-list-item <v-list-item
@click=" @click="
editDialogStore.show = true; editDialogStore.show = true;
editDialogStore.uuid = item.uuid; editDialogStore.uuid = item.uuid;
editDialogStore.data.type = item.type.toUpperCase(); editDialogStore.data.type = item.type.toUpperCase();
editDialogStore.data.folder = null; editDialogStore.data.folder = null;
editDialogStore.data.name = item.name; editDialogStore.data.name = item.name;
editDialogStore.data.url = item.url; editDialogStore.data.url = item.url;
getFolderList('edit'); getFolderList('edit');
" "
> >
<v-list-item-title>Edit</v-list-item-title> <v-list-item-title>Edit</v-list-item-title>
<v-list-item-action> <v-list-item-action>
<v-icon>mdi-pencil</v-icon> <v-icon>mdi-pencil</v-icon>
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>
<v-list-item <v-list-item
@click=" @click="
shareDialogStore.show = true; shareDialogStore.show = true;
shareDialogStore.data.url = item.url; shareDialogStore.data.url = item.url;
shareDialogStore.data.uuid = item.uuid; shareDialogStore.data.uuid = item.uuid;
sendAppMessage('web-to-script-request-nearby-users', '') sendAppMessage('web-to-script-request-nearby-users', '')
" "
> >
<v-list-item-title>Share</v-list-item-title> <v-list-item-title>Share</v-list-item-title>
<v-list-item-action> <v-list-item-action>
<v-icon>mdi-share</v-icon> <v-icon>mdi-share</v-icon>
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>
<v-list-item <v-list-item
@click=" @click="
removeDialogStore.show = true; removeDialogStore.show = true;
removeDialogStore.uuid = item.uuid; removeDialogStore.uuid = item.uuid;
" "
color="red darken-1" color="red darken-1"
> >
<v-list-item-title>Remove</v-list-item-title> <v-list-item-title>Remove</v-list-item-title>
<v-list-item-action> <v-list-item-action>
<v-icon>mdi-minus</v-icon> <v-icon>mdi-minus</v-icon>
</v-list-item-action> </v-list-item-action>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
</v-list-item> </v-list-item>
<!-- The Folder List Item --> <!-- The Folder List Item -->
<v-list-group <v-list-group
v-if="item.hasChildren" v-if="item.hasChildren"
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... --> <!-- 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
class="mx-auto" class="mx-auto"
max-width="344" max-width="344"
outlined 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"
> >
<draggable <v-icon class="folder-icon" color="teal">mdi-folder-settings</v-icon>
:list="item.items" {{item.name}}
:group="options" </v-list-item>
> </template>
<v-item-group <div class="text-center my-2">
v-for="item in item.items" <v-btn medium tile color="purple" class="mx-1 folder-button"
v-bind:key="item.uuid" @click="
> editFolderDialogStore.show = true;
<v-list-item editFolderDialogStore.uuid = item.uuid;
one-line editFolderDialogStore.data.name = item.name;
class="mx-auto draggable-card" "
outlined >
> <v-icon>mdi-pencil</v-icon>
<div class="handle pa-2"> </v-btn>
<v-icon color="orange darken-2">mdi-blur-linear</v-icon> <v-btn medium tile color="red" class="mx-1 folder-button"
</div> @click="
<v-list-item-content class="pb-1 pt-2"> removeFolderDialogStore.show = true;
<div v-show="settings.displayDensity.size > 0" class="overline" style="font-size: 0.825rem !important;">{{item.type}}</div> removeFolderDialogStore.uuid = item.uuid;
<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-icon>mdi-minus</v-icon>
</v-btn>
<v-menu bottom left> <v-btn medium tile color="blue" class="mx-1 folder-button"
<template v-slot:activator="{ on }"> @click="sortFolder(item.uuid);"
<!-- settings.displayDensity.size >= 1 --> >
<v-btn <v-icon>mdi-ab-testing</v-icon>
:style="{backgroundColor: (getIconColor(item.type)) }" </v-btn>
v-show="settings.displayDensity.size >= 1" </div>
medium
fab <v-container fluid>
dark <itemiterator v-bind:key="item.uuid" v-for="item in itemsForIterator" :itemsForIterator="item.items"></itemiterator>
v-on="on" </v-container>
>
<v-icon>{{getIcon(item.type)}}</v-icon> </v-list-group>
</v-btn> </v-item-group>
<!-- settings.displayDensity.size < 1 --> </draggable>
<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>
</template> </template>
@ -293,7 +175,7 @@ export default {
components: { components: {
draggable draggable
}, },
props: ['items'], props: ['itemsForIterator'],
data: () => ({ data: () => ({
settings: {} settings: {}
}), }),