Change button layout of the object-library

src/objectList.vue

@@ -7,26 +7,25 @@
       </template>
       <template #default>
         <v-expansion-panels multiple>
-          <VcsExpansionPanel v-for = "(subcats, categoryName) in objLib" :key="categoryName" :heading="categoryName">
-            <v-container v-for="(entries, subCategory) in subcats" :key = "subCategory" class=" py-1 px-1 border-b-md">
-              <v-col>
-              <VcsLabel class="mb-4 text-h2">{{subCategory}}</VcsLabel>
-              <v-list>
-                <v-row>
+          <VcsExpansionPanel v-for = "(subcats, categoryName) in objLib" :key="categoryName" :heading="categoryName" >
+            <v-container class="px-1 py-0">
+              <v-row class="v-row--no-gutters">
+            <template v-for="(entries, subCategory) in subcats" :key = "subCategory">
                   <vcs-button
                       v-for="entry in entries"
                       :key="entry.title"
                       @click="placeCatalogModel(entry.model)"
-                      class="p-0 mx-1 my-0 border gc-2"
-                      style="width: auto; height: auto; margin-left: 1rem; margin-bottom: 1px;"
-                      variant="filled"
+                      class="p-0 mx-1 my-1 border gc-2"
+                      style="width: 66px; height: 66px; margin-left: 1rem; margin-bottom: 1px;"
+                      color="base-lighter-4"
+                      variant="tonal"
+                      :tooltip="getEntryTooltip(entry, subCategory)"
                   >
-                    <img :src="entry.icon" :alt="entry.icon" style="display: block; max-width: 100%; max-height: 100%;" />
+                    <img :src="entry.icon" :alt="entry.icon" style="display: block; width: 64px; height: 64px;" />
                   </vcs-button>
-                </v-row>
-              </v-list>
-              </v-col>
               <v-divider/>
+            </template>
+              </v-row>
             </v-container>
           </VcsExpansionPanel>
         </v-expansion-panels>
@@ -217,6 +216,15 @@ function getCatalogEntries(json, linkPrefix) {
     return part;
   }
 
+export function getEntryTooltip (entry, subcategory) {
+    let tooltip = 'Kategorie: ';
+    const category = subcategory || 'Unbekannt';
+
+    tooltip +=  category;
+    return tooltip;
+
+  }
+
 async function placeCatalogModel(modelLink){
   loadCatalogModel(modelLink).then(model => {
     const catModel = model;
@@ -541,6 +549,9 @@ function uploadModel() {
         saveConfiguration() {
           saveObjects();
         },
+        getEntryTooltip(entry, subcategory) {
+          return getEntryTooltip(entry, subcategory);
+        },
       };
 
     },