From 2e77393b93068973329efce747133a55f44ff1ee Mon Sep 17 00:00:00 2001
From: Kasen IO <kasenvr@gmail.com>
Date: Wed, 8 Apr 2020 03:19:52 -0400
Subject: [PATCH] Semi working drag-between state...

---
 scripts/system/inventory/src/App.vue          | 62 +++++++++++++------
 .../inventory/src/assets/styles/styles.css    | 44 ++++++++++++-
 2 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/scripts/system/inventory/src/App.vue b/scripts/system/inventory/src/App.vue
index cc2466dcee..a618463ba6 100644
--- a/scripts/system/inventory/src/App.vue
+++ b/scripts/system/inventory/src/App.vue
@@ -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 
+            }
+        }
     }
 };
 
diff --git a/scripts/system/inventory/src/assets/styles/styles.css b/scripts/system/inventory/src/assets/styles/styles.css
index 68e92182fe..f5d3e1a274 100644
--- a/scripts/system/inventory/src/assets/styles/styles.css
+++ b/scripts/system/inventory/src/assets/styles/styles.css
@@ -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 }
\ No newline at end of file