Build details with no slots hidden moved to a dialog

app/imports/ui/components/ToolbarCard.vue

@@ -1,6 +1,7 @@
 <template lang="html">
   <v-card
     :hover="hasClickListener"
+    :elevation="hovering ? 8 : undefined"
     class="toolbar-card"
     @click="$emit('click')"
   >
@@ -11,6 +12,8 @@
       :dark="isDark"
       :light="!isDark"
       @click="$emit('toolbarclick')"
+      @mouseover="hoverToolbar(true)"
+      @mouseleave="hoverToolbar(false)"
     >
       <slot name="toolbar" />
     </v-toolbar>
@@ -31,17 +34,27 @@
 				},
 			},
 		},
+    data(){ return {
+      hovering: false,
+    }},
 		computed: {
 			isDark(){
 				return isDarkColor(this.color);
 			},
 			hasClickListener(){
-	    	return this.$listeners && !!this.$listeners.click;
+        return this.$listeners && !!this.$listeners.click;
 			},
 			hasToolbarClickListener(){
-	    	return this.$listeners && !!this.$listeners.toolbarclick;
+        return this.$listeners && !!this.$listeners.toolbarclick;
 			},
-		}
+		},
+    methods: {
+      hoverToolbar(val){
+        this.hovering = this.$listeners &&
+          !!this.$listeners.toolbarclick &&
+          val;
+      }
+    }
 	};
 </script>
 

app/imports/ui/creature/character/characterSheetTabs/CharacterTab.vue

@@ -21,11 +21,17 @@
         </v-card>
       </div>
       <div>
-        <v-card>
+        <toolbar-card
+          data-id="slot-card"
+          @toolbarclick="showSlotDialog"
+        >
+          <v-toolbar-title slot="toolbar">
+            Build
+          </v-toolbar-title>
           <v-card-text style="background-color: inherit;">
             <slots :creature-id="creatureId" />
           </v-card-text>
-        </v-card>
+        </toolbar-card>
       </div>
       <div>
         <v-card class="class-details">
@@ -110,12 +116,14 @@ import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import NoteCard from '/imports/ui/properties/components/persona/NoteCard.vue';
 import getActiveProperties from '/imports/api/creature/getActiveProperties.js';
 import Slots from '/imports/ui/creature/slots/Slots.vue';
+import ToolbarCard from '/imports/ui/components/ToolbarCard.vue';
 
 export default {
 	components: {
 		ColumnLayout,
 		NoteCard,
     Slots,
+    ToolbarCard,
 	},
 	props: {
 		creatureId: {
@@ -194,6 +202,15 @@ export default {
             !!this.creature.variables.milestoneLevels.value,
 				},
 			});
+    },
+    showSlotDialog(){
+      this.$store.commit('pushDialogStack', {
+				component: 'slot-details-dialog',
+				elementId: 'slot-card',
+				data: {
+					creatureId: this.creatureId,
+				},
+			});
     },
 	},
 };

app/imports/ui/creature/experiences/ExperienceInsertDialog.vue

@@ -1,5 +1,8 @@
 <template lang="html">
   <dialog-base>
+    <v-toolbar-title slot="toolbar">
+      Add Experience
+    </v-toolbar-title>
     <experience-form
       :start-as-milestone="startAsMilestone"
       :model="model"

app/imports/ui/creature/slots/SlotDetailsDialog.vue

@@ -1,9 +1,12 @@
 <template lang="html">
   <dialog-base>
     <v-toolbar-title slot="toolbar">
-      Slots
+      Build
     </v-toolbar-title>
-    <slots creature-id="creatureId" />
+    <slots
+      :creature-id="creatureId"
+      show-hidden-slots
+    />
   </dialog-base>
 </template>
 

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -13,6 +13,7 @@ import LibraryNodeDialog from '/imports/ui/library/LibraryNodeDialog.vue';
 import MoveLibraryNodeDialog from '/imports/ui/library/MoveLibraryNodeDialog.vue'
 import SelectCreaturesDialog from '/imports/ui/tabletop/SelectCreaturesDialog.vue';
 import ShareDialog from '/imports/ui/sharing/ShareDialog.vue';
+import SlotDetailsDialog from '/imports/ui/creature/slots/SlotDetailsDialog.vue';
 import SlotFillDialog from '/imports/ui/creature/slots/SlotFillDialog.vue';
 import TierTooLowDialog from '/imports/ui/user/TierTooLowDialog.vue';
 import UsernameDialog from '/imports/ui/user/UsernameDialog.vue';
@@ -33,6 +34,7 @@ export default {
   MoveLibraryNodeDialog,
   SelectCreaturesDialog,
 	ShareDialog,
+  SlotDetailsDialog,
   SlotFillDialog,
   TierTooLowDialog,
   UsernameDialog,

app/imports/ui/properties/components/features/FeatureCard.vue

@@ -2,7 +2,7 @@
   <toolbar-card
     :id="model._id"
     :color="model.color"
-    @click="$emit('click')"
+    @toolbarclick="$emit('click')"
   >
     <template slot="toolbar">
       <v-toolbar-title>