mirror of
https://github.com/overte-org/overte.git
synced 2025-08-10 00:08:53 +02:00
Further conversion state, functions not fully transferred/synced.
This commit is contained in:
Kasen IO
parent
ff333d120f
commit
55ff5a92bf
8 changed files with 699 additions and 348 deletions
5
scripts/system/inventory/package-lock.json
generated
5
scripts/system/inventory/package-lock.json
generated
|
|
@ -11301,6 +11301,11 @@
|
||||||
"loader-utils": "^1.2.0"
|
"loader-utils": "^1.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"vuex": {
|
||||||
|
"version": "3.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.3.tgz",
|
||||||
|
"integrity": "sha512-k8vZqNMSNMgKelVZAPYw5MNb2xWSmVgCKtYKAptvm9YtZiOXnRXFWu//Y9zQNORTrm3dNj1n/WaZZI26tIX6Mw=="
|
||||||
|
},
|
||||||
"watchpack": {
|
"watchpack": {
|
||||||
"version": "1.6.1",
|
"version": "1.6.1",
|
||||||
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
|
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,8 @@
|
||||||
"core-js": "^3.6.4",
|
"core-js": "^3.6.4",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vuedraggable": "^2.23.2",
|
"vuedraggable": "^2.23.2",
|
||||||
"vuetify": "^2.2.11"
|
"vuetify": "^2.2.11",
|
||||||
|
"vuex": "^3.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.3.0",
|
"@vue/cli-plugin-babel": "~4.3.0",
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
// inventory.js
|
// inventory.js
|
||||||
//
|
//
|
||||||
// Created by kasenvr@gmail.com on 2 Apr 2020
|
// Created by kasenvr@gmail.com on 2 Apr 2020
|
||||||
// Copyright 2020 Vircadia Contributors
|
// Copyright 2020 Vircadia and contributors.
|
||||||
//
|
//
|
||||||
// Distributed under the Apache License, Version 2.0.
|
// Distributed under the Apache License, Version 2.0.
|
||||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
// App.vue
|
// App.vue
|
||||||
//
|
//
|
||||||
// Created by kasenvr@gmail.com on 7 Apr 2020
|
// Created by kasenvr@gmail.com on 7 Apr 2020
|
||||||
// Copyright 2020 Vircadia Contributors
|
// Copyright 2020 Vircadia and contributors.
|
||||||
//
|
//
|
||||||
// Distributed under the Apache License, Version 2.0.
|
// Distributed under the Apache License, Version 2.0.
|
||||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
|
@ -75,7 +75,270 @@
|
||||||
|
|
||||||
<v-content>
|
<v-content>
|
||||||
<v-container fluid>
|
<v-container fluid>
|
||||||
<folder v-bind:folder="folder"></folder>
|
<template v-if="!disabledProp">
|
||||||
|
<v-data-iterator
|
||||||
|
:items="items"
|
||||||
|
hide-default-footer
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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 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="
|
||||||
|
editDialog.show = true;
|
||||||
|
editDialog.uuid = item.uuid;
|
||||||
|
editDialog.data.type = item.type.toUpperCase();
|
||||||
|
editDialog.data.folder = null;
|
||||||
|
editDialog.data.name = item.name;
|
||||||
|
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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="
|
||||||
|
editFolderDialog.show = true;
|
||||||
|
editFolderDialog.uuid = item.uuid;
|
||||||
|
editFolderDialog.data.name = item.name;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-pencil</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn medium tile color="red" class="mx-1 folder-button"
|
||||||
|
@click="removeFolderDialog.show = true; removeFolderDialog.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
|
||||||
|
: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="
|
||||||
|
editDialog.show = true;
|
||||||
|
editDialog.uuid = item.uuid;
|
||||||
|
editDialog.data.type = item.type.toUpperCase();
|
||||||
|
editDialog.data.folder = null;
|
||||||
|
editDialog.data.name = item.name;
|
||||||
|
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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>
|
||||||
|
</v-data-iterator>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<itemiterator :items="items"></itemiterator>
|
||||||
</v-container>
|
</v-container>
|
||||||
</v-content>
|
</v-content>
|
||||||
|
|
||||||
|
|
@ -165,7 +428,7 @@
|
||||||
>
|
>
|
||||||
|
|
||||||
<v-select
|
<v-select
|
||||||
:items="supportedItemTypes"
|
:items="$store.state.supportedItemTypes"
|
||||||
class="my-2"
|
class="my-2"
|
||||||
v-model="editDialog.data.type"
|
v-model="editDialog.data.type"
|
||||||
:rules="[v => !!v || 'Type is required.']"
|
:rules="[v => !!v || 'Type is required.']"
|
||||||
|
|
@ -613,14 +876,14 @@ if (!browserDevelopment()) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
import draggable from 'vuedraggable'
|
// import draggable from 'vuedraggable'
|
||||||
import Root from 'components/Root'
|
import itemiterator from './components/ItemIterator'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
draggable,
|
// draggable,
|
||||||
Root
|
itemiterator
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
items: [
|
items: [
|
||||||
|
|
@ -751,40 +1014,6 @@ export default {
|
||||||
"uuid": "542543sg45s4gg54353",
|
"uuid": "542543sg45s4gg54353",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
iconType: {
|
|
||||||
"SCRIPT": {
|
|
||||||
"icon": "mdi-code-tags",
|
|
||||||
"color": "red",
|
|
||||||
},
|
|
||||||
"MODEL": {
|
|
||||||
"icon": "mdi-video-3d",
|
|
||||||
"color": "green",
|
|
||||||
},
|
|
||||||
"AVATAR": {
|
|
||||||
"icon": "mdi-account-convert",
|
|
||||||
"color": "purple",
|
|
||||||
},
|
|
||||||
"PLACE": {
|
|
||||||
"icon": "mdi-earth",
|
|
||||||
"color": "#0097A7", // cyan darken-2
|
|
||||||
},
|
|
||||||
"JSON": {
|
|
||||||
"icon": "mdi-inbox-multiple",
|
|
||||||
"color": "#37474F", // blue-grey darken-3
|
|
||||||
},
|
|
||||||
"UNKNOWN": {
|
|
||||||
"icon": "mdi-help",
|
|
||||||
"color": "grey",
|
|
||||||
}
|
|
||||||
},
|
|
||||||
supportedItemTypes: [
|
|
||||||
"SCRIPT",
|
|
||||||
"MODEL",
|
|
||||||
"AVATAR",
|
|
||||||
"PLACE",
|
|
||||||
"JSON",
|
|
||||||
"UNKNOWN",
|
|
||||||
],
|
|
||||||
removeDialog: {
|
removeDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
uuid: null,
|
uuid: null,
|
||||||
|
|
@ -877,6 +1106,7 @@ export default {
|
||||||
appVersion: "1.2.1",
|
appVersion: "1.2.1",
|
||||||
darkTheme: true,
|
darkTheme: true,
|
||||||
drawer: false,
|
drawer: false,
|
||||||
|
disabledProp: true,
|
||||||
}),
|
}),
|
||||||
created: function () {
|
created: function () {
|
||||||
vue_this = this;
|
vue_this = this;
|
||||||
|
|
@ -971,7 +1201,7 @@ export default {
|
||||||
var detectedItemType = null;
|
var detectedItemType = null;
|
||||||
itemType = itemType.toUpperCase();
|
itemType = itemType.toUpperCase();
|
||||||
|
|
||||||
this.supportedItemTypes.forEach(function(itemTypeInList) {
|
this.$store.state.supportedItemTypes.forEach(function (itemTypeInList) {
|
||||||
if (itemTypeInList == itemType) {
|
if (itemTypeInList == itemType) {
|
||||||
detectedItemType = itemTypeInList;
|
detectedItemType = itemTypeInList;
|
||||||
}
|
}
|
||||||
|
|
@ -1274,7 +1504,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
sendSettings: function() {
|
sendSettings: function() {
|
||||||
this.sendAppMessage("web-to-script-settings", this.settings );
|
this.sendAppMessage("web-to-script-settings", this.$store.state.settings );
|
||||||
},
|
},
|
||||||
receiveSettings: function(receivedSettings) {
|
receiveSettings: function(receivedSettings) {
|
||||||
if (!receivedSettings) {
|
if (!receivedSettings) {
|
||||||
|
|
@ -1287,10 +1517,10 @@ export default {
|
||||||
itemType = itemType.toUpperCase();
|
itemType = itemType.toUpperCase();
|
||||||
var returnedItemIcon;
|
var returnedItemIcon;
|
||||||
|
|
||||||
if (this.iconType[itemType]) {
|
if (this.$store.state.iconType[itemType]) {
|
||||||
returnedItemIcon = this.iconType[itemType].icon;
|
returnedItemIcon = this.$store.state.iconType[itemType].icon;
|
||||||
} else {
|
} else {
|
||||||
returnedItemIcon = this.iconType.UNKNOWN.icon;
|
returnedItemIcon = this.$store.state.iconType.UNKNOWN.icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
return returnedItemIcon;
|
return returnedItemIcon;
|
||||||
|
|
@ -1299,10 +1529,10 @@ export default {
|
||||||
itemType = itemType.toUpperCase();
|
itemType = itemType.toUpperCase();
|
||||||
var returnedItemIconColor;
|
var returnedItemIconColor;
|
||||||
|
|
||||||
if (this.iconType[itemType]) {
|
if (this.$store.state.iconType[itemType]) {
|
||||||
returnedItemIconColor = this.iconType[itemType].color;
|
returnedItemIconColor = this.$store.state.iconType[itemType].color;
|
||||||
} else {
|
} else {
|
||||||
returnedItemIconColor = this.iconType.UNKNOWN.color;
|
returnedItemIconColor = this.$store.state.iconType.UNKNOWN.color;
|
||||||
}
|
}
|
||||||
|
|
||||||
return returnedItemIconColor;
|
return returnedItemIconColor;
|
||||||
|
|
@ -1328,6 +1558,9 @@ export default {
|
||||||
// alert(JSON.stringify(JSONtoSend));
|
// alert(JSON.stringify(JSONtoSend));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// Whenever the item list changes, this will notice and then send it to the script to be saved.
|
// Whenever the item list changes, this will notice and then send it to the script to be saved.
|
||||||
|
|
@ -1339,20 +1572,15 @@ export default {
|
||||||
}, // Whenever the settings change, we want to save that state.
|
}, // Whenever the settings change, we want to save that state.
|
||||||
settings: {
|
settings: {
|
||||||
deep: true,
|
deep: true,
|
||||||
handler() {
|
handler: function(newVal) {
|
||||||
|
this.$store.commit('mutate', {
|
||||||
|
property: 'settings',
|
||||||
|
with: newVal
|
||||||
|
});
|
||||||
this.sendSettings();
|
this.sendSettings();
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
|
||||||
options : function (){
|
|
||||||
return {
|
|
||||||
name: 'column-item',
|
|
||||||
pull: true,
|
|
||||||
put: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
331
scripts/system/inventory/src/components/ItemIterator.vue
Normal file
331
scripts/system/inventory/src/components/ItemIterator.vue
Normal file
|
|
@ -0,0 +1,331 @@
|
||||||
|
<!--
|
||||||
|
// ItemIterator.vue
|
||||||
|
//
|
||||||
|
// Created by Kalila L. on 13 April 2020.
|
||||||
|
// Copyright 2020 Vircadia and contributors..
|
||||||
|
//
|
||||||
|
// Distributed under the Apache License, Version 2.0.
|
||||||
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
-->
|
||||||
|
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<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 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="
|
||||||
|
editDialog.show = true;
|
||||||
|
editDialog.uuid = item.uuid;
|
||||||
|
editDialog.data.type = item.type.toUpperCase();
|
||||||
|
editDialog.data.folder = null;
|
||||||
|
editDialog.data.name = item.name;
|
||||||
|
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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="
|
||||||
|
editFolderDialog.show = true;
|
||||||
|
editFolderDialog.uuid = item.uuid;
|
||||||
|
editFolderDialog.data.name = item.name;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-pencil</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
<v-btn medium tile color="red" class="mx-1 folder-button"
|
||||||
|
@click="removeFolderDialog.show = true; removeFolderDialog.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
|
||||||
|
: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="
|
||||||
|
editDialog.show = true;
|
||||||
|
editDialog.uuid = item.uuid;
|
||||||
|
editDialog.data.type = item.type.toUpperCase();
|
||||||
|
editDialog.data.folder = null;
|
||||||
|
editDialog.data.name = item.name;
|
||||||
|
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import draggable from 'vuedraggable'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'itemiterator',
|
||||||
|
components: {
|
||||||
|
draggable
|
||||||
|
},
|
||||||
|
props: ['items'],
|
||||||
|
data: () => ({
|
||||||
|
settings: {}
|
||||||
|
}),
|
||||||
|
created: function () {
|
||||||
|
this.settings = this.$store.state.settings;
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
options : function (){
|
||||||
|
return {
|
||||||
|
name: 'column-item',
|
||||||
|
pull: true,
|
||||||
|
put: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
settingsChanged() {
|
||||||
|
return this.$store.state.settings;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
settingsChanged (newVal, oldVal) {
|
||||||
|
console.info ("Settings previous value:", oldVal);
|
||||||
|
if (newVal) {
|
||||||
|
this.settings = newVal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getIcon: function(itemType) {
|
||||||
|
itemType = itemType.toUpperCase();
|
||||||
|
var returnedItemIcon;
|
||||||
|
|
||||||
|
if (this.$store.state.iconType[itemType]) {
|
||||||
|
returnedItemIcon = this.$store.state.iconType[itemType].icon;
|
||||||
|
} else {
|
||||||
|
returnedItemIcon = this.$store.state.iconType.UNKNOWN.icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
return returnedItemIcon;
|
||||||
|
},
|
||||||
|
getIconColor: function(itemType) {
|
||||||
|
itemType = itemType.toUpperCase();
|
||||||
|
var returnedItemIconColor;
|
||||||
|
|
||||||
|
if (this.$store.state.iconType[itemType]) {
|
||||||
|
returnedItemIconColor = this.$store.state.iconType[itemType].color;
|
||||||
|
} else {
|
||||||
|
returnedItemIconColor = this.$store.state.iconType.UNKNOWN.color;
|
||||||
|
}
|
||||||
|
|
||||||
|
return returnedItemIconColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -1,286 +0,0 @@
|
||||||
<!--
|
|
||||||
// Root.vue
|
|
||||||
//
|
|
||||||
// Created by Kalila L. on 13 April 2020.
|
|
||||||
// Copyright 2020 Vircadia Contributors.
|
|
||||||
//
|
|
||||||
// Distributed under the Apache License, Version 2.0.
|
|
||||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
||||||
-->
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<v-data-iterator
|
|
||||||
:items="items"
|
|
||||||
hide-default-footer
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
<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 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="
|
|
||||||
editDialog.show = true;
|
|
||||||
editDialog.uuid = item.uuid;
|
|
||||||
editDialog.data.type = item.type.toUpperCase();
|
|
||||||
editDialog.data.folder = null;
|
|
||||||
editDialog.data.name = item.name;
|
|
||||||
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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="
|
|
||||||
editFolderDialog.show = true;
|
|
||||||
editFolderDialog.uuid = item.uuid;
|
|
||||||
editFolderDialog.data.name = item.name;
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<v-icon>mdi-pencil</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
<v-btn medium tile color="red" class="mx-1 folder-button"
|
|
||||||
@click="removeFolderDialog.show = true; removeFolderDialog.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
|
|
||||||
: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="
|
|
||||||
editDialog.show = true;
|
|
||||||
editDialog.uuid = item.uuid;
|
|
||||||
editDialog.data.type = item.type.toUpperCase();
|
|
||||||
editDialog.data.folder = null;
|
|
||||||
editDialog.data.name = item.name;
|
|
||||||
editDialog.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="shareDialog.show = true; shareDialog.data.url = item.url; shareDialog.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="removeDialog.show = true; removeDialog.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>
|
|
||||||
</v-data-iterator>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'Root',
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
|
|
||||||
}),
|
|
||||||
created: function () {
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import vuetify from './plugins/vuetify';
|
import vuetify from './plugins/vuetify';
|
||||||
|
import { store } from './plugins/store';
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
vuetify,
|
vuetify,
|
||||||
|
store,
|
||||||
render: h => h(App)
|
render: h => h(App)
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|
|
||||||
70
scripts/system/inventory/src/plugins/store.js
Normal file
70
scripts/system/inventory/src/plugins/store.js
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
/*
|
||||||
|
store.js
|
||||||
|
|
||||||
|
Created by Kalila L. on 16 Apr 2020.
|
||||||
|
Copyright 2020 Vircadia and contributors.
|
||||||
|
|
||||||
|
Distributed under the Apache License, Version 2.0.
|
||||||
|
See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Vuex from 'vuex';
|
||||||
|
|
||||||
|
Vue.use(Vuex);
|
||||||
|
|
||||||
|
export const store = new Vuex.Store({
|
||||||
|
devtools: true,
|
||||||
|
state: {
|
||||||
|
settings: {
|
||||||
|
"displayDensity": {
|
||||||
|
"size": 1,
|
||||||
|
"labels": [
|
||||||
|
"List",
|
||||||
|
"Compact",
|
||||||
|
"Large",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
iconType: {
|
||||||
|
"SCRIPT": {
|
||||||
|
"icon": "mdi-code-tags",
|
||||||
|
"color": "red",
|
||||||
|
},
|
||||||
|
"MODEL": {
|
||||||
|
"icon": "mdi-video-3d",
|
||||||
|
"color": "green",
|
||||||
|
},
|
||||||
|
"AVATAR": {
|
||||||
|
"icon": "mdi-account-convert",
|
||||||
|
"color": "purple",
|
||||||
|
},
|
||||||
|
"PLACE": {
|
||||||
|
"icon": "mdi-earth",
|
||||||
|
"color": "#0097A7", // cyan darken-2
|
||||||
|
},
|
||||||
|
"JSON": {
|
||||||
|
"icon": "mdi-inbox-multiple",
|
||||||
|
"color": "#37474F", // blue-grey darken-3
|
||||||
|
},
|
||||||
|
"UNKNOWN": {
|
||||||
|
"icon": "mdi-help",
|
||||||
|
"color": "grey",
|
||||||
|
}
|
||||||
|
},
|
||||||
|
supportedItemTypes: [
|
||||||
|
"SCRIPT",
|
||||||
|
"MODEL",
|
||||||
|
"AVATAR",
|
||||||
|
"PLACE",
|
||||||
|
"JSON",
|
||||||
|
"UNKNOWN",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
mutate(state, payload) {
|
||||||
|
state[payload.property] = payload.with;
|
||||||
|
console.info("Payload:", payload.property, "with:", payload.with, "state is now:", this.state);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue