From d54e3dfc5ad81b97923534d4d321d2e040501b19 Mon Sep 17 00:00:00 2001
From: Seth Ladygo <alx-git@apparentinc.com>
Date: Fri, 17 May 2019 02:07:30 -0700
Subject: [PATCH] CatalogContents: nicer list tiles

---
 cateditor/src/components/CatalogContents.vue | 62 ++++++++++++++++++--
 1 file changed, 56 insertions(+), 6 deletions(-)

diff --git a/cateditor/src/components/CatalogContents.vue b/cateditor/src/components/CatalogContents.vue
index 32dd8e7..4b02b25 100644
--- a/cateditor/src/components/CatalogContents.vue
+++ b/cateditor/src/components/CatalogContents.vue
@@ -19,10 +19,31 @@
                   :class="sectionListItemClasses(item.id, hover)"
                   @click="selectSection(item.id)"
                 >
+                  <!-- TODO try move sectionparent into v-list-title
+                  and so section-drop can cover all interior
+                  -->
                   <v-list-tile-content class="section-parent">
                     <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                    <v-list-tile-sub-title
+                      class="caption font-weight-light"
+                      color="grey lighten-2"
+                    >
+                      {{sectionModelCount(item.id)}} {{sectionModelCount(item.id) | pluralize('model') }}
+                    </v-list-tile-sub-title>
                     <v-list-tile-sub-title class="section-drop" :section-id="item.id"></v-list-tile-sub-title>
                   </v-list-tile-content>
+
+                  <v-list-tile-action>
+                    <span class="group">
+                      <v-btn icon @click.stop="popInfo(item.id)">
+                        <v-icon small color="grey lighten-1">info</v-icon>
+                      </v-btn>
+                      <v-btn icon @click.stop="popDelete(item.id)">
+                        <v-icon small color="grey lighten-1">delete</v-icon>
+                      </v-btn>
+                    </span>
+                  </v-list-tile-action>
+
                 </v-list-tile>
               </v-hover>
             </div>
@@ -42,7 +63,26 @@
                   :class="modelListItemClasses(item.model, hover)"
                   @click="selectModel(item.model)"
                 >
-                  <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                  <v-list-tile-content>
+                    <v-list-tile-title v-html="item.name"></v-list-tile-title>
+                    <v-list-tile-sub-title
+                      class="caption font-weight-light"
+                      color="grey lighten-2">
+                      {{item.ids.length}} {{item.ids.length | pluralize('material') }}
+                    </v-list-tile-sub-title>
+                  </v-list-tile-content>
+
+                  <v-list-tile-action>
+                    <span class="group">
+                      <v-btn icon @click.stop="popInfo(item.id)">
+                        <v-icon small color="grey lighten-1">info</v-icon>
+                      </v-btn>
+                      <v-btn icon @click.stop="popDelete(item.id)">
+                        <v-icon small color="grey lighten-1">delete</v-icon>
+                      </v-btn>
+                    </span>
+                  </v-list-tile-action>
+
                 </v-list-tile>
               </v-hover>
             </div>
@@ -61,7 +101,21 @@
                   slot-scope="{ hover }"
                   :class="materialListItemClasses(item.id, hover)"
                 >
-                  <v-list-tile-title v-html="item.id"></v-list-tile-title>
+                  <v-list-tile-content>
+                    <v-list-tile-title><b>{{ item.id }}</b> {{ item.name }}</v-list-tile-title>
+                    <v-list-tile-sub-title v-html="item.color"></v-list-tile-sub-title>
+                  </v-list-tile-content>
+
+                  <v-list-tile-action>
+                    <span class="group">
+                      <v-btn icon @click="popInfo(item.id)">
+                        <v-icon small color="grey lighten-1">info</v-icon>
+                      </v-btn>
+                      <v-btn icon @click="popDelete(item.id)">
+                        <v-icon small color="grey lighten-1">delete</v-icon>
+                      </v-btn>
+                    </span>
+                  </v-list-tile-action>
                 </v-list-tile>
               </v-hover>
             </div>
@@ -70,10 +124,6 @@
 
       </v-flex>
 
-      <v-flex xs3>
-        <RawDisplayer :value="selectedMaterials" title="mats" />
-      </v-flex>
-
     </v-layout>
 
   </v-container>