Added library list UI

app/imports/ui/components/Sidebar.vue

@@ -5,7 +5,7 @@
 				{{userName}}
 				<v-spacer></v-spacer>
 				<v-tooltip bottom>
-					<v-btn flat icon slot="activator"><v-icon>settings</v-icon></v-btn>
+					<v-btn flat icon slot="activator" to="/account"><v-icon>settings</v-icon></v-btn>
 					<span>Account Settings</span>
 				</v-tooltip>
 			</v-layout>
@@ -82,6 +82,7 @@
 				return [
 					{title: "Home", icon: "home", to: "/"},
 	        {title: "Creatures", icon: "group", to: "/characterList", vif: Meteor.userId()},
+					{title: "Libraries", icon: "book", to: "/library", vif: Meteor.userId()},
 	        {title: "Send Feedback", icon: "bug_report", to: "/feedback"},
 	        {title: "Patreon", icon: "", href: "https://www.patreon.com/dicecloud"},
 	        {title: "Github", icon: "", href: "https://github.com/ThaumRystra/DiceCloud1"},

app/imports/ui/components/global/SmartInput.js

@@ -18,7 +18,7 @@ export default {
     dirty: false,
     safeValue: this.value,
     inputValue: this.value,
-  }},
+  };},
   props: {
     value: [String, Number],
     debounceTime: {

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -3,6 +3,7 @@ import AttributeDialogContainer from '/imports/ui/creature/properties/attributes
 import AttributeCreationDialog from '/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue';
 import FeatureCreationDialog from '/imports/ui/creature/properties/features/FeatureCreationDialog.vue';
 import FeatureDialogContainer from '/imports/ui/creature/properties/features/FeatureDialogContainer.vue';
+import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
 import SkillDialogContainer from '/imports/ui/creature/properties/skills/SkillDialogContainer.vue';
 
 export default {
@@ -11,5 +12,6 @@ export default {
   AttributeCreationDialog,
   FeatureCreationDialog,
   FeatureDialogContainer,
+  LibraryCreationDialog,
   SkillDialogContainer,
 };

app/imports/ui/library/LibraryCreationDialog.vue

@@ -0,0 +1,53 @@
+<template lang="html">
+	<dialog-base>
+		<template slot="toolbar">
+			<div>
+				New Library
+			</div>
+		</template>
+		<template>
+			<text-field label="name" :value="library.name" @change="nameChanged" :debounce-time="0"/>
+		</template>
+		<template slot="actions">
+			<v-spacer/>
+			<v-btn
+				flat
+				:disabled="!valid"
+				@click="$store.dispatch('popDialogStack', library)"
+			>
+				Insert Library
+			</v-btn>
+		</template>
+	</dialog-base>
+</template>
+
+<script>
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+
+	export default {
+		data(){ return {
+			library: {
+				name: 'New Library',
+			},
+			valid: true,
+		}},
+		components: {
+			DialogBase,
+		},
+		methods: {
+			nameChanged(val, ack){
+				if (val){
+					this.library.name = val;
+					this.valid = true,
+					ack();
+				} else {
+					this.valid = false;
+					ack('Name is required')
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/pages/Libraries.vue

@@ -0,0 +1,71 @@
+<template lang="html">
+  <toolbar-layout>
+  	<span slot="toolbar">Libraries</span>
+		<v-card class="ma-4">
+			<v-list v-if="libraries.length">
+				<v-list-tile
+					v-for="library in libraries"
+					:key="library._id"
+					:to="library.url"
+					:data-id="library._id"
+				>
+					<v-list-tile-content>
+						<v-list-tile-title>
+							{{library.name}}
+						</v-list-tile-title>
+					</v-list-tile-content>
+				</v-list-tile>
+			</v-list>
+			<v-card-text v-else-if="$subReady.libraries">
+				You aren't subscribed to any libraries :O
+			</v-card-text>
+			<v-card-text v-if="!$subReady.libraries" class="layout row justify-center">
+				<v-progress-circular indeterminate/>
+			</v-card-text>
+		</v-card>
+		<v-btn fixed fab bottom right
+			color="primary"
+			@click="insertLibrary"
+			data-id="insert-library-fab"
+		>
+			<v-icon>add</v-icon>
+		</v-btn>
+  </toolbar-layout>
+</template>
+
+<script>
+	import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
+	import Libraries, {insertLibrary} from '/imports/api/library/Libraries.js';
+
+	export default {
+		components: {
+			ToolbarLayout,
+		},
+		methods: {
+			insertLibrary(){
+				this.$store.commit('pushDialogStack', {
+					component: 'library-creation-dialog',
+					elementId: 'insert-library-fab',
+					callback(library){
+						if (!library) return;
+						let libraryId = insertLibrary.call(library);
+						return libraryId;
+					}
+				});
+			},
+		},
+		meteor: {
+			$subscribe: {
+				'libraries': [],
+			},
+			libraries(){
+				return Libraries.find({}, {
+					sort: {name: 1}
+				}).fetch();
+			}
+		}
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/router.js

@@ -1,13 +1,14 @@
 import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2';
-import Vue from "vue";
+import Vue from 'vue';
 
 // Components
 import Home from '/imports/ui/pages/Home.vue';
-import CharacterList from "/imports/ui/pages/CharacterList.vue";
-import CharacterSheetPage from "/imports/ui/pages/CharacterSheetPage.vue";
-import SignIn from "/imports/ui/pages/SignIn.vue" ;
-import Register from "/imports/ui/pages/Register.vue" ;
-import Account from "/imports/ui/pages/Account.vue" ;
+import CharacterList from '/imports/ui/pages/CharacterList.vue';
+import Libraries from '/imports/ui/pages/Libraries.vue';
+import CharacterSheetPage from '/imports/ui/pages/CharacterSheetPage.vue';
+import SignIn from '/imports/ui/pages/SignIn.vue' ;
+import Register from '/imports/ui/pages/Register.vue' ;
+import Account from '/imports/ui/pages/Account.vue' ;
 
 // Not found
 import NotFound from '/imports/ui/pages/NotFound.vue';
@@ -27,22 +28,25 @@ RouterFactory.configure(factory => {
       name: 'home',
       component: Home,
     },{
-      path: "/characterList",
+      path: '/characterList',
       component: CharacterList,
     },{
-      path: "/character/:id/:urlName",
+      path: '/library',
+      component: Libraries,
+    },{
+      path: '/character/:id/:urlName',
       component: CharacterSheetPage,
     },{
-      path: "/character/:id",
+      path: '/character/:id',
       component: CharacterSheetPage,
     },{
-			path: "/sign-in",
+			path: '/sign-in',
 			component: SignIn,
 		},{
-			path: "/register",
+			path: '/register',
 			component: Register,
 		},{
-			path: "/account",
+			path: '/account',
 			component: Account,
 		},
   ]);
@@ -61,7 +65,7 @@ RouterFactory.configure(factory => {
         component: StoryBook,
       }, {
         path: '/icon-admin',
-        name: "iconAdmin",
+        name: 'iconAdmin',
         component: IconAdmin,
       },
     ]);

app/imports/ui/styles/inheritBackgrounds.css

@@ -0,0 +1,14 @@
+/**
+ * Some componets are used as targets for dialog animations often, and thus
+ * require a background color. Inheriting the color from the nearest ancestor
+ * that is known to have a background ensures that the background is
+ * consistent for both light and dark themes
+**/
+
+.v-list > div {
+  background-color: inherit;
+}
+
+.v-list > div > .v-list__tile {
+  background-color: inherit;
+}

app/imports/ui/styles/stylesIndex.js

@@ -1 +1,2 @@
-import "./speedDial.css";
+import './speedDial.css';
+import './inheritBackgrounds.css';