Generalised some dialogs

2015-02-27 06:14:34 +00:00
parent 56f8e95d81
commit 040d5a514b
50 changed files with 532 additions and 954 deletions
--- a/rpg-docs/.meteor/release
+++ b/rpg-docs/.meteor/release
@@ -1 +1 @@
-METEOR@1.0.3.1
+METEOR@1.0.3.2
--- a/rpg-docs/.meteor/versions
+++ b/rpg-docs/.meteor/versions
@@ -3,8 +3,8 @@ accounts-password@1.0.6
 accounts-ui@1.1.4
 accounts-ui-unstyled@1.1.6
 aldeed:autoform@4.2.2
-aldeed:collection2@2.3.1
-aldeed:simple-schema@1.1.0
+aldeed:collection2@2.3.2
+aldeed:simple-schema@1.3.0
 application-configuration@1.0.4
 autoupdate@1.1.5
 base64@1.0.2
@@ -17,6 +17,7 @@ check@1.0.4
 conielo:autoform-polymer-paper@0.1.1
 cw4gn3r:jquery-event-drag@2.2.0
 dburles:collection-helpers@1.0.2
+dburles:mongo-collection-instances@0.3.1
 ddp@1.0.14
 deps@1.0.6
 differential:vulcanize@0.0.3
@@ -52,7 +53,7 @@ minimongo@1.0.6
 mobile-status-bar@1.0.2
 momentjs:moment@2.8.4
 mongo@1.0.11
-msavin:mongol@0.1.1
+msavin:mongol@0.4.4
 npm-bcrypt@0.7.7
 observe-sequence@1.0.4
 ordered-dict@1.0.2
--- a/rpg-docs/Model/Character/Actions.js
+++ b/rpg-docs/Model/Character/Actions.js
@@ -9,10 +9,10 @@ Schemas.Action = new SimpleSchema({
 		regEx: SimpleSchema.RegEx.Id
 	},
 	name: {
-		type: String
+		type: String, trim: false
 	},
 	description: {
-		type: String
+		type: String, trim: false
 	},
 	type: {
 		type: String,
--- a/rpg-docs/Model/Character/Attacks.js
+++ b/rpg-docs/Model/Character/Attacks.js
@@ -10,21 +10,25 @@ Schemas.Attack = new SimpleSchema({
 	},
 	name: {
 		type: String,
-		defaultValue: "New Attack"
+		defaultValue: "New Attack", 
+		trim: false
 	},
 	range: {
 		type: String,
-		optional: true
+		optional: true, 
+		trim: false
 	},
 	attackBonus: {
 		type: String,
 		optional: true,
-		defaultValue: "strengthMod + proficiencyBonus"
+		defaultValue: "strengthMod + proficiencyBonus",
+		trim: false
 	},
 	damage: {
 		type: String,
 		optional: true,
-		defaultValue: "1d8 + {strengthMod}"
+		defaultValue: "1d8 + {strengthMod}",
+		trim: false
 	},
 	damageType: {
 		type: String,
--- a/rpg-docs/Model/Character/Effects.js
+++ b/rpg-docs/Model/Character/Effects.js
@@ -11,7 +11,8 @@ Schemas.Effect = new SimpleSchema({
 	},
 	name: {
 		type: String,
-		optional: true //TODO make necessary if there is no owner
+		optional: true, //TODO make necessary if there is no owner
+		trim: false
 	},
 	operation: {
 		type: String,
@@ -25,7 +26,8 @@ Schemas.Effect = new SimpleSchema({
 	},
 	calculation: {
 		type: String,
-		optional: true
+		optional: true, 
+		trim: false
 	},
 	//indicates what the effect originated from
 	type: {
--- a/rpg-docs/Model/Character/Experience.js
+++ b/rpg-docs/Model/Character/Experience.js
@@ -2,8 +2,8 @@ Experiences = new Meteor.Collection("experience");

 Schemas.Experience = new SimpleSchema({
 	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
-	name:		 {type: String, defaultValue: "New Experience"},
-	description: {type: String, optional: true},
+	name:		 {type: String, defaultValue: "New Experience", trim: false},
+	description: {type: String, optional: true, trim: false},
 	value:       {type: Number, defaultValue: 0},
 	dateAdded:   {
 		type: Date,
--- a/rpg-docs/Model/Character/Features.js
+++ b/rpg-docs/Model/Character/Features.js
@@ -2,8 +2,8 @@ Features = new Meteor.Collection("features");

 Schemas.Feature = new SimpleSchema({
 	charId:		{type: String, regEx: SimpleSchema.RegEx.Id},
-	name:       {type: String},
-	description:{type: String, optional: true},
+	name:       {type: String, trim: false},
+	description:{type: String, optional: true, trim: false},
 	uses:       {type: String, optional: true, trim: false},
 	used:       {type: Number, defaultValue: 0},
 	reset:      {type: String, allowedValues: ["manual", "longRest", "shortRest"], defaultValue: "manual"},
--- a/rpg-docs/Model/Character/Levels/Classes.js
+++ b/rpg-docs/Model/Character/Levels/Classes.js
@@ -2,7 +2,7 @@ Classes = new Meteor.Collection("classes");

 Schemas.Class = new SimpleSchema({
 	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
-	name:		 {type: String},
+	name:		 {type: String, trim: false},
 	createdAt: {
 		type: Date,
 		autoValue: function() {
--- a/rpg-docs/Model/Character/Notes.js
+++ b/rpg-docs/Model/Character/Notes.js
@@ -2,8 +2,8 @@ Notes = new Meteor.Collection("notes");

 Schemas.Note = new SimpleSchema({
 	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
-	name:		 {type: String},
-	description: {type: String, optional: true},
+	name:		 {type: String, trim: false},
+	description: {type: String, optional: true, trim: false},
 	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });

--- a/rpg-docs/Model/Character/Proficiencies.js
+++ b/rpg-docs/Model/Character/Proficiencies.js
@@ -6,7 +6,8 @@ Schemas.Proficiency = new SimpleSchema({
 		regEx: SimpleSchema.RegEx.Id
 	},
 	name: 	{
-		type: String
+		type: String,
+		trim: false
 	},
 	//indicates what type of thing proficiency originated from
 	type: {
--- a/rpg-docs/Model/Character/SpellLists.js
+++ b/rpg-docs/Model/Character/SpellLists.js
@@ -2,11 +2,11 @@ SpellLists = new Meteor.Collection("spellLists");

 Schemas.SpellLists = new SimpleSchema({
 	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
-	name:        {type: String},
-	description: {type: String, optional: true},
-	saveDC:      {type: String, optional: true},
-	attackBonus: {type: String, optional: true},
-	maxPrepared: {type: String, optional: true},
+	name:        {type: String, trim: false},
+	description: {type: String, optional: true, trim: false},
+	saveDC:      {type: String, optional: true, trim: false},
+	attackBonus: {type: String, optional: true, trim: false},
+	maxPrepared: {type: String, optional: true, trim: false},
 	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"},
 	"settings.showUnprepared": {type: Boolean, defaultValue: true},
 });
--- a/rpg-docs/Model/Character/Spells.js
+++ b/rpg-docs/Model/Character/Spells.js
@@ -4,11 +4,11 @@ Schemas.Spell = new SimpleSchema({
 	charId:      {type: String, regEx: SimpleSchema.RegEx.Id},
 	listId:      {type: String, regEx: SimpleSchema.RegEx.Id},
 	prepared:    {type: String, defaultValue: "unprepared", allowedValues: ["prepared","unprepared","always"]},
-	name:		 {type: String},
-	description: {type: String, optional: true},
-	castingTime: {type: String, optional: true, defaultValue: "action"},
-	range:		 {type: String, optional: true},
-	duration:	 {type: String, optional: true},
+	name:		 {type: String, trim: false},
+	description: {type: String, optional: true, trim: false},
+	castingTime: {type: String, optional: true, defaultValue: "action", trim: false},
+	range:		 {type: String, optional: true, trim: false},
+	duration:	 {type: String, optional: true, trim: false},
 	"components.verbal":		{type: Boolean, defaultValue: false},
 	"components.somatic":		{type: Boolean, defaultValue: false},
 	"components.material":		{type: String, optional: true},
--- a/rpg-docs/Model/Inventory/Containers.js
+++ b/rpg-docs/Model/Inventory/Containers.js
@@ -2,12 +2,12 @@
 Containers = new Meteor.Collection("containers");

 Schemas.Container = new SimpleSchema({
-	name: 		{ type: String },
+	name: 		{ type: String, trim: false },
 	charId: 	{ type: String, regEx: SimpleSchema.RegEx.Id},
 	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},
+	description:{type: String, optional: true, trim: false},
 	color:   {type: String, allowedValues: _.pluck(colorOptions, "key"), defaultValue: "q"}
 });

--- a/rpg-docs/Model/Inventory/Items.js
+++ b/rpg-docs/Model/Inventory/Items.js
@@ -1,9 +1,9 @@
 Items = new Meteor.Collection('items');

 Schemas.Item = new SimpleSchema({
-	name: 		{type: String, defaultValue: "New Item"},
-	plural:		{type: String, optional: true},
-	description:{type: String, optional: true},
+	name: 		{type: String, defaultValue: "New Item", trim: false},
+	plural:		{type: String, optional: true, trim: false},
+	description:{type: String, optional: true, trim: false},
 	container:	{type: String, regEx: SimpleSchema.RegEx.Id}, //id of container it is normally stowed in
 	charId:     {type: String, regEx: SimpleSchema.RegEx.Id}, //id of owner
 	quantity:	{type: Number, min: 0, defaultValue: 1},
--- a/rpg-docs/client/globalHelpers/mongol.js
+++ b/rpg-docs/client/globalHelpers/mongol.js
@@ -14,7 +14,7 @@ Session.set("Mongol", {
 		"Spells",
 		"SpellLists"
 	],
-	'display': true,
+	'display': false,
 	'opacity_normal': ".7",
 	'opacity_expand': ".9",
 	'disable_warning': 'false',
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.css
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.css
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.html
--- a/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
+++ b/rpg-docs/client/views/character/effects/effectEdit/effectEdit.js
--- a/rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.html
+++ b/rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.html
@@ -0,0 +1,15 @@
+<!--needs to be given charId, sourceId and type-->
+<template name="effectsEditList">
+	{{#if effects}}
+		<hr style="margin: 16px 0 16px 0;">
+		<div id="effects">
+			<h2>Effects</h2>
+			{{#each effects}}
+				{{>effectEdit}}
+			{{/each}}
+		</div>
+	{{/if}}
+	<div layout horizontal end-justified>
+		<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
+	</div>
+</template>
--- a/rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.js
+++ b/rpg-docs/client/views/character/effects/effectsEditList/effectsEditList.js
@@ -0,0 +1,17 @@
+Template.effectsEditList.helpers({
+	effects: function(){
+		var cursor = Effects.find({sourceId: this.sourceId});
+		return cursor;
+	}
+});
+
+Template.effectsEditList.events({
+	"tap #addEffectButton": function(){
+		Effects.insert({
+			charId: this.charId,
+			sourceId: this.sourceId,
+			operation: "add",
+			type: this.type
+		});
+	},
+});
--- a/rpg-docs/client/views/character/features/attackDialog/attackDialog.html
+++ b/rpg-docs/client/views/character/features/attackDialog/attackDialog.html
@@ -1,40 +1,26 @@
 <template name="attackDialog">
 	{{#with attack}}
-		<core-header-panel fit>
-			<core-toolbar class={{colorClass}} hero-id="toolbar" hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex>{{name}}</div>
-				<paper-icon-button id="deleteAttack" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Attack" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<div layout horizontal>
-					<!--Name-->
-					<paper-input id="attackNameInput" label="Name" floatinglabel value={{name}}></paper-input>
-					<!--color-->
-					{{> colorDropdown}}
-				</div>
-				<!--attackBonus-->
-				<paper-input id="attackBonusInput" label="Attack Bonus" floatinglabel value={{attackBonus}}></paper-input>
-				<!--damage-->
-				<paper-input id="damageInput" label="Damage" floatinglabel value={{damage}}></paper-input>
-				<!--range-->
-				<paper-input id="rangeInput" label="Range" floatinglabel value={{range}}></paper-input>
-				<!--DamageType-->
-				<paper-dropdown-menu id="damageTypeDropdown" label="DamageType">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{damageType}}>
-							{{#each damageTypes}}
-								<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
+		{{#baseDialog title=name class=colorClass}}
+			<div layout horizontal>
+				<!--Name-->
+				<paper-input id="attackNameInput" label="Name" floatinglabel value={{name}}></paper-input>
 			</div>
-		</core-header-panel>
+			<!--attackBonus-->
+			<paper-input id="attackBonusInput" label="Attack Bonus" floatinglabel value={{attackBonus}}></paper-input>
+			<!--damage-->
+			<paper-input id="damageInput" label="Damage" floatinglabel value={{damage}}></paper-input>
+			<!--range-->
+			<paper-input id="rangeInput" label="Range" floatinglabel value={{range}}></paper-input>
+			<!--DamageType-->
+			<paper-dropdown-menu id="damageTypeDropdown" label="DamageType">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{damageType}}>
+						{{#each damageTypes}}
+						<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/features/attackDialog/attackDialog.js
+++ b/rpg-docs/client/views/character/features/attackDialog/attackDialog.js
@@ -1,41 +1,14 @@
 var damageTypes = ["bludgeoning", "piercing", "slashing", "acid", "cold", "fire", "force", "lightning", "necrotic", 
 				  "poison", "psychic", "radiant", "thunder"];

-Template.attackDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.attackDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail()
+	"color-change": function(event, instance){
+		Attacks.update(instance.data.attackId, {$set: {color: event.color}});
 	},
-	"tap #deleteAttack": function(){
-		Attacks.remove(this._id);
+	"tap #deleteButton": function(event, instance){
+		Attacks.remove(instance.data.attackId);
 		GlobalUI.closeDetail()
 	},
-	"tap #addEffectButton": function(){
-		Effects.insert({
-			charId: this.charId,
-			sourceId: this._id,
-			operation: "add",
-			type: "attack"
-		});
-	},
 	"change #attackNameInput": function(event){
 		var value = event.currentTarget.value;
 		Attacks.update(this._id, {$set: {name: value}});
@@ -58,14 +31,7 @@ Template.attackDialog.events({
 		var value = detail.item.getAttribute("name");
 		if(value == this.damageType) return;
 		Attacks.update(this._id, {$set: {damageType: value}});
-	},
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		if(value == this.color) return;
-		Attacks.update(this._id, {$set: {color: value}});
-	},
+	}
 });

 Template.attackDialog.helpers({
--- a/rpg-docs/client/views/character/features/featureDialog/featureDialog.html
+++ b/rpg-docs/client/views/character/features/featureDialog/featureDialog.html
@@ -1,56 +1,31 @@
 <template name="featureDialog">
 	{{#with feature}}
-		<core-header-panel fit>
-			<core-toolbar class={{colorClass}} hero-id="toolbar" hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex>{{name}}</div>
-				<paper-icon-button id="deleteFeature" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--name-->
-				<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
-				<!--color-->
-				{{> colorDropdown}}
-				<hr style="margin: 16px 0 16px 0;">
-				<!--description-->
-				<paper-input-decorator label="Description" floatinglabel layout vertical>
-					<paper-autogrow-textarea>
-						<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-					</paper-autogrow-textarea>
-				</paper-input-decorator>
-				<hr style="margin: 16px 0 16px 0;">
-				<div layout horizontal center style="height: 60px;">
-					<div class="caption">Limit Uses</div>
-					<paper-toggle-button id="limitUseCheck"
-										 checked={{usesSet}} 
-										 role="button" 
-										 aria-pressed="false" 
-										 tabindex="0" 
-										 touch-action="pan-y"
-										 style="margin-left: 8px; margin-right:8px;">
-					</paper-toggle-button>
-					{{#if usesSet}}
-						<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
-					{{/if}}
-				</div>
-				{{#if effects}}
-					<hr style="margin: 16px 0 16px 0;">
-					<div id="effects">
-						<h2>Effects</h2>
-						{{#each effects}}
-							{{>effectEdit}}
-						{{/each}}
-					</div>
+		{{#baseDialog title=name class=colorClass}}
+			<!--name-->
+			<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+			<hr style="margin: 16px 0 16px 0;">
+			<!--description-->
+			<paper-input-decorator label="Description" floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+			<hr style="margin: 16px 0 16px 0;">
+			<div layout horizontal center style="height: 60px;">
+				<div class="caption">Limit Uses</div>
+				<paper-toggle-button id="limitUseCheck"
+									 checked={{usesSet}} 
+									 role="button" 
+									 aria-pressed="false" 
+									 tabindex="0" 
+									 touch-action="pan-y"
+									 style="margin-left: 8px; margin-right:8px;">
+				</paper-toggle-button>
+				{{#if usesSet}}
+				<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
 				{{/if}}
-				<div layout horizontal end-justified>
-					<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
-				</div>
 			</div>
-		</core-header-panel>
+			{{> effectsEditList sourceId=_id charId=charId type="feature"}}
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/features/featureDialog/featureDialog.js
+++ b/rpg-docs/client/views/character/features/featureDialog/featureDialog.js
@@ -1,38 +1,11 @@
-Template.featureDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.featureDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail()
+	"color-change": function(event, instance){
+		Features.update(instance.data.featureId, {$set: {color: event.color}});
 	},
-	"tap #deleteFeature": function(){
-		Features.remove(this._id);
+	"tap #deleteButton": function(event, instance){
+		Features.remove(instance.data.featureId);
 		GlobalUI.closeDetail()
 	},
-	"tap #addEffectButton": function(){
-		Effects.insert({
-			charId: Template.currentData().charId,
-			sourceId: this._id,
-			operation: "add",
-			type: "feature"
-		});
-	},
 	"change #featureNameInput": function(event){
 		var name = Template.instance().find("#featureNameInput").value;
 		Features.update(this._id, {$set: {name: name}});
@@ -54,12 +27,6 @@ Template.featureDialog.events({
 		var value = event.target.value;
 		var featureId = this._id;
 		Features.update(featureId, {$set: {uses: value}});
-	},
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		Features.update(this._id, {$set: {color: value}});
 	}
 });

@@ -67,10 +34,6 @@ Template.featureDialog.helpers({
 	feature: function(){
 		return Features.findOne(this.featureId);
 	},
-	effects: function(){
-		var cursor = Effects.find({sourceId: this._id, type: "feature"})
-		return cursor;
-	},
 	usesSet: function(){
 		return _.isString(this.uses);
 	},
--- a/rpg-docs/client/views/character/inventory/containerDialog/containerDialog.html
+++ b/rpg-docs/client/views/character/inventory/containerDialog/containerDialog.html
@@ -1,36 +1,22 @@
 <template name="containerDialog">
 	{{#with container}}
-		<core-header-panel fit>
-			<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex hero-id="title" hero>{{name}}</div>
-				<paper-icon-button id="deleteContainer" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Name and plural name-->
-				<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
-				<!--Color-->
-				{{> colorDropdown}}
-				<!--Weight-->
-				<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>
-			</div>
-		</core-header-panel>
+		{{#baseDialog title=name class=colorClass}}
+			<!--Name and plural name-->
+			<paper-input id="containerNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+			<!--Weight-->
+			<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>
--- a/rpg-docs/client/views/character/inventory/containerDialog/containerDialog.js
+++ b/rpg-docs/client/views/character/inventory/containerDialog/containerDialog.js
@@ -1,31 +1,17 @@
-Template.containerDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
+Template.containerDialog.helpers({
+	container: function(){
+		return Containers.findOne(this.containerId);
 	}
-}
+});

 Template.containerDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"color-change": function(event, instance){
+		Containers.update(instance.data.containerId, {$set: {color: event.color}});
 	},
-	"tap #deleteContainer": function(){
-		Containers.remove(this._id);
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		Containers.remove(instance.data.containerId);
+		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 #containerNameInput, input #containerNameInput": function(event){
 		console.log("changed Nameinput")
@@ -33,30 +19,15 @@ Template.containerDialog.events({
 		Containers.update(this._id, {$set: {name: name}});
 	},
 	"change #weightInput, input #weightInput": function(event){
-		var weight = Template.instance().find("#weightInput").value;
+		var weight = +Template.instance().find("#weightInput").value;
 		Containers.update(this._id, {$set: {weight: weight}});
 	},
 	"change #valueInput, input #valueInput": function(event){
-		var value = Template.instance().find("#valueInput").value;
+		var value = +Template.instance().find("#valueInput").value;
 		Containers.update(this._id, {$set: {value: value}});
 	},
 	"change #containerDescriptionInput": function(event){
 		var description = Template.instance().find("#containerDescriptionInput").value;
 		Containers.update(this._id, {$set: {description: description}});
-	},
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		Containers.update(this._id, {$set: {color: value}});
 	}
 });
-
-Template.containerDialog.helpers({
-	container: function(){
-		return Containers.findOne(this.containerId);
-	},
-	colorClass: function(){
-		return getColorClass(this.color)
-	}
-});
--- a/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html
+++ b/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.html
@@ -1,84 +1,62 @@
 <template name="itemDialog">
 	{{#with item}}
-		<core-header-panel fit>
-			<core-toolbar hero-id="toolbar" hero class="brown white-text">
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex>{{name}}</div>
-				<paper-icon-button id="deleteItem" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Name and plural name-->
-				<paper-input id="itemNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
-				{{# if ne1 quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
-				<!--Equipped-->
-				{{# if canEquip}}
-					<div center horizontal layout>
-						<div flex>Equipped</div>
-						<paper-toggle-button id="equippedInput"
-											 checked={{equipped}} 
-											 role="button" 
-											 aria-pressed="false" 
-											 tabindex="0" 
-											 touch-action="pan-y">
-						</paper-toggle-button>
-					</div>
-				{{/if}}
-				<!--Quantity-->
-				<paper-input-decorator label="Quantity" floatinglabel>
-					<input id="quantityInput" type="number" value={{quantity}}>
-				</paper-input-decorator>
-				<!--Weight-->
-				<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
-					<input id="weightInput" type="number" value={{weight}}>
-				</paper-input-decorator>
-				<!--Value-->
-				<paper-input-decorator label="Value Each (GP)" 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="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-					</paper-autogrow-textarea>
-				</paper-input-decorator>
-				<!--Container dropdown-->
-				<paper-dropdown-menu id="containerDropDown" label="Container">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{containerIndex}}>
-							{{#each containers}}
-								<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-				<!--Equipment slot dropdown-->
-				<paper-dropdown-menu id="slotDropDown" label="slot">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{equipmentSlotIndex}}>
-							{{#each equipmentSlots}}
-								<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-
-				<!--Effects-->
-				{{#if effects}}
-					<hr style="margin: 16px 0 16px 0;">
-					<div id="effects">
-						<h2>Effects</h2>
-						{{#each effects}}
-							{{>effectEdit}}
+		{{#baseDialog title=name class=colorClass}}
+			<!--Name and plural name-->
+			<paper-input id="itemNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
+			{{# if ne1 quantity}}<paper-input id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
+			<!--Container dropdown-->
+			<paper-dropdown-menu id="containerDropDown" label="Container">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{containerIndex}}>
+						{{#each containers}}
+							<paper-item containerId={{_id}} class="containerMenuItem">{{name}}</paper-item>
 						{{/each}}
-					</div>
-				{{/if}}
-				<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
-			</div>
-		</core-header-panel>
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--Equipment slot dropdown-->
+			<paper-dropdown-menu id="slotDropDown" label="slot">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{equipmentSlotIndex}}>
+						{{#each equipmentSlots}}
+							<paper-item class="slotMenuItem" value={{value}}>{{name}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--Equipped-->
+			{{# if canEquip}}
+				<div center horizontal layout>
+					<div flex>Equipped</div>
+					<paper-toggle-button id="equippedInput"
+										 checked={{equipped}} 
+										 role="button" 
+										 aria-pressed="false" 
+										 tabindex="0" 
+										 touch-action="pan-y">
+					</paper-toggle-button>
+				</div>
+			{{/if}}
+			<!--Quantity-->
+			<paper-input-decorator label="Quantity" floatinglabel>
+				<input id="quantityInput" type="number" value={{quantity}}>
+			</paper-input-decorator>
+			<!--Weight-->
+			<paper-input-decorator label="Weight Each (lbs)" floatinglabel>
+				<input id="weightInput" type="number" value={{weight}}>
+			</paper-input-decorator>
+			<!--Value-->
+			<paper-input-decorator label="Value Each (GP)" 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="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+			<!--Effects-->
+			{{> effectsEditList sourceId=_id charId=charId type="equipment"}}
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js
+++ b/rpg-docs/client/views/character/inventory/itemDialog/itemDialog.js
@@ -1,39 +1,51 @@
-Template.itemDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
+var getContainers = function(charId){
+	return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
+};
+
+var equipmentSlots =  [
+	{name: "None", value: "none"},
+	{name: "Held", value: "held"},
+	{name: "Armor", value: "armor"},
+	{name: "Head", value: "head"},
+	{name: "Arms", value: "arms"}, 
+	{name: "Hands", value: "hands"},
+	{name: "Feet", value: "feet"}
+];
+
+Template.itemDialog.helpers({
+	item: function(){
+		return Items.findOne(this.itemId);
+	},
+	containers: function(){
+		return getContainers(this.charId);
+	},
+	containerIndex: function(){
+		var containers = getContainers(this.charId);
+		var containerIds = _.pluck(containers, "_id");
+		return _.indexOf(containerIds, this.container);
+	},
+	equipmentSlots: function(){
+		return equipmentSlots;
+	},
+	equipmentSlotIndex: function(){
+		return _.indexOf(_.pluck(equipmentSlots, "value"), this.equipmentSlot);
+	},
+	canEquip: function(){
+		return this.equipmentSlot !== "none";
+	},
+	ne1: function(num){
+		return num != 1;
 	}
-}
+});

 Template.itemDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"color-change": function(event, instance){
+		Items.update(instance.data.itemId, {$set: {color: event.color}});
 	},
-	"tap #deleteItem": function(){
-		Items.remove(this._id);
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		Items.remove(instance.data.itemId);
+		GlobalUI.closeDetail()
 	},
-	"tap #addEffectButton": function(){
-		Effects.insert({
-			charId: Template.currentData().charId,
-			sourceId: this._id,
-			operation: "add",
-			type: "equipment"
-		});
-	},
-	//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 #itemNameInput, input #itemNameInput": function(event){
 		console.log("changed Nameinput")
@@ -45,15 +57,15 @@ Template.itemDialog.events({
 		Items.update(this._id, {$set: {plural: plural}});
 	},
 	"change #quantityInput, input #quantityInput": function(event){
-		var quantity = Template.instance().find("#quantityInput").value;
+		var quantity = +Template.instance().find("#quantityInput").value;
 		Items.update(this._id, {$set: {quantity: quantity}});
 	},
 	"change #weightInput, input #weightInput": function(event){
-		var weight = Template.instance().find("#weightInput").value;
+		var weight = +Template.instance().find("#weightInput").value;
 		Items.update(this._id, {$set: {weight: weight}});
 	},
 	"change #valueInput, input #valueInput": function(event){
-		var value = Template.instance().find("#valueInput").value;
+		var value = +Template.instance().find("#valueInput").value;
 		Items.update(this._id, {$set: {value: value}});
 	},
 	"change #itemDescriptionInput": function(event){
@@ -77,47 +89,3 @@ Template.itemDialog.events({
 		Items.update(Template.currentData().itemId, {$set: {equipmentSlot: value}});
 	}
 });
-
-var getContainers = function(charId){
-	return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
-};
-
-var equipmentSlots =  [
-	{name: "None", value: "none"},
-	{name: "Held", value: "held"},
-	{name: "Armor", value: "armor"},
-	{name: "Head", value: "head"},
-	{name: "Arms", value: "arms"}, 
-	{name: "Hands", value: "hands"},
-	{name: "Feet", value: "feet"}
-];
-
-Template.itemDialog.helpers({
-	item: function(){
-		return Items.findOne(this.itemId);
-	},
-	effects: function(){
-		var cursor = Effects.find({charId: this.charId, type: "equipment", sourceId: this._id})
-		return cursor;
-	},
-	containers: function(){
-		return getContainers(this.charId);
-	},
-	containerIndex: function(){
-		var containers = getContainers(this.charId);
-		var containerIds = _.pluck(containers, "_id");
-		return _.indexOf(containerIds, this.container);
-	},
-	equipmentSlots: function(){
-		return equipmentSlots;
-	},
-	equipmentSlotIndex: function(){
-		return _.indexOf(_.pluck(equipmentSlots, "value"), this.equipmentSlot);
-	},
-	canEquip: function(){
-		return this.equipmentSlot !== "none";
-	},
-	ne1: function(num){
-		return num != 1;
-	}
-});
--- a/rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.html
+++ b/rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.html
@@ -1,32 +1,20 @@
 <template name="experienceDialog">
 	{{#with experience}}
-		<core-header-panel fit class="experienceDialog">
-			<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex hero-id="title" hero>{{name}}</div>
-				<paper-icon-button id="deleteExperience" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<div horizontal layout>
-					<!--Name-->
-					<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-					<!--Value-->
-					<paper-input-decorator label="Value" floatinglabel>
-						<input id="valueInput" type="number" value={{value}}>
-					</paper-input-decorator>
-				</div>
-				<!--Description-->
-				<paper-input-decorator label="Description" floatinglabel layout vertical>
-					<paper-autogrow-textarea>
-						<textarea id="experienceDescriptionInput" placeholder value={{description}}></textarea>
-					</paper-autogrow-textarea>
+		{{#baseDialog title=name class=colorClass hideColor="true"}}
+			<div horizontal layout>
+				<!--Name-->
+				<paper-input id="experienceNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
+				<!--Value-->
+				<paper-input-decorator label="Value" floatinglabel>
+					<input id="valueInput" type="number" value={{value}}>
 				</paper-input-decorator>
 			</div>
-		</core-header-panel>
+			<!--Description-->
+			<paper-input-decorator label="Description" floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="experienceDescriptionInput" placeholder value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.js
+++ b/rpg-docs/client/views/character/journal/experienceDialog/experienceDialog.js
@@ -1,38 +1,15 @@
-Template.experienceDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.experienceDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		Experiences.remove(instance.data.experienceId);
+		GlobalUI.closeDetail()
 	},
-	"tap #deleteExperience": function(){
-		Experiences.remove(this._id);
-		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 #experienceNameInput, input #experienceNameInput": function(event){
 		var value = event.currentTarget.value
 		Experiences.update(this._id, {$set: {name: value}});
 	},
 	"change #valueInput": function(event){
-		var value = event.currentTarget.value
+		var value = +event.currentTarget.value
 		Experiences.update(this._id, {$set: {value: value}});
 	},
 	"change #experienceDescriptionInput": function(event){
--- a/rpg-docs/client/views/character/journal/levelDialog/levelDialog.html
+++ b/rpg-docs/client/views/character/journal/levelDialog/levelDialog.html
@@ -1,32 +1,10 @@
 <template name="levelDialog">
 	{{#with level}}
-		<core-header-panel fit>
-			<core-toolbar class="grey white-text" hero-id="toolbar" hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex>{{name}}</div>
-				<paper-icon-button id="deleteLevel" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Level" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Level-->
-				<paper-input id="levelValueInput" label="Level" floatinglabel value={{value}}></paper-input>
-				{{#if effects}}
-					<hr style="margin: 16px 0 16px 0;">
-					<div id="effects">
-						<h2>Effects</h2>
-						{{#each effects}}
-							{{>effectEdit}}
-						{{/each}}
-					</div>
-				{{/if}}
-				<div layout horizontal end-justified>
-					<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
-				</div>
-			</div>
-		</core-header-panel>
+		{{#baseDialog title=name class=colorClass hideColor="true"}}
+			<!--Level-->
+			<paper-input id="levelValueInput" label="Level" floatinglabel value={{value}}></paper-input>
+			<!--Effects-->
+			{{> effectsEditList sourceId=_id charId=charId type="level"}}
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/journal/levelDialog/levelDialog.js
+++ b/rpg-docs/client/views/character/journal/levelDialog/levelDialog.js
@@ -1,38 +1,8 @@
-Template.levelDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.levelDialog.events({
-	"tap #backButton": function(){
+	"tap #deleteButton": function(event, instance){
+		Levels.remove(instance.data.levelId);
 		GlobalUI.closeDetail()
 	},
-	"tap #deleteLevel": function(){
-		Levels.remove(this._id);
-		GlobalUI.closeDetail()
-	},
-	"tap #addEffectButton": function(){
-		Effects.insert({
-			charId: this.charId,
-			sourceId: this._id,
-			operation: "add",
-			type: "level"
-		});
-	},
 	"change #levelValueInput": function(event){
 		var value = event.currentTarget.value;
 		Levels.update(this._id, {$set: {value: value}});
@@ -42,8 +12,5 @@ Template.levelDialog.events({
 Template.levelDialog.helpers({
 	level: function(){
 		return Levels.findOne(this.levelId);
-	},
-	effects: function(){
-		return Effects.find({sourceId: this._id, type: "level"});
 	}
 });
--- a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
+++ b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.html
@@ -1,30 +1,16 @@
 <template name="noteDialog">
 	{{#with note}}
-		<core-header-panel fit class="noteDialog">
-			<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex hero-id="title" hero>{{name}}</div>
-				<paper-icon-button id="deleteNote" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Name-->
-				<div horizontal layout>
-					<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-					<!--Color-->
-					{{> colorDropdown}}<br>
-				</div>
-				<!--Description-->
-				<paper-input-decorator label="Description" floatinglabel layout vertical>
-					<paper-autogrow-textarea>
-						<textarea id="noteDescriptionInput" placeholder value={{description}}></textarea>
-					</paper-autogrow-textarea>
-				</paper-input-decorator>
+		{{#baseDialog title=name class=colorClass}}
+			<!--Name-->
+			<div horizontal layout>
+				<paper-input id="noteNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
 			</div>
-		</core-header-panel>
+			<!--Description-->
+			<paper-input-decorator label="Description" floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="noteDescriptionInput" placeholder value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
+++ b/rpg-docs/client/views/character/journal/noteDialog/noteDialog.js
@@ -1,32 +1,11 @@
-Template.noteDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.noteDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"color-change": function(event, instance){
+		Notes.update(instance.data.noteId, {$set: {color: event.color}});
 	},
-	"tap #deleteNote": function(){
-		Notes.remove(this._id);
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		Notes.remove(instance.data.noteId);
+		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 #noteNameInput, input #noteNameInput": function(event){
 		var value = event.currentTarget.value
 		Notes.update(this._id, {$set: {name: value}});
@@ -34,12 +13,6 @@ Template.noteDialog.events({
 	"change #noteDescriptionInput": function(event){
 		var value = event.currentTarget.value
 		Notes.update(this._id, {$set: {description: value}});
-	},
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		Notes.update(this._id, {$set: {color: value}});
 	}
 });

--- a/rpg-docs/client/views/character/journal/raceDialog/raceDialog.html
+++ b/rpg-docs/client/views/character/journal/raceDialog/raceDialog.html
@@ -1,23 +1,6 @@
 <template name="raceDialog">
-	<core-header-panel fit>
-		<core-toolbar class="grey white-text" hero-id="toolbar" hero>
-			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-			<div flex>{{race}}</div>
-		</core-toolbar>
-		<div class="detailContent">
-			<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
-			{{#if effects}}
-				<hr style="margin: 16px 0 16px 0;">
-				<div id="effects">
-					<h2>Effects</h2>
-					{{#each effects}}
-						{{>effectEdit}}
-					{{/each}}
-				</div>
-			{{/if}}
-			<div layout horizontal end-justified>
-				<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
-			</div>
-		</div>
-	</core-header-panel>
+	{{#baseDialog title="Race" class=colorClass hideColor="true" hideDelete="true"}}
+		<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
+		{{> effectsEditList sourceId=_id charId=charId type="racial"}}
+	{{/baseDialog}}
 </template>
--- a/rpg-docs/client/views/character/journal/raceDialog/raceDialog.js
+++ b/rpg-docs/client/views/character/journal/raceDialog/raceDialog.js
@@ -1,33 +1,4 @@
-Template.raceDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.raceDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail()
-	},
-	"tap #addEffectButton": function(){
-		Effects.insert({
-			charId: this.charId,
-			operation: "add",
-			type: "racial"
-		});
-	},
 	"change #raceInput": function(event){
 		var value = event.currentTarget.value;
 		Characters.update(this.charId, {$set: {race: value}});
@@ -35,9 +6,6 @@ Template.raceDialog.events({
 });

 Template.raceDialog.helpers({
-	effects: function(){
-		return Effects.find({charId: this.charId, type: "racial"});
-	},
 	race: function(){
 		var char = Characters.findOne(this.charId, {fields: {race: 1}});
 		return char && char.race;
--- a/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
+++ b/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.html
@@ -1,18 +1,12 @@
 <template name="personaDetailsDialog">
-	<core-header-panel fit>
-		<core-toolbar class="deep-purple white-text" hero-id="toolbar" hero>
-			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-			<div flex hero-id="title" hero>{{name}}</div>
-		</core-toolbar>
-		<div class="detailContent">
-			<!--Name-->
-			<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input><br>
-			<!--Alignment-->
-			<paper-input id="alignmentInput" label="Alignment" floatinglabel value={{alignment}}></paper-input><br>
-			<!--Gender-->
-			<paper-input id="genderInput" label="Gender" floatinglabel value={{gender}}></paper-input><br>
-			<!--Race-->
-			<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input><br>
-		</div>
-	</core-header-panel>
+	{{#baseDialog title=name class="deep-purple white-text" hideColor="true" hideDelete="true"}}
+		<!--Name-->
+		<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input><br>
+		<!--Alignment-->
+		<paper-input id="alignmentInput" label="Alignment" floatinglabel value={{alignment}}></paper-input><br>
+		<!--Gender-->
+		<paper-input id="genderInput" label="Gender" floatinglabel value={{gender}}></paper-input><br>
+		<!--Race-->
+		<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input><br>
+	{{/baseDialog}}
 </template>
--- a/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.js
+++ b/rpg-docs/client/views/character/persona/peronaDetailsDialog/personaDetailsDialog.js
@@ -1,30 +1,4 @@
-Template.personaDetailsDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-};
-
-Template.personaDetailsDialog.helpers({
-	
-});
-
 Template.personaDetailsDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail()
-	},
 	"change #nameInput": function(event){
 		var input = event.currentTarget.value;
 		Characters.update( this.charId, {$set: {name: input}} );
--- a/rpg-docs/client/views/character/persona/textDialog/textDialog.html
+++ b/rpg-docs/client/views/character/persona/textDialog/textDialog.html
@@ -1,16 +1,9 @@
 <template name="textDialog">
-	<core-header-panel fit>
-		<core-toolbar hero-id="toolbar" hero class={{colorClass}}>
-			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-			<div flex hero-id="title" hero>{{title}}</div>
-		</core-toolbar>
-		<div class="detailContent">
-			<!--Description-->
-			<paper-input-decorator label={{title}} floatinglabel layout vertical>
-				<paper-autogrow-textarea>
-					<textarea id="textInput" placeholder value={{value}}></textarea>
-				</paper-autogrow-textarea>
-			</paper-input-decorator>
-		</div>
-	</core-header-panel>
+	{{#baseDialog title=title class=colorClass hideColor="true" hideDelete="true"}}
+		<paper-input-decorator label={{title}} floatinglabel layout vertical>
+			<paper-autogrow-textarea>
+				<textarea id="textInput" placeholder value={{value}}></textarea>
+			</paper-autogrow-textarea>
+		</paper-input-decorator>
+	{{/baseDialog}}
 </template>
--- a/rpg-docs/client/views/character/persona/textDialog/textDialog.js
+++ b/rpg-docs/client/views/character/persona/textDialog/textDialog.js
@@ -1,22 +1,3 @@
-Template.textDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-};
-
 Template.textDialog.helpers({
 	value: function(){
 		var fieldSelector = {fields: {}};
@@ -32,8 +13,5 @@ Template.textDialog.events({
 		var setter = {$set: {}};
 		setter.$set[this.field] = input;
 		Characters.update(this.charId, setter);
-	},
-	"tap #backButton": function(){
-		GlobalUI.closeDetail()
-	},
+	}
 });
--- a/rpg-docs/client/views/character/spells/spellDialog/spellDialog.html
+++ b/rpg-docs/client/views/character/spells/spellDialog/spellDialog.html
@@ -1,89 +1,75 @@
 <template name="spellDialog">
 	{{#with spell}}
-		<core-header-panel fit class="spellDialog">
-			<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex hero-id="title" hero>{{name}}</div>
-				<paper-icon-button id="deleteSpell" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Name-->
-				<div horizontal layout>
-					<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-					<!--Color-->
-					{{> colorDropdown}}<br>
-				</div>
-				<!--List dropdown-->
-				<paper-dropdown-menu id="listDropdown" label="Spell List">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{listId}}>
-							{{#each spellLists}}
-								<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-				<!--Level-->
-				<paper-dropdown-menu id="levelDropdown" label="Level">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{level}}>
-							{{#each spellLevels}}
-								<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-				<!--School-->
-				<paper-dropdown-menu id="schoolDropdown" label="School">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{school}}>
-							{{#each magicSchools}}
-								<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-				<!--Prepared-->
-				<paper-dropdown-menu id="preparedDropdown" label="School">
-					<paper-dropdown layered class="dropdown">
-						<core-menu class="menu"  selected={{prepared}}>
-							{{#each preparedOptions}}
-								<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
-							{{/each}}
-						</core-menu>
-					</paper-dropdown>
-				</paper-dropdown-menu>
-				<!--Components-->
-				<div horizontal layout center wrap>
-					<div>Verbal:</div>
-					<paper-checkbox id="verbalCheckbox" checked={{components.verbal}}></paper-checkbox>
-					<div>Somatic:</div>
-					<paper-checkbox id="somaticCheckbox" checked={{components.somatic}}></paper-checkbox>
-					<div>Concentration:</div>
-					<paper-checkbox id="concentrationCheckbox" checked={{components.concentration}}></paper-checkbox>
-					<!--Ritual-->
-					<div>Ritual: </div>
-					<paper-checkbox id="ritualCheckbox" checked={{ritual}}></paper-checkbox>
-				</div>
-				<paper-input id="materialInput" class="fullwidth" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
-				<!--Casting Time-->
-				<paper-input id="castingTimeInput" class="fullwidth" label="Casting Time" floatinglabel value={{castingTime}} flex></paper-input>
-				<!--Range-->
-				<paper-input id="rangeInput" class="fullwidth" label="Range" floatinglabel value={{range}} flex></paper-input>
-				<!--Duration-->
-				<paper-input id="durationInput" class="fullwidth" label="Duration" floatinglabel value={{duration}} flex></paper-input>
-				<!--Description-->
-				<paper-input-decorator label="Description" floatinglabel layout vertical>
-					<paper-autogrow-textarea>
-						<textarea id="descriptionInput" placeholder value={{description}}></textarea>
-					</paper-autogrow-textarea>
-				</paper-input-decorator>
+		{{#baseDialog title=name class=colorClass}}
+			<!--Name-->
+			<div horizontal layout>
+				<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
 			</div>
-		</core-header-panel>
+			<!--List dropdown-->
+			<paper-dropdown-menu id="listDropdown" label="Spell List">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{listId}}>
+						{{#each spellLists}}
+						<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--Level-->
+			<paper-dropdown-menu id="levelDropdown" label="Level">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{level}}>
+						{{#each spellLevels}}
+						<paper-item name={{level}} class="containerMenuItem">{{name}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--School-->
+			<paper-dropdown-menu id="schoolDropdown" label="School">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{school}}>
+						{{#each magicSchools}}
+						<paper-item name={{this}} class="containerMenuItem">{{this}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--Prepared-->
+			<paper-dropdown-menu id="preparedDropdown" label="School">
+				<paper-dropdown layered class="dropdown">
+					<core-menu class="menu"  selected={{prepared}}>
+						{{#each preparedOptions}}
+						<paper-item name={{value}} class="containerMenuItem">{{name}}</paper-item>
+						{{/each}}
+					</core-menu>
+				</paper-dropdown>
+			</paper-dropdown-menu>
+			<!--Components-->
+			<div horizontal layout center wrap>
+				<div>Verbal:</div>
+				<paper-checkbox id="verbalCheckbox" checked={{components.verbal}}></paper-checkbox>
+				<div>Somatic:</div>
+				<paper-checkbox id="somaticCheckbox" checked={{components.somatic}}></paper-checkbox>
+				<div>Concentration:</div>
+				<paper-checkbox id="concentrationCheckbox" checked={{components.concentration}}></paper-checkbox>
+				<!--Ritual-->
+				<div>Ritual: </div>
+				<paper-checkbox id="ritualCheckbox" checked={{ritual}}></paper-checkbox>
+			</div>
+			<paper-input id="materialInput" class="fullwidth" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
+			<!--Casting Time-->
+			<paper-input id="castingTimeInput" class="fullwidth" label="Casting Time" floatinglabel value={{castingTime}} flex></paper-input>
+			<!--Range-->
+			<paper-input id="rangeInput" class="fullwidth" label="Range" floatinglabel value={{range}} flex></paper-input>
+			<!--Duration-->
+			<paper-input id="durationInput" class="fullwidth" label="Duration" floatinglabel value={{duration}} flex></paper-input>
+			<!--Description-->
+			<paper-input-decorator label="Description" floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="descriptionInput" placeholder value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/spells/spellDialog/spellDialog.js
+++ b/rpg-docs/client/views/character/spells/spellDialog/spellDialog.js
@@ -11,35 +11,36 @@ var spellLevels = [
 	{ name: "Level 9",  level: 9 },
 ];

-Template.spellDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
+Template.spellDialog.helpers({
+	spell: function(){
+		return Spells.findOne(this.spellId);
+	},
+	spellLists: function(){
+		return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
+	},
+	magicSchools: function(){
+		return magicSchools;
+	},
+	spellLevels: function(){
+		return spellLevels;
+	},
+	preparedOptions: function(){
+		return [
+			{name: "Prepared", value: "prepared"},
+			{name: "Unprepared", value: "unprepared"},
+			{name: "Always Prepared", value: "always"}
+		];
 	}
-}
+});

 Template.spellDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"color-change": function(event, instance){
+		Spells.update(instance.data.spellId, {$set: {color: event.color}});
 	},
-	"tap #deleteSpell": function(){
-		Spells.remove(this._id);
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		Spells.remove(instance.data.spellId);
+		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 #spellNameInput, input #spellNameInput": function(event){
 		var value = event.currentTarget.value
 		Spells.update(this._id, {$set: {name: value}});
@@ -92,13 +93,6 @@ Template.spellDialog.events({
 		if(value == this.school) return;
 		Spells.update(this._id, {$set: {prepared: value}});
 	},
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		if(value == this.color) return;
-		Spells.update(this._id, {$set: {color: value}});
-	},
 	"change #verbalCheckbox": function(event){
 		var value = event.currentTarget.checked;
 		Spells.update(this._id, {$set: {"components.verbal": value}});
@@ -116,28 +110,3 @@ Template.spellDialog.events({
 		Spells.update(this._id, {$set: {"ritual": value}});
 	},
 });
-
-Template.spellDialog.helpers({
-	spell: function(){
-		return Spells.findOne(this.spellId);
-	},
-	colorClass: function(){
-		return getColorClass(this.color)
-	},
-	spellLists: function(){
-		return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
-	},
-	magicSchools: function(){
-		return magicSchools;
-	},
-	spellLevels: function(){
-		return spellLevels;
-	},
-	preparedOptions: function(){
-		return [
-			{name: "Prepared", value: "prepared"},
-			{name: "Unprepared", value: "unprepared"},
-			{name: "Always Prepared", value: "always"}
-		];
-	}
-});
--- a/rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.html
+++ b/rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.html
@@ -1,48 +1,34 @@
 <template name="spellListDialog">
 	{{#with spellList}}
-		<core-header-panel fit class="spellListDialog">
-			<core-toolbar hero-id="toolbar" class={{colorClass}} hero>
-				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
-				<div flex hero-id="title" hero>{{name}}</div>
-				<paper-icon-button id="deleteSpellList" 
-								   role="button"
-								   tabindex="0"
-								   icon="delete" 
-								   aria-label="Delete Feature" 
-								   noink></paper-icon-button>
-			</core-toolbar>
-			<div class="detailContent">
-				<!--Name-->
-				<div horizontal layout>
-					<paper-input id="spellListNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-					<!--Color-->
-					{{> colorDropdown}}<br>
-				</div>
-				<!--Save DC-->
-				<paper-input id="spellListSaveDCInput" 
-							 label="Save DC" 
-							 floatinglabel 
-							 value={{saveDC}} 
-							 style="width: 100%;"></paper-input><br>
-				<!--Attack Bonus-->
-				<paper-input id="spellListAttackBonusInput" 
-							 label="Attack Bonus" 
-							 floatinglabel 
-							 value={{attackBonus}} 
-							 style="width: 100%;"></paper-input><br>
-				<!--Max Prepared-->
-				<paper-input id="spellListMaxPreparedInput" 
-							 label="Maximum Prepared Spells" 
-							 floatinglabel 
-							 value={{maxPrepared}} 
-							 style="width: 100%;"></paper-input><br>
-				<!--Description-->
-				<paper-input-decorator label="Description" floatinglabel layout vertical>
-					<paper-autogrow-textarea>
-						<textarea id="spellListDescriptionInput" placeholder value={{description}}></textarea>
-					</paper-autogrow-textarea>
-				</paper-input-decorator>
+		{{#baseDialog title=name class=colorClass}}
+			<!--Name-->
+			<div horizontal layout>
+				<paper-input id="spellListNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
 			</div>
-		</core-header-panel>
+			<!--Save DC-->
+			<paper-input id="spellListSaveDCInput" 
+						 label="Save DC" 
+						 floatinglabel 
+						 value={{saveDC}} 
+						 style="width: 100%;"></paper-input><br>
+			<!--Attack Bonus-->
+			<paper-input id="spellListAttackBonusInput" 
+						 label="Attack Bonus" 
+						 floatinglabel 
+						 value={{attackBonus}} 
+						 style="width: 100%;"></paper-input><br>
+			<!--Max Prepared-->
+			<paper-input id="spellListMaxPreparedInput" 
+						 label="Maximum Prepared Spells" 
+						 floatinglabel 
+						 value={{maxPrepared}} 
+						 style="width: 100%;"></paper-input><br>
+			<!--Description-->
+			<paper-input-decorator label="Description" floatinglabel layout vertical>
+				<paper-autogrow-textarea>
+					<textarea id="spellListDescriptionInput" placeholder value={{description}}></textarea>
+				</paper-autogrow-textarea>
+			</paper-input-decorator>
+		{{/baseDialog}}
 	{{/with}}
 </template>
--- a/rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.js
+++ b/rpg-docs/client/views/character/spells/spellListDialog/spellListDialog.js
@@ -1,29 +1,10 @@
-Template.spellListDialog.rendered = function(){
-	var self = this;
-	//update all autogrows after they've been filled
-	var pata = this.$("paper-autogrow-textarea");
-	pata.each(function(index, el){
-		el.update($(el).children().get(0));
-	})
-	//update all input fields as well
-	var input = this.$("paper-input");
-	input.each(function(index, el){
-		el.valueChanged();
-	})
-	//after the dialog is built, open it
-	if (!this.alreadyRendered){
-		Session.set("global.ui.detailShow", true);
-		this.alreadyRendered = true;
-	}
-}
-
 Template.spellListDialog.events({
-	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+	"color-change": function(event, instance){
+		SpellLists.update(instance.data.spellListId, {$set: {color: event.color}});
 	},
-	"tap #deleteSpellList": function(){
-		SpellLists.remove(this._id);
-		GlobalUI.closeDetail();
+	"tap #deleteButton": function(event, instance){
+		SpellLists.remove(instance.data.spellListId);
+		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
@@ -43,20 +24,14 @@ Template.spellListDialog.events({
 		var value = event.currentTarget.value
 		SpellLists.update(this._id, {$set: {maxPrepared: value}});
 	},
-	//TODO change #spellListDescription
-	"core-select .colorDropdown": function(event){
-		var detail = event.originalEvent.detail;
-		if(!detail.isSelected) return;
-		var value = detail.item.getAttribute("name");
-		SpellLists.update(this._id, {$set: {color: value}});
-	}
+	"change #spellListDescriptionInput": function(event){
+		var value = event.currentTarget.value
+		SpellLists.update(this._id, {$set: {description: value}});
+	},
 });

 Template.spellListDialog.helpers({
 	spellList: function(){
 		return SpellLists.findOne(this.spellListId);
-	},
-	colorClass: function(){
-		return getColorClass(this.color)
 	}
 });
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.js
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.js
@@ -7,7 +7,6 @@ Template.healthCard.helpers({
 		return char && char.deathSave;
 	},
 	failIcon: function(num){
-		console.log("checking ", num, " against fail", this)
 		if(num <= this.fail) return "radio-button-on";
 		else return "radio-button-off";
 	},
--- a/rpg-docs/client/views/layout/imports.html
+++ b/rpg-docs/client/views/layout/imports.html
@@ -5,6 +5,7 @@
 <link rel="import" href="/components/core-animated-pages/transitions/slide-from-right.html">
 <link rel="import" href="/components/core-icons/av-icons.html">
 <link rel="import" href="/components/core-icons/core-icons.html">
+<link rel="import" href="/components/core-icons/editor-icons.html">
 <link rel="import" href="/components/core-icons/image-icons.html">
 <link rel="import" href="/components/core-icons/social-icons.html">
 <link rel="import" href="/components/core-item/core-item.html">
--- a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
+++ b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
@@ -0,0 +1,23 @@
+<template name="baseDialog">
+	<core-header-panel fit>
+		<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 hideColor}}{{else}}
+				<!--color-->
+				{{> colorDropdown}}
+			{{/if}}
+			{{#if hideDelete}}{{else}}
+			<paper-icon-button id="deleteButton" 
+							   role="button"
+							   tabindex="0"
+							   icon="delete" 
+							   aria-label="Delete Feature" 
+							   noink></paper-icon-button>
+			{{/if}}
+		</core-toolbar>
+		<div class="detailContent">
+			{{> UI.contentBlock}}
+		</div>
+	</core-header-panel>
+</template>
--- a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
+++ b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
@@ -0,0 +1,24 @@
+Template.baseDialog.rendered = function(){
+	var self = this;
+	//update all autogrows after they've been filled
+	var pata = this.$("paper-autogrow-textarea");
+	pata.each(function(index, el){
+		el.update($(el).children().get(0));
+	})
+	//update all input fields as well
+	var input = this.$("paper-input");
+	input.each(function(index, el){
+		el.valueChanged();
+	})
+	//after the dialog is built, open it
+	if (!this.alreadyRendered){
+		Session.set("global.ui.detailShow", true);
+		this.alreadyRendered = true;
+	}
+}
+
+Template.baseDialog.events({
+	"tap #backButton": function(){
+		GlobalUI.closeDetail()
+	}
+});
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
@@ -1,4 +1,4 @@
-<template name="colorDropdown">
+<template name="colorDropdownOld">
 	<paper-dropdown-menu class="colorDropdown {{colorClass color}}" label="Color">
 		<paper-dropdown layered class="dropdown">
 			<core-menu class="menu"  selected={{color}}>
@@ -9,3 +9,16 @@
 		</paper-dropdown>
 	</paper-dropdown-menu>
 </template>
+
+<template name="colorDropdown">
+	<paper-menu-button id="colorDropdown">
+		<paper-icon-button icon="editor:format-paint" noink></paper-icon-button>
+		<paper-dropdown class="dropdown">
+			<core-menu class="menu">
+				{{#each colors}}
+					<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
+				{{/each}}
+			</core-menu>
+		</paper-dropdown>
+	</paper-menu-button>
+</template>
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
@@ -3,3 +3,13 @@ Template.colorDropdown.helpers({
 		return colorOptions;
 	}
 });
+
+Template.colorDropdown.events({
+	"tap .colorMenuItem": function(event, instance){
+		var color = event.currentTarget.getAttribute("name");
+		instance.$("#colorDropdown").trigger({
+			type: "color-change",
+			color: color
+		});
+	}
+})