Improved library view layout

app/imports/constants/PROPERTIES.js

@@ -0,0 +1,80 @@
+const PROPERTIES = Object.freeze({
+  action: {
+    icon: 'offline_bolt',
+    name: 'Action'
+  },
+  attribute: {
+    icon: 'donut_small',
+    name: 'Attribute'
+  },
+  buff: {
+    icon: 'star',
+    name: 'Buff'
+  },
+  classLevel: {
+    icon: 'school',
+    name: 'Class level'
+  },
+  damageMultiplier: {
+    icon: 'layers',
+    name: 'Damage multiplier'
+  },
+  effect: {
+    icon: 'show_chart',
+    name: 'Effect'
+  },
+  experience: {
+    icon: 'add',
+    name: 'Experience'
+  },
+  feature: {
+    icon: 'subject',
+    name: 'Feature'
+  },
+  folder: {
+    icon: 'folder',
+    name: 'Folder'
+  },
+  note: {
+    icon: 'note',
+    name: 'Note'
+  },
+  proficiency: {
+    icon: 'radio_button_checked',
+    name: 'Proficiency'
+  },
+  roll: {
+    icon: 'flare',
+    name: 'Roll'
+  },
+  skill: {
+    icon: 'check_box',
+    name: 'Skill'
+  },
+  spellList: {
+    icon: 'list',
+    name: 'Spell list'
+  },
+  spell: {
+    icon: 'whatshot',
+    name: 'Spell'
+  },
+  container: {
+    icon: 'work',
+    name: 'Container'
+  },
+  item: {
+    icon: 'category',
+    name: 'Item'
+  },
+});
+
+export default PROPERTIES;
+
+export function getPropertyName(type){
+  return type && PROPERTIES[type] && PROPERTIES[type].name;
+}
+
+export function getPropertyIcon(type){
+  return type && PROPERTIES[type] && PROPERTIES[type].icon;
+}

app/imports/constants/PROPERTY_ICONS.js

@@ -1,21 +0,0 @@
-const PROPERTY_ICONS = Object.freeze({
-  action: 'offline_bolt',
-  attribute: 'donut_small',
-  buff: 'star',
-  classLevel: 'school',
-  damageMultiplier: 'layers',
-  effect: 'show_chart',
-  experience: 'add',
-  feature: 'subject',
-  folder: 'folder',
-  note: 'note',
-  proficiency: 'radio_button_checked',
-  roll: 'flare',
-  skill: 'check_box',
-  spellList: 'list',
-  spell: 'whatshot',
-  container: 'work',
-  item: 'category',
-});
-
-export default PROPERTY_ICONS;

app/imports/ui/components/properties/PropertyIcon.vue

@@ -0,0 +1,18 @@
+<template lang="html">
+  <v-icon>{{icon}}</v-icon>
+</template>
+
+<script>
+import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
+
+export default {
+	props: {
+		type: String,
+	},
+	computed: {
+		icon(){
+			return getPropertyIcon(this.type);
+		},
+	},
+}
+</script>

app/imports/ui/components/tree/TreeNode.vue

@@ -28,11 +28,12 @@
 					:class="selected && 'primary--text'"
 					:disabled="expanded"
 				>drag_handle</v-icon>
-				<v-icon
+				<property-icon
 					v-if="node.type"
 					class="mr-2"
+					:type="node.type"
 					:class="selected && 'primary--text'"
-				>{{icon(node.type)}}</v-icon>
+				/>
 				<div class="text-no-wrap text-truncate">
 					{{node && node.name}}
 				</div>
@@ -62,12 +63,15 @@
 	* the tree view shows off the full character structure, and where each part of
 	* character comes from.
 	**/
-	import PROPERTY_ICONS from '/imports/constants/PROPERTY_ICONS.js';
+	import PropertyIcon from '/imports/ui/components/properties/PropertyIcon.vue';
 	export default {
 		name: 'tree-node',
 		beforeCreate() {
 		  this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
 		},
+		components: {
+			PropertyIcon,
+		},
 		data(){ return {
 			expanded: false,
 		}},

app/imports/ui/pages/Library.vue

@@ -9,14 +9,14 @@
 		</template>
 		<v-card class="ma-4 layout row">
 			<div>
-				<v-toolbar>
+				<v-toolbar dense flat>
 					<v-spacer/>
-					<v-btn-toggle>
-						<v-btn v-model="organize">
-							<v-icon class="mr-1">reorder</v-icon>
-							Organize
-						</v-btn>
-					</v-btn-toggle>
+					<v-switch
+						label="Organize"
+						class="mx-3"
+						v-model="organize"
+						style="flex-grow: 0; height: 32px;"
+					/>
 				</v-toolbar>
 				<library-contents-container
 				:library-id="$route.params.id"
@@ -26,11 +26,17 @@
 				/>
 			</div>
 			<v-divider vertical/>
-			<v-card-text
-			style="flex-grow: 1;"
-			>
-				<property-viewer :model="selectedNode"/>
-			</v-card-text>
+			<div style="width: 100%;">
+				<v-toolbar dense flat>
+					<property-icon :type="selectedNode && selectedNode.type" class="mr-2"/>
+					<div class="title">
+						{{getPropertyName(selectedNode && selectedNode.type)}}
+					</div>
+				</v-toolbar>
+				<v-card-text>
+					<property-viewer :model="selectedNode"/>
+				</v-card-text>
+			</div>
 		</v-card>
 		<v-btn fixed fab bottom right
 			color="primary"
@@ -49,12 +55,15 @@
 	import LibraryNodes, { insertNode } from '/imports/api/library/LibraryNodes.js';
 	import Libraries from '/imports/api/library/Libraries.js';
 	import { setDocToLastOrder } from '/imports/api/parenting/order.js';
+	import PropertyIcon from '/imports/ui/components/properties/PropertyIcon.vue';
+	import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 
 	export default {
 		components: {
 			ToolbarLayout,
 			LibraryContentsContainer,
 			PropertyViewer,
+			PropertyIcon,
 		},
 		data(){ return {
 			organize: false,
@@ -77,6 +86,7 @@
 					}
 				});
 			},
+			getPropertyName,
 		},
 		meteor: {
 			$subscribe: {

app/imports/ui/properties/PropertySelector.vue

@@ -2,10 +2,10 @@
 	<div>
 		<v-container fluid grid-list-lg fill-height>
 			<v-layout row wrap>
-				<v-flex v-for="property in properties" :key="property.name" xs4>
-					<v-card hover @click="$emit('select', property)">
+				<v-flex v-for="(type, property) in PROPERTIES" :key="type" xs4>
+					<v-card hover @click="$emit('select', type)">
 						<div class="layout row align-center justify-center" style="min-height: 70px;">
-							<v-icon x-large>{{ icon(property.type) }}</v-icon>
+							<v-icon x-large>{{property.icon}}</v-icon>
 						</div>
 						<h3 class="subtitle pb-3" style="text-align: center;">
 							{{ property.name }}
@@ -18,34 +18,11 @@
 </template>
 
 <script>
-import PROPERTY_ICONS from '/imports/constants/PROPERTY_ICONS.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
 export default {
 	data(){return {
-		properties: [
-			{name: 'Action', icon: 'offline_bolt', type: 'action'},
-			{name: 'Attribute', icon: 'donut_small', type: 'attribute'},
-			{name: 'Buff', icon: 'star', type: 'buff'},
-			{name: 'Class Level', icon: 'school', type: 'classLevel'},
-			{name: 'Damage Multiplier', icon: 'layers', type: 'damageMultiplier'},
-			{name: 'Effect', icon: 'show_chart', type: 'effect'},
-			{name: 'Experience', icon: 'add', type: 'experience'},
-			{name: 'Feature', icon: 'subject', type: 'feature'},
-			{name: 'Folder', icon: 'folder', type: 'folder'},
-			{name: 'Note', icon: 'note', type: 'note'},
-			{name: 'Proficiency', icon: 'radio_button_checked', type: 'proficiency'},
-			{name: 'Roll', icon: 'flare', type: 'roll'},
-			{name: 'Skill', icon: 'check_box', type: 'skill'},
-			{name: 'Spell List', icon: 'list', type: 'spellList'},
-			{name: 'Spell', icon: 'whatshot', type: 'spell'},
-			{name: 'Container', icon: 'work', type: 'container'},
-			{name: 'Item', icon: 'category', type: 'item'},
-		],
-	}},
-	methods: {
-		icon(type){
-			return PROPERTY_ICONS[type];
-		},
-	}
+		PROPERTIES,
+	};},
 }
 </script>