Fixed polymer inputs not showing their titles or their full area

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

@@ -40,6 +40,10 @@ Template.itemDialog.events({
 	},
 });
 
+Template.itemEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
 Template.itemEdit.helpers({
 	ne1: function(num){
 		return num != 1;

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

@@ -1,75 +1,131 @@
 <template name="spellDialog">
 	{{#with spell}}
-		{{#baseDialog title=name class=colorClass}}
-			<!--Name-->
-			<div horizontal layout>
-				<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
-			</div>
-			<!--List dropdown-->
-			<paper-dropdown-menu id="listDropdown" label="Spell List">
-				<paper-dropdown layered class="dropdown">
-					<core-menu class="menu"  selected={{parent.id}}>
-						{{#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 showEdit=true editing=editing}}
+			{{#if editing}}
+				{{> spellEdit}}
+			{{else}}
+				{{> spellDetails}}
+			{{/if}}
 		{{/baseDialog}}
 	{{/with}}
+</template>
+
+<template name="spellDetails">
+	<div class="caption">
+		Level {{level}} {{school}}, {{preparedString}}
+	</div>
+	<div class="vertMargin">
+		<div>
+			<span class="body2">Casting Time: </span><span>{{castingTime}}</span>
+		</div>
+		<div>
+			<span class="body2">Range: </span><span>{{range}}</span>
+		</div>
+		<div>
+			<span class="body2">Components: </span><span>{{getComponents}}</span>
+		</div>
+		<div>
+			<span class="body2">Duration: </span><span>{{duration}}</span>
+		</div>
+	</div>
+	<div class="prewrap">{{description}}</div>
+</template>
+
+<template name="spellEdit">
+	<div horizontal layout>
+		<paper-input id="spellNameInput" label="Name" floatinglabel value={{name}} flex></paper-input>
+	</div>
+	<div layout horizontal justified wrap>
+		<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>
+		<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>
+		<paper-dropdown-menu id="listDropdown" label="Spell List">
+			<paper-dropdown layered class="dropdown">
+				<core-menu class="menu"  selected={{parent.id}}>
+					{{#each spellLists}}
+					<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
+					{{/each}}
+				</core-menu>
+			</paper-dropdown>
+		</paper-dropdown-menu>
+		<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>
+	</div>
+
+	<hr class="vertMargin">
+
+	<div horizontal layout center justified wrap>
+		<div layout horizontal center>
+			<span>Verbal:</span>
+			<paper-checkbox id="verbalCheckbox" class="sideMargin" checked={{components.verbal}}></paper-checkbox>
+		</div>
+		<div layout horizontal center>
+			<span>Somatic:</span>
+			<paper-checkbox id="somaticCheckbox" class="sideMargin" checked={{components.somatic}}></paper-checkbox>
+		</div>
+		<div layout horizontal center>
+			<span>Concentration:</span>
+			<paper-checkbox id="concentrationCheckbox" class="sideMargin" checked={{components.concentration}}></paper-checkbox>
+		</div>
+		<div layout horizontal center>
+			<span>Ritual: </span>
+			<paper-checkbox id="ritualCheckbox" class="sideMargin" checked={{ritual}}></paper-checkbox>
+		</div>
+	</div>
+	<div layout horizontal center>
+		<div>Material: </div>
+		<paper-input id="materialInput" class="sideMargin" label="Material Components" floatinglabel value={{components.material}} flex></paper-input>
+	</div>
+
+	<hr class="vertMargin">
+
+	<div layout horizontal justified wrap>
+		<paper-input id="castingTimeInput"
+					 label="Casting Time"
+					 value={{castingTime}}
+					 floatinglabel
+					 flex></paper-input>
+		<paper-input id="rangeInput"
+					 class="sideMargin"
+					 label="Range"
+					 value={{range}}
+					 floatinglabel
+					 flex></paper-input>
+		<paper-input id="durationInput"
+					 label="Duration"
+					 value={{duration}}
+					 floatinglabel
+					 flex></paper-input>
+	</div>
+
+	<hr class="vertMargin">
+
+	<!--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>
 </template>

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

@@ -11,10 +11,61 @@ 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");
+		GlobalUI.closeDetail();
+	},
+});
+
+Template.spellDetails.helpers({
+	getComponents: function(){
+		var components = "";
+		if(this.components.concentration) components += "C";
+		if(this.components.verbal) components += components.length? ", V" : "V";
+		if(this.components.somatic) components += components.length? ", S" : "S";
+		if(this.components.material) {
+			components += components.length? ", M" : "M";
+			components += " (" + this.components.material + ")";
+		}
+		return components;
+	},
+	preparedString: function(){
+		if(this.prepared === "prepared") return "prepared";
+		if(this.prepared === "unprepared") return "unprepared";
+		if(this.prepared === "always") return "always prepared";
+	},
+});
+
+Template.spellEdit.onRendered(function(){
+	updatePolymerInputs(this);
+});
+
+Template.spellEdit.helpers({
 	spellLists: function(){
 		return SpellLists.find({charId: this.charId}, {fields: {name: 1}});
 	},
@@ -33,37 +84,29 @@ Template.spellDialog.helpers({
 	}
 });
 
-Template.spellDialog.events({
-	"color-change": function(event, instance){
-		Spells.update(instance.data.spellId, {$set: {color: event.color}});
-	},
-	"tap #deleteButton": function(event, instance){
-		Spells.softRemoveNode(instance.data.spellId);
-		GlobalUI.deletedToast(instance.data.spellId, "Spells", "Spell");
-		GlobalUI.closeDetail()
-	},
+Template.spellEdit.events({
 	"change #spellNameInput, input #spellNameInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {name: value}});
 	},
 	"change #castingTimeInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {castingTime: value}});
 	},
 	"change #rangeInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {range: value}});
 	},
 	"change #durationInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {duration: value}});
 	},
 	"change #materialInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {"components.material": value}});
 	},
 	"change #descriptionInput": function(event){
-		var value = event.currentTarget.value
+		var value = event.currentTarget.value;
 		Spells.update(this._id, {$set: {"description": value}});
 	},
 	"core-select #listDropdown": function(event){

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

@@ -1,24 +1,14 @@
-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();
-	})
+Template.baseDialog.onRendered(function(){
+	updatePolymerInputs(this);
 	//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()
+		GlobalUI.closeDetail();
 	}
 });

rpg-docs/lib/functions/updatePolymerInputs.js

@@ -0,0 +1,14 @@
+updatePolymerInputs = function(self){
+	_.defer(function(){
+		//update all autogrows after they've been filled
+		var pata = self.$("paper-autogrow-textarea");
+		pata.each(function(index, el){
+			el.update($(el).children().get(0));
+		});
+		//update all input fields as well
+		var input = self.$("paper-input");
+		input.each(function(index, el){
+			el.valueChanged();
+		});
+	});
+};