Prettified all remaining detail boxes to be view -> edit

rpg-docs/Model/Inventory/Containers.js

@@ -2,9 +2,9 @@
 Containers = new Mongo.Collection("containers");
 
 Schemas.Container = new SimpleSchema({
-	name: 		{ type: String, trim: false },
+	name:       { type: String, trim: false },
-	charId: 	{ type: String, regEx: SimpleSchema.RegEx.Id},
+	charId:     { type: String, regEx: SimpleSchema.RegEx.Id},
-	isCarried: 	{ type: Boolean },
+	isCarried:  { type: Boolean },
 	weight:		{type: Number, min: 0, defaultValue: 0, decimal: true},
 	value:		{type: Number, min: 0, defaultValue: 0, decimal: true},
 	description:{type: String, optional: true, trim: false},
@@ -14,20 +14,26 @@ Schemas.Container = new SimpleSchema({
 Containers.attachSchema(Schemas.Container);
 
 Containers.helpers({
-	totalValue: function(){
+	contentsValue: function(){
-		var value = this.value;
+		var value = 0;
 		Items.find({"parent.id": this._id}, {fields: {quantity: 1, value: 1}}).forEach(function(item){
 			value += item.totalValue();
 		});
 		return value;
 	},
-	totalWeight: function(){
+	totalValue: function(){
-		var weight = this.weight;
+		return this.contentsValue() + this.value;
+	},
+	contentsWeight: function(){
+		var weight = 0;
 		Items.find({"parent.id": this._id}, {fields: {quantity: 1, weight: 1}}).forEach(function(item){
 			weight += item.totalWeight();
 		});
 		return weight;
 	},
+	totalWeight: function(){
+		return this.contentsWeight() + this.weight;
+	},
 	moveToCharacter: function(characterId){
 		if(this.charId === characterId) return;
 		Items.update(this._id, {$set: {charId: characterId}});

rpg-docs/client/globalHelpers/openParentDialog.js

@@ -0,0 +1,27 @@
+openParentDialog = function(parent, charId, heroId){
+	var detail;
+	if(parent.collection === "Characters" && parent.group === "racial"){
+		detail = {
+			template: "raceDialog",
+			data: {charId: parent.id},
+		};
+	} else if( parent.collection === "Features" ){
+		detail = {
+			template: "featureDialog",
+			data:     {featureId: parent.id},
+		};
+	} else if( parent.collection === "Classes" ){
+		detail = {
+			template: "classDialog",
+			data: {classId: parent.id},
+		};
+	} else if( parent.collection === "Items" ){
+		detail = {
+			template: "itemDialog",
+			data:     {itemId: parent.id},
+		};
+	}
+	detail.heroId = heroId;
+	detail.charId = charId;
+	GlobalUI.setDetail(detail);
+};

rpg-docs/client/globalHelpers/valueString.js

@@ -21,4 +21,29 @@ Template.registerHelper("valueString", function(value){
 		result += resultArray[i];
 	}
 	return result;
-});
+});
+
+Template.registerHelper("longValueString", function(value){
+	var resultArray = [];
+	//sp
+	var gp = Math.floor(value);
+	if(gp > 0) resultArray.push(gp + "gp");
+	//sp
+	var sp = Math.floor(10 * (value % 1));
+	if(sp > 0 || resultArray.length) resultArray.push(sp + "sp");
+	//cp
+	var cp = 10 * ((value * 10) % 1);
+	cp = Math.round(cp * 1000) / 1000;
+	if(cp > 0 || resultArray.length) resultArray.push(cp + "cp");
+
+	//build string with correct spacing
+	var result = "";
+	for(var i = 0; i < resultArray.length; i++){
+		//add a space between values
+		if(i !== 0){
+			result += " ";
+		}
+		result += resultArray[i];
+	}
+	return result;
+});

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

@@ -94,10 +94,14 @@ paper-button {
 	color: rgba(0, 0, 0, 0.54);
 }
 
-.statCard, .clickable {
+.clickable {
 	cursor: pointer;
 }
 
+.skillRow {
+	cursor: initial;
+}
+
 .resourceCards {
 	padding: 4px 4px 0 4px;
 	margin-bottom: -4px;
@@ -186,6 +190,8 @@ paper-slider {
 }
 
 .whiteTop {
+	cursor: initial;
+	border-bottom: black solid 0.5px;
 	border-bottom: rgba(0,0,0,0.12) solid 1px;
 	background: white;
 	padding: 16px;

rpg-docs/client/views/character/features/featureDialog/featureDialog.html

@@ -1,11 +1,9 @@
 <template name="featureDialog">
 	{{#with feature}}
-		{{#baseDialog title=name class=colorClass showEdit=true editing=editing}}
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
-			{{#if editing}}
+			{{> featureDetails}}
-				{{> featureEdit}}
+		{{else}}
-			{{else}}
+			{{> featureEdit}}
-				{{> featureDetails}}
-			{{/if}}
 		{{/baseDialog}}
 	{{/with}}
 </template>

rpg-docs/client/views/character/features/featureDialog/featureDialog.js

@@ -1,11 +1,4 @@
-Template.featureDialog.onCreated(function(){
-	this.editing = new ReactiveVar(false);
-});
-
 Template.featureDialog.helpers({
-	editing: function(){
-		return Template.instance().editing.get();
-	},
 	feature: function(){
 		return Features.findOne(this.featureId);
 	},
@@ -15,12 +8,6 @@ Template.featureDialog.events({
 	"color-change": function(event, instance){
 		Features.update(instance.data.featureId, {$set: {color: event.color}});
 	},
-	"tap #editButton": function(event, instance){
-		instance.editing.set(true);
-	},
-	"tap #doneEditingButton": function(event, instance){
-		instance.editing.set(false);
-	},
 	"tap #deleteButton": function(event, instance){
 		Features.softRemoveNode(instance.data.featureId);
 		GlobalUI.deletedToast(instance.data.featureId, "Features", "Feature");

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

@@ -40,7 +40,7 @@ Template.features.events({
 		var featureId = Features.insert({name: "New Feature", charId: this._id});
 		GlobalUI.setDetail({
 			template: "featureDialog",
-			data:     {featureId: featureId, charId: this._id},
+			data:     {featureId: featureId, charId: this._id, startEditing: true},
 			heroId:   featureId
 		});
 	},
@@ -68,13 +68,7 @@ Template.features.events({
 		});
 	},
 	"tap .attack": function(event){
-		var itemId = this.parent.id;
+		openParentDialog(this.parent, this.charId, this._id);
-		var charId = this.charId;
-		GlobalUI.setDetail({
-			template: "itemDialog",
-			data:     {itemId: itemId, charId: charId},
-			heroId:   this._id
-		});
 	},
 	"tap .useFeature": function(event){
 		var featureId = this._id;

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.css

@@ -0,0 +1,8 @@
+.containerSummaryTable td{
+	text-align: right;
+	padding: 4px;
+}
+
+.containerSummaryTable td:first-child {
+	text-align: left;
+}

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

@@ -1,22 +1,46 @@
 <template name="containerDialog">
 	{{#with container}}
-		{{#baseDialog title=name class=colorClass}}
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
-			<!--Name and plural name-->
+			{{> containerView}}
-			<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+		{{else}}
-			<!--Weight-->
+			{{> containerEdit}}
-			<paper-input-decorator label="Weight" floatinglabel>
-				<input id="weightInput" type="number" value={{weight}}>
-			</paper-input-decorator>
-			<!--Value-->
-			<paper-input-decorator label="Value" floatinglabel>
-				<input id="valueInput" type="number" value={{value}}>
-			</paper-input-decorator>
-			<!--Description-->
-			<paper-input-decorator label="Description" floatinglabel layout vertical>
-				<paper-autogrow-textarea>
-					<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-				</paper-autogrow-textarea>
-			</paper-input-decorator>
 		{{/baseDialog}}
 	{{/with}}
-</template>
+</template>
+
+<template name="containerEdit">
+	<paper-input id="containerNameInput fullwidth"
+				 label="Name"
+				 floatinglabel
+				 value={{name}}></paper-input>
+	<div layout horizontal around-justified wrap>
+		<paper-input-decorator label="Weight" floatinglabel>
+			<input id="weightInput" type="number" value={{weight}}>
+		</paper-input-decorator>
+		<paper-input-decorator label="Value" floatinglabel>
+			<input id="valueInput" type="number" value={{value}}>
+		</paper-input-decorator>
+	</div>
+
+	<hr class="vertMargin">
+
+	<paper-input-decorator label="Description" floatinglabel layout vertical>
+		<paper-autogrow-textarea>
+			<textarea id="containerDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+		</paper-autogrow-textarea>
+	</paper-input-decorator>
+</template>
+
+<template name="containerView">
+	<div layout horizontal wrap center justified>
+		<table class="containerSummaryTable fullwidth">
+			<tr><td>Container</td><td>{{weight}}lbs</td><td>{{longValueString value}}</td></tr>
+			<tr><td>Contents</td><td>{{contentsWeight}}lbs</td><td>{{longValueString contentsValue}}</td></tr>
+			<tr class="body2"><td>Total</td><td>{{totalWeight}}lbs</td><td>{{longValueString totalValue}}</td></tr>
+		</table>
+	</div>
+	{{#if description}}
+		<hr class="vertMargin">
+		<div class="prewrap">{{description}}</div>
+	{{/if}}
+</template>

rpg-docs/client/views/character/inventory/containerDialog/containerDialog.js

@@ -4,7 +4,11 @@ Template.containerDialog.helpers({
 	}
 });
 
-Template.containerDialog.events({
+Template.containerEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
+Template.containerEdit.events({
 	"color-change": function(event, instance){
 		Containers.update(instance.data.containerId, {$set: {color: event.color}});
 	},

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

@@ -40,7 +40,6 @@ div#stats {
 
 .containerRight {
 	padding: 16px;
-	cursor: pointer;
 
 	/* same style as subhead */
 	font-size: 16px;

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

@@ -84,7 +84,7 @@ Template.inventory.events({
 			if(err) throw err;
 			GlobalUI.setDetail({
 				template: "itemDialog",
-				data:     {itemId: itemId, charId: charId},
+				data:     {itemId: itemId, charId: charId, startEditing: true},
 				heroId:   itemId
 			});
 		});
@@ -93,7 +93,7 @@ Template.inventory.events({
 		var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
 		GlobalUI.setDetail({
 			template: "containerDialog",
-			data:     {containerId: containerId, charId: this.charId},
+			data:     {containerId: containerId, charId: this.charId, startEditing: true},
 			heroId:   containerId
 		});
 	},

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

@@ -1,11 +1,9 @@
 <template name="itemDialog">
 	{{#with item}}
-		{{#baseDialog title=itemHeading class=colorClass showEdit=true editing=editing}}
+		{{#baseDialog title=itemHeading class=colorClass startEditing=../startEditing}}
-			{{#if editing}}
+			{{> itemDetails}}
-				{{> itemEdit}}
+		{{else}}
-			{{else}}
+			{{> itemEdit}}
-				{{> itemDetails}}
-			{{/if}}
 		{{/baseDialog}}
 	{{/with}}
 </template>

rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js

@@ -3,7 +3,7 @@ var getContainers = function(charId){
 };
 
 Template.itemDialog.onCreated(function(){
-	this.editing = new ReactiveVar(false);
+	this.editing = new ReactiveVar(!!this.data.startEditing);
 });
 
 Template.itemDialog.helpers({

rpg-docs/client/views/character/journal/classDialog/classDialog.html

@@ -1,6 +1,18 @@
 <template name="classDialog">
 	{{#with class}}
-		{{#baseDialog title=name class=colorClass hideColor="true"}}
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
+			<div layout vertical center>
+				<div class="display2">
+					{{level}}
+				</div>
+				<div>
+					level
+				</div>
+			</div>
+
+			{{> effectsViewList charId=charId parentId=_id}}
+			{{> proficiencyViewList charId=charId parentId=_id}}
+		{{else}}
 			<!--Name-->
 			<paper-input id="classNameInput" label="Class Name" floatinglabel value={{name}}></paper-input>
 			<!--Level-->

rpg-docs/client/views/character/journal/classDialog/classDialog.js

@@ -1,3 +1,7 @@
+Template.classDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.classDialog.events({
 	"tap #deleteButton": function(event, instance){
 		Classes.softRemoveNode(instance.data.classId);

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.html

@@ -1,6 +1,14 @@
 <template name="experienceDialog">
 	{{#with experience}}
-		{{#baseDialog title=name class=colorClass hideColor="true"}}
+		{{#baseDialog title=name class=colorClass hideColor="true" startEditing=../startEditing}}
+			<div horizontal layout center-justified>
+				{{value}}
+			</div>
+			{{#if description}}
+				<hr class="vertMargin">
+				<div class="prewrap">{{description}}</div>
+			{{/if}}
+		{{else}}
 			<div horizontal layout>
 				<!--Name-->
 				<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>

rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.js

@@ -1,3 +1,9 @@
+Template.experienceDialog.helpers({
+	feature: function(){
+		return Features.findOne(this.featureId);
+	},
+});
+
 Template.experienceDialog.events({
 	"tap #deleteButton": function(event, instance){
 		Experiences.softRemove(instance.data.experienceId);

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

@@ -76,7 +76,7 @@ Template.journal.events({
 			if(!error){
 				GlobalUI.setDetail({
 					template: "noteDialog",
-					data:     {noteId: id, charId: charId},
+					data:     {noteId: id, charId: charId, startEditing: true},
 					heroId:   id
 				});
 			}
@@ -90,11 +90,11 @@ Template.journal.events({
 			if(!error){
 				GlobalUI.setDetail({
 					template: "experienceDialog",
-					data: {experienceId: id, charId: charId},
+					data: {experienceId: id, charId: charId, startEditing: true},
 					heroId: id
 				});
 			}
-		})
+		});
 	},
 	"tap #addClassButton":function(event){
 		var charId = this._id;
@@ -106,11 +106,11 @@ Template.journal.events({
 			if(!error){
 				GlobalUI.setDetail({
 					template: "classDialog",
-					data: {classId: id, charId: charId},
+					data: {classId: id, charId: charId, startEditing: true},
 					heroId: id
 				});
 			}
-		})
+		});
 	},
 	"tap #moreExperiences": function(event){
 		var inst = Template.instance();
@@ -125,6 +125,6 @@ Template.journal.events({
 		}, 300);
 		//HACK giggle the columns :( to workaround chrome bug that stops .containers height from updating
 		var cs = inst.$(".containers").removeClass("containers");
-		_.defer(function(){cs.addClass("containers")});
+		_.defer(function(){cs.addClass("containers");});
 	}
 });

rpg-docs/client/views/character/journal/noteDialog/noteDialog.html

@@ -1,6 +1,8 @@
 <template name="noteDialog">
 	{{#with note}}
-		{{#baseDialog title=name class=colorClass}}
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
+			<div class="prewrap">{{description}}</div>
+		{{else}}
 			<!--Name-->
 			<div horizontal layout>
 				<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
@@ -8,7 +10,7 @@
 			<!--Description-->
 			<paper-input-decorator label="Description" floatinglabel layout vertical>
 				<paper-autogrow-textarea>
-					<textarea id="noteDescriptionInput" placeholder value={{description}}></textarea>
+					<textarea id="noteDescriptionInput" value={{description}}></textarea>
 				</paper-autogrow-textarea>
 			</paper-input-decorator>
 		{{/baseDialog}}

rpg-docs/client/views/character/journal/noteDialog/noteDialog.js

@@ -1,3 +1,7 @@
+Template.noteDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.noteDialog.events({
 	"color-change": function(event, instance){
 		Notes.update(instance.data.noteId, {$set: {color: event.color}});

rpg-docs/client/views/character/journal/raceDialog/raceDialog.html

@@ -1,5 +1,8 @@
 <template name="raceDialog">
-	{{#baseDialog title="Race" class=colorClass hideColor="true" hideDelete="true"}}
+	{{#baseDialog title="Race" class=colorClass hideColor="true" hideDelete="true" startEditing=startEditing}}
+		{{> effectsViewList charId=charId parentId=charId parentGroup="racial"}}
+		{{> proficiencyViewList charId=charId parentId=charId parentGroup="racial"}}
+	{{else}}
 		<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
 		{{> effectsEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}
 		{{> proficiencyEditList parentId=charId parentCollection="Characters" charId=charId parentGroup="racial"}}

rpg-docs/client/views/character/journal/raceDialog/raceDialog.js

@@ -1,3 +1,7 @@
+Template.raceDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.raceDialog.events({
 	"change #raceInput": function(event){
 		var value = event.currentTarget.value;

rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html

@@ -1,5 +1,7 @@
 <template name="personaDetailsDialog">
-	{{#baseDialog title=name class="deep-purple white-text" hideColor="true" hideDelete="true"}}
+	{{#baseDialog title=name class="deep-purple white-text" hideColor="true" hideDelete="true" startEditing=startEditing}}
+		{{alignment}} {{gender}} {{race}}
+	{{else}}
 		<!--Name-->
 		<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input><br>
 		<!--Alignment-->

rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.js

@@ -1,3 +1,7 @@
+Template.personaDetailsDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.personaDetailsDialog.events({
 	"change #nameInput": function(event){
 		var input = event.currentTarget.value;

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

@@ -15,7 +15,7 @@
 					<div class="containerTop whiteTop" layout horizontal center>
 						<div class="containerName subhead" flex>Languages</div>
 					</div>
-					<div flex class="containerMain">
+					<div flex class="containerMain listPadded">
 						{{#each languages}}
 							{{> proficiencyListItem}}
 						{{/each}}

rpg-docs/client/views/character/persona/textDialog/textDialog.html

@@ -1,5 +1,7 @@
 <template name="textDialog">
-	{{#baseDialog title=title class=colorClass hideColor="true" hideDelete="true"}}
+	{{#baseDialog title=title class=colorClass hideColor="true" hideDelete="true" startEditing=startEditing}}
+		<div class="prewrap">{{value}}</div>
+	{{else}}
 		<paper-input-decorator label={{title}} floatinglabel layout vertical>
 			<paper-autogrow-textarea>
 				<textarea id="textInput" placeholder value={{value}}></textarea>

rpg-docs/client/views/character/persona/textDialog/textDialog.js

@@ -1,3 +1,7 @@
+Template.textDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.textDialog.helpers({
 	value: function(){
 		var fieldSelector = {fields: {}};

rpg-docs/client/views/character/proficiencies/proficiencyEditList/proficiencyEditList.js

@@ -1,7 +1,13 @@
 Template.proficiencyEditList.helpers({
 	proficiencies: function(){
-		var cursor = Proficiencies.find({"parent.id": this.parentId, "parent.collection": this.parentCollection});
+		var selector = {
-		return cursor;
+			"parent.id": this.parentId,
+			"charId": this.charId
+		};
+		if(this.parentGroup){
+			selector["parent.group"] = this.parentGroup;
+		}
+		return Proficiencies.find(selector);
 	}
 });
 

rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.html

@@ -1,7 +1,7 @@
 <template name="proficiencyListItem">
 	<div class="itemSlot">
-		<paper-item noink class="white" hero-id="main" {{detailHero}}>
+		<paper-item noink class="white proficiencyItem" hero-id="main" {{detailHero}}>
-			<core-icon icon="{{profIcon}}"></core-icon>
+			<core-icon icon="{{profIcon}}" class="black54"></core-icon>
 			<div class="sideMargin">{{getName}}</div>
 		</paper-item>
 	</div>

rpg-docs/client/views/character/proficiencies/proficiencyListItem/proficiencyListItem.js

@@ -12,3 +12,9 @@ Template.proficiencyListItem.helpers({
 		return this.name;
 	}
 });
+
+Template.proficiencyListItem.events({
+	"tap .proficiencyItem": function(event, instance){
+		openParentDialog(this.parent, this.charId, this._id);
+	}
+});

rpg-docs/client/views/character/proficiencies/proficiencyViewList/proficiencyViewList.js

@@ -1,5 +1,12 @@
 Template.proficiencyViewList.helpers({
 	proficiencies: function(){
-		return Proficiencies.find({"parent.id": this.parentId, charId: this.charId});
+		var selector = {
+			"parent.id": this.parentId,
+			"charId": this.charId
+		};
+		if(this.parentGroup){
+			selector["parent.group"] = this.parentGroup;
+		}
+		return Proficiencies.find(selector);
 	}
 });

rpg-docs/client/views/character/spells/spellDialog/spellDialog.html

@@ -1,11 +1,9 @@
 <template name="spellDialog">
 	{{#with spell}}
-		{{#baseDialog title=name class=colorClass showEdit=true editing=editing}}
+		{{#baseDialog title=name class=colorClass  startEditing=../startEditing}}
-			{{#if editing}}
+			{{> spellDetails}}
-				{{> spellEdit}}
+		{{else}}
-			{{else}}
+			{{> spellEdit}}
-				{{> spellDetails}}
-			{{/if}}
 		{{/baseDialog}}
 	{{/with}}
 </template>

rpg-docs/client/views/character/spells/spellDialog/spellDialog.js

@@ -11,30 +11,16 @@ var spellLevels = [
 	{ name: "Level 9",  level: 9 },
 ];
 
-
-Template.spellDialog.onCreated(function(){
-	this.editing = new ReactiveVar(false);
-});
-
 Template.spellDialog.helpers({
 	spell: function(){
 		return Spells.findOne(this.spellId);
-	},
+	}
-	editing: function(){
-		return Template.instance().editing.get();
-	},
 });
 
 Template.spellDialog.events({
 	"color-change": function(event, instance){
 		Spells.update(instance.data.spellId, {$set: {color: event.color}});
 	},
-	"tap #editButton": function(event, instance){
-		instance.editing.set(true);
-	},
-	"tap #doneEditingButton": function(event, instance){
-		instance.editing.set(false);
-	},
 	"tap #deleteButton": function(event, instance){
 		Spells.softRemoveNode(instance.data.spellId);
 		GlobalUI.deletedToast(instance.data.spellId, "Spells", "Spell");

rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.html

@@ -1,27 +1,51 @@
 <template name="spellListDialog">
 	{{#with spellList}}
-		{{#baseDialog title=name class=colorClass}}
+		{{#baseDialog title=name class=colorClass startEditing=../startEditing}}
-			<!--Name-->
+			<div>
-			<div horizontal layout>
+				<div layout horizontal justified wrap class="subhead">
-				<paper-input id="spellListNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
+					{{#if attackBonus}}
+						<div>
+							Attack Bonus: {{evaluate charId attackBonus}}
+						</div>
+					{{/if}}
+					{{#if saveDC}}
+						<div>
+							Save DC: {{evaluate charId saveDC}}
+						</div>
+					{{/if}}
+					{{#if maxPrepared}}
+						<div>
+							Max Prepared: {{evaluateSigned charId maxPrepared}}
+						</div>
+					{{/if}}
+				</div>
+				<hr class="vertMargin">
+				<div class="prewrap">{{description}}</div>
 			</div>
+		{{else}}
+			<!--Name-->
+			<paper-input id="spellListNameInput"
+						 class="fullwidth"
+						 label="Name"
+						 floatinglabel
+						 value={{name}}></paper-input>
 			<!--Save DC-->
-			<paper-input id="spellListSaveDCInput" 
+			<paper-input id="spellListSaveDCInput"
-						 label="Save DC" 
+						 label="Save DC"
-						 floatinglabel 
+						 floatinglabel
-						 value={{saveDC}} 
+						 value={{saveDC}}
 						 style="width: 100%;"></paper-input><br>
 			<!--Attack Bonus-->
-			<paper-input id="spellListAttackBonusInput" 
+			<paper-input id="spellListAttackBonusInput"
-						 label="Attack Bonus" 
+						 label="Attack Bonus"
-						 floatinglabel 
+						 floatinglabel
-						 value={{attackBonus}} 
+						 value={{attackBonus}}
 						 style="width: 100%;"></paper-input><br>
 			<!--Max Prepared-->
-			<paper-input id="spellListMaxPreparedInput" 
+			<paper-input id="spellListMaxPreparedInput"
-						 label="Maximum Prepared Spells" 
+						 label="Maximum Prepared Spells"
-						 floatinglabel 
+						 floatinglabel
-						 value={{maxPrepared}} 
+						 value={{maxPrepared}}
 						 style="width: 100%;"></paper-input><br>
 			<!--Description-->
 			<paper-input-decorator label="Description" floatinglabel layout vertical>

rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.js

@@ -1,3 +1,7 @@
+Template.spellListDialog.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.spellListDialog.events({
 	"color-change": function(event, instance){
 		SpellLists.update(instance.data.spellListId, {$set: {color: event.color}});
@@ -5,28 +9,28 @@ Template.spellListDialog.events({
 	"tap #deleteButton": function(event, instance){
 		SpellLists.softRemoveNode(instance.data.spellListId);
 		GlobalUI.deletedToast(instance.data.spellListId, "SpellLists", "Spell list and contents");
-		GlobalUI.closeDetail()
+		GlobalUI.closeDetail();
 	},
 	//TODO clean up String -> num here so they don't need casting by Schema.clean
 	//TODO validate input (integer, non-negative, etc) for these inputs and give validation errors
 	"change #spellListNameInput, input #spellListNameInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		SpellLists.update(this._id, {$set: {name: value}});
 	},
 	"change #spellListSaveDCInput, input #spellListSaveDCInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		SpellLists.update(this._id, {$set: {saveDC: value}});
 	},
 	"change #spellListAttackBonusInput, input #spellListAttackBonusInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		SpellLists.update(this._id, {$set: {attackBonus: value}});
 	},
 	"change #spellListMaxPreparedInput, input #spellListMaxPreparedInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		SpellLists.update(this._id, {$set: {maxPrepared: value}});
 	},
 	"change #spellListDescriptionInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		SpellLists.update(this._id, {$set: {description: value}});
 	},
 });

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

@@ -161,7 +161,7 @@ Template.spells.events({
 			if(!error){
 				GlobalUI.setDetail({
 					template: "spellListDialog",
-					data:     {spellListId: id, charId: charId},
+					data:     {spellListId: id, charId: charId, startEditing: true},
 					heroId:   id
 				});
 			}
@@ -182,7 +182,7 @@ Template.spells.events({
 			if(!error){
 				GlobalUI.setDetail({
 					template: "spellDialog",
-					data:     {spellId: id, charId: charId},
+					data:     {spellId: id, charId: charId, startEditing: true},
 					heroId:   id
 				});
 			}

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

@@ -11,7 +11,7 @@
 			{{> abilityMiniCard ability="intelligence" title="Intelligence" color="deep-orange"}}
 			{{> abilityMiniCard ability="wisdom" title="Wisdom" color="purple"}}
 			{{> abilityMiniCard ability="charisma" title="Charisma" color="pink"}}
-			
+
 			<!--Armor-->
 			{{> statCard stat="armor" name="Armor Class" color="teal"}}
 			<!--Speed-->
@@ -20,7 +20,7 @@
 			{{> statCard stat="initiative" name="Initiative" color="indigo" isSkill="true"}}
 			<!--Proficiency Bonus-->
 			{{> statCard stat="proficiencyBonus" name="Proficiency Bonus" color="blue" prefix="+"}}
-			
+
 			<!--Hit Dice-->
 			{{>hitDice name="d6HitDice" diceNum="6" char=this}}
 			{{>hitDice name="d8HitDice" diceNum="8" char=this}}
@@ -28,7 +28,7 @@
 			{{>hitDice name="d12HitDice" diceNum="12" char=this}}
 			<!--Saving Throws-->
 			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-				<div class="containerTop teal white-text" layout horizontal center>
+				<div class="containerTop whiteTop" layout horizontal center>
 					<div class="containerName subhead" hero-id="title" flex>Saving Throws</div>
 				</div>
 				<div flex class="containerMain">
@@ -42,7 +42,7 @@
 			</paper-shadow>
 			<!--Skills-->
 			<paper-shadow class="card container"  hero-id="main" {{detailHero}}>
-				<div class="containerTop blue white-text" layout horizontal center>
+				<div class="containerTop whiteTop" layout horizontal center>
 					<div class="containerName subhead" hero-id="title" flex>Skills</div>
 				</div>
 				<div flex class="containerMain">

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

@@ -1,5 +1,7 @@
 Template.stats.events({
 	"tap .statCard": function(event, instance){
+		//TODO reimplement this when the dialog is nice
+		return;
 		if(this.isSkill){
 			var charId = instance.data._id;
 			GlobalUI.setDetail({
@@ -10,6 +12,8 @@ Template.stats.events({
 		}
 	},
 	"tap .skillRow": function(event, instance){
+		//TODO reimplement this when the dialog is nice
+		return;
 		var skill = this.skill;
 		var charId = instance.data._id;
 		GlobalUI.setDetail({

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html

@@ -3,30 +3,7 @@
 		<core-toolbar class={{class}} hero-id="toolbar" hero>
 			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
 			<div flex>{{title}}</div>
-			{{#if showEdit}}
+			{{#if editing}}
-				{{#if editing}}
-					{{#unless hideDelete}}
-						<paper-icon-button id="deleteButton"
-										   role="button"
-										   tabindex="0"
-										   icon="delete"
-										   aria-label="Delete Feature"
-										   noink></paper-icon-button>
-					{{/unless}}
-					{{#unless hideColor}}
-						{{> colorDropdown}}
-					{{/unless}}
-					<paper-icon-button id="doneEditingButton"
-									   icon="done"
-									   aria-label="Delete Feature"
-									   noink></paper-icon-button>
-				{{else}}
-					<paper-icon-button id="editButton"
-									   icon="create"
-									   aria-label="Delete Feature"
-									   noink></paper-icon-button>
-				{{/if}}
-			{{else}}
 				{{#unless hideDelete}}
 					<paper-icon-button id="deleteButton"
 									   role="button"
@@ -38,10 +15,25 @@
 				{{#unless hideColor}}
 					{{> colorDropdown}}
 				{{/unless}}
+					<paper-icon-button id="doneEditingButton"
+									   icon="done"
+									   aria-label="Delete Feature"
+									   noink></paper-icon-button>
+			{{else}}
+				{{#unless hideEdit}}
+					<paper-icon-button id="editButton"
+									   icon="create"
+									   aria-label="Delete Feature"
+									   noink></paper-icon-button>
+				{{/unless}}
 			{{/if}}
 		</core-toolbar>
 		<div class="detailContent">
-			{{> UI.contentBlock}}
+			{{#unless editing}}
+				{{> UI.contentBlock}}
+			{{else}}
+				{{> UI.elseBlock}}
+			{{/unless}}
 		</div>
 	</core-header-panel>
 </template>

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js

@@ -1,14 +1,26 @@
+Template.baseDialog.onCreated(function(){
+	this.editing = new ReactiveVar(!!this.data.startEditing);
+});
+
 Template.baseDialog.onRendered(function(){
-	updatePolymerInputs(this);
 	//after the dialog is built, open it
-	if (!this.alreadyRendered){
+	Session.set("global.ui.detailShow", true);
-		Session.set("global.ui.detailShow", true);
+});
-		this.alreadyRendered = true;
+
-	}
+Template.baseDialog.helpers({
+	editing: function(){
+		return Template.instance().editing.get();
+	},
 });
 
 Template.baseDialog.events({
 	"tap #backButton": function(){
 		GlobalUI.closeDetail();
-	}
+	},
+	"tap #editButton": function(event, instance){
+		instance.editing.set(true);
+	},
+	"tap #doneEditingButton": function(event, instance){
+		instance.editing.set(false);
+	},
 });