Fixed stuff, enabled character deletion

rpg-docs/client/views/GeneralCSS/globalDetail.css

@@ -29,7 +29,7 @@
 	padding: 24px;
 }
 
-.red-button {
+html /deep/ .red-button {
 	background: #d23f31;
 	color: #fff;
 	margin-top: 16px;

rpg-docs/client/views/character/characterSettings/characterSettings.html

@@ -0,0 +1,3 @@
+<template name="characterSettings">
+
+</template>

rpg-docs/client/views/character/characterSettings/characterSettings.js

@@ -0,0 +1,3 @@
+Template.characterSettings.events({
+	
+});

rpg-docs/client/views/character/characterSettings/deleteCharacterConfirmation.html

@@ -0,0 +1,9 @@
+<template name="deleteCharacterConfirmation">
+	<div>
+		Deleting a character cannot be undone.<br>
+		To continue type "{{name}}" into the box below.<br>
+		<paper-input id="nameInput" label="type the characters's name here" style="width: 100%;"></paper-input><br>
+		<paper-button id="deleteButton" style={{getStyle}} disabled={{cantDelete}}>Delete Character</paper-button>
+	</div>
+	<paper-button id="cancelButton" affirmative> Cancel </paper-button>
+</template>

rpg-docs/client/views/character/characterSettings/deleteCharacterConfirmation.js

@@ -0,0 +1,26 @@
+Template.deleteCharacterConfirmation.onCreated(function(){
+	this.canDelete = new ReactiveVar(false);
+});
+
+Template.deleteCharacterConfirmation.helpers({
+	cantDelete: function(){
+		return !Template.instance().canDelete.get();
+	},
+	getStyle: function(){
+		if(Template.instance().canDelete.get()) return "background: #d23f31; color: white;";
+	}
+});
+
+Template.deleteCharacterConfirmation.events({
+	"change #nameInput, input #nameInput": function(event, instance){
+		var canDel = instance.find("#nameInput").value === this.name;
+		instance.canDelete.set(canDel);
+	},
+	"tap #deleteButton": function(event, instance){
+		if(instance.find("#nameInput").value === this.name){
+			GlobalUI.closeDialog();
+			Router.go("/");
+			Characters.remove(this._id);
+		}
+	}
+});

rpg-docs/client/views/character/characterSheet.html

@@ -8,6 +8,15 @@
 		<div>
 			{{> colorDropdown}}
 		</div>
+		<paper-menu-button>
+			<paper-icon-button icon="menu" noink></paper-icon-button>
+			<paper-dropdown class="dropdown" halign="right">
+				<core-menu class="menu" style="color: black; color: rgba(0,0,0,0.87);">
+					<paper-item id="deleteCharacter"><core-icon icon="delete"></core-icon>Delete</paper-item>
+					<paper-item id="shareCharacter"><core-icon icon="social:share"></core-icon>Share</paper-item>
+				</core-menu>
+			</paper-dropdown>
+		</paper-menu-button>
 		<div class="bottom fit" horizontal layout>
 			<paper-tabs flex horizontal center layout id="characterSheetTabs" selected={{selectedTab}} class="{{colorClass}}">
 				<paper-tab name="stats">Stats</paper-tab>

rpg-docs/client/views/character/characterSheet.js

@@ -1,6 +1,6 @@
 Template.characterSheet.created = function(){
 	Session.setDefault(this.data._id + ".selectedTab", "stats");
-}
+};
 
 var setTab = function(charId, tab){
 	return Session.set(charId + ".selectedTab", tab);
@@ -26,4 +26,11 @@ Template.characterSheet.events({
 	"color-change": function(event, instance){
 		Characters.update(this._id, {$set: {color: event.color}});
 	},
+	"tap #deleteCharacter": function(event, instance){
+		GlobalUI.showDialog({
+			heading: "Delete " + this.name,
+			data: this,
+			template: "deleteCharacterConfirmation",
+		});
+	},
 });

rpg-docs/client/views/character/inventory/inventory.html

@@ -36,7 +36,7 @@
 						{{#each attuned}}
 							{{>inventoryItem}}
 						{{/each}}
-						<div class="list-subhead" layout horizontal center>{{name}}</div>
+						{{#if attuned.count}}<div class="list-subhead" layout horizontal center>Equipment</div>{{/if}}
 						{{#each equipment}}
 							{{>inventoryItem}}
 						{{/each}}

rpg-docs/client/views/characterList/characterList.css

@@ -5,4 +5,6 @@
 .characterCard{
 	width: 272px;
 	margin: 4px;
+	min-width: 272px;
+	flex-grow: 1;
 }

rpg-docs/client/views/characterList/characterList.html

@@ -8,14 +8,14 @@
 	<div class="scroll-y" fit>
 			{{#if currentUser}}
 				{{#if characters.count}}
-					<div layout horizontal class="characterCards">
+					<div layout horizontal wrap class="characterCards">
 						{{# each characters}}
 							{{#with characterDetails}}
 								{{#containerCardHelper this}}{{alignment}} {{gender}} {{race}}{{/containerCardHelper}}
 							{{/with}}
 						{{/each}}
+						{{> gridPadding class="characterCard" num=12}}
 					</div>
-					{{> gridPadding class="characterCard" num=12}}
 				{{else}}
 					<div layout vertical center center-justified>
 						<div>You don't seem to have any characters :(</div>

rpg-docs/client/views/characterList/characterList.js

@@ -10,14 +10,9 @@ Template.characterList.helpers({
 
 Template.characterList.events({
 	"tap .characterCard": function(event, instance){
-		console.log(this);
 		Router.go("characterSheet", {_id: this._id});
 	},
 	"tap .addCharacter": function (event, template) {
 		Characters.insert({owner: Meteor.userId()});
 	},
-	"tap #deleteChar": function(event, template){
-		console.log("deleting", this);
-		Characters.remove(this._id);
-	}
 });

rpg-docs/client/views/layout/layout.html

@@ -3,9 +3,7 @@
 	<core-drawer-panel>
 		<core-header-panel drawer navigation flex mode="seamed" class="white">
 			{{> loginButtons}}
-			<core-menu theme="core-light-theme">
-				<paper-item id="charactersMenuButton">Characters</paper-item>
-			</core-menu>
+			<paper-item id="charactersMenuButton">Characters</paper-item>
 		</core-header-panel>
 		<core-animated-pages main 
 							 navigation 

rpg-docs/client/views/user/signIn/signIn.html

@@ -1,4 +1,4 @@
-<template name="/signIn">
+<template name="signIn">
 	<div id="accountSummary" class="padded white-text">
 		{{#if loggingIn}}
 			<paper-spinner active alt="Signing In"></paper-spinner>