Implemented detail view for items and containers

rpg-docs/client/globalHelpers/GlobalUI.js

@@ -30,7 +30,7 @@ this.GlobalUI = (function() {
 			};
 		})(this));
 	};
-	
+
 	//To show a detail, first animate the click, with raising z-depth
 	//then call this function with a template and data
 	//the element should have a hero-id of detail-main
@@ -40,14 +40,14 @@ this.GlobalUI = (function() {
 		GlobalUI.detailHero = opts.hero;
 		Session.set("global.ui.detailShow", true);
 	};
-	
+
 	//if setting the detail rather than showing it, 
 	//the template should contain the following in template.rendered
 	//
 	//if (!this.alreadyRendered){
-    //	Session.set("global.ui.detailShow", true);
-    //	this.alreadyRendered = true;
-  	//}
+	//	Session.set("global.ui.detailShow", true);
+	//	this.alreadyRendered = true;
+	//}
 	GlobalUI.setDetail = function(opts) {
 		Session.set("global.ui.detailData", opts.data);
 		Session.set("global.ui.detailTemplate", opts.template);

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

@@ -21,11 +21,36 @@
 	opacity: 0.0;
 }
 
+.detailContent {
+	padding: 24px;
+}
+
+#addEffectButton {
+	background: #d23f31;
+	color: #fff;
+	margin-top: 16px;
+}
 
 #globalDetail {
 	background-color: white;
 	width: 624px;
 	height: 500px;
+	border-radius: 2px;
+}
+
+#globalDetail core-toolbar {
+	border-radius: 2px 2px 0 0;
+}
+
+@media (max-width: 640px) {
+	#globalDetail {
+		top: 0 !important;
+		left: 0 !important;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		border-radius: 0;
+	}
 }
 
 .fake-selected [hero] {

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

@@ -321,10 +321,7 @@ Template.effectEdit.events({
 		}
 	},
 	"change #effectValueInput": function(event){
-		var inst = Template.instance();
-		var input = inst.find("#effectValueInput");
-		if(!input) return;
-		var value = input.value;
-		inst.value.set(value);
+		var value = event.currentTarget.value;
+		Template.instance().value.set(value);
 	}
 });

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

@@ -1,7 +1,7 @@
 <template name="featureDialog">
 	{{#with feature}}
 		<core-header-panel fit>
-			<core-toolbar>
+			<core-toolbar 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" 
@@ -11,7 +11,7 @@
 								   aria-label="Delete Feature" 
 								   noink></paper-icon-button>
 			</core-toolbar>
-			<div class="featureContent">
+			<div class="detailContent">
 				<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
 				<hr style="margin: 16px 0 16px 0;">
 				<paper-input-decorator label="Description" floatinglabel layout vertical>
@@ -19,15 +19,17 @@
 						<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
 					</paper-autogrow-textarea>
 				</paper-input-decorator>
-				<hr style="margin: 16px 0 16px 0;">
-				<div id="effects">
-					<h2>Effects</h2>
-					{{#each effects}}
-						{{>effectEdit}}
-					{{/each}}
-					<div layout horizontal end-justified>
-						<paper-button id="addEffectButton"  raised>Add Effect</paper-button>
+				{{#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>

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

@@ -1,9 +1,5 @@
 Template.featureDialog.rendered = function(){
 	var self = this;
-	this.autorun(function(){
-		var feature = Features.findOne(Template.currentData().featureId, {fields: {name: 1}});
-		if(feature && feature.name) Session.set("global.ui.dialogHeader", feature.name);
-	})
 	//update all autogrows after they've been filled
 	var pata = this.$("paper-autogrow-textarea");
 	pata.each(function(index, el){
@@ -52,7 +48,7 @@ Template.featureDialog.helpers({
 		return Features.findOne(this.featureId);
 	},
 	effects: function(){
-		var cursor = Effects.find({charId: Template.currentData().charId, type: "feature", sourceId: this._id})
+		var cursor = Effects.find({sourceId: this._id, type: "feature"})
 		return cursor;
 	}
 });

rpg-docs/client/views/character/features/featureDialog/featuresDialog.css

@@ -1,13 +0,0 @@
-body /deep/ .featureDialogWidth {
-	width: 560px;
-}
-
-.featureContent {
-	padding: 24px;
-}
-
-#addEffectButton {
-	background: #d23f31;
-	color: #fff;
-	margin-top: 16px;
-}

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

@@ -9,7 +9,8 @@
 			</div>
 			<div class="features">
 				{{#each features}}
-				<paper-shadow class="featureCard" hero-id="main">
+				<paper-shadow class="featureCard" hero-id="main" animated>
+					<div hero-id="toolbar"></div>
 					<div class="featureCardTop">
 						<h2>{{name}}</h2>
 					</div>

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

@@ -16,10 +16,11 @@ Template.features.events({
 	},
 	"tap .featureCard": function(event){
 		var featureId = this._id;
+		var charId = Template.parentData()._id;
 		GlobalUI.setDetail({
 			template: "featureDialog",
-			data:     {featureId: featureId, charId: Template.parentData()._id},
+			data:     {featureId: featureId, charId: charId},
 			hero:     $(event.currentTarget)
-		})
+		});
 	}
 });

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

@@ -1,31 +1,34 @@
 <template name="containerDialog">
 	{{#with container}}
-		<!--Delete button-->
-		<paper-menu-button>
-			<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Container" noink></paper-icon-button>
-			<paper-dropdown class="dropdown">
-				<paper-button id="deleteContainer">Delete Container</paper-button>
-				<paper-button>Cancel</paper-button>
-			</paper-dropdown>
-		</paper-menu-button>
-		
-		<div class="containerDialogWidth"></div>
-		<!--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>
+		<core-header-panel fit>
+			<core-toolbar 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="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>
+				<!--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>
 	{{/with}}
-	<paper-button affirmative>Done</paper-button>
 </template>

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

@@ -1,17 +1,29 @@
 Template.containerDialog.rendered = function(){
 	var self = this;
-	this.autorun(function(){
-		var container = Containers.findOne(Template.currentData().containerId, {fields: {name: 1}});
-		if(container) Session.set("global.ui.dialogHeader", container.name);
+	//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
-	_.defer(function(){GlobalUI.dialog.open()});
+	if (!this.alreadyRendered){
+		Session.set("global.ui.detailShow", true);
+		this.alreadyRendered = true;
+	}
 }
 
 Template.containerDialog.events({
+	"tap #backButton": function(){
+		GlobalUI.closeDetail();
+	},
 	"tap #deleteContainer": function(){
 		Containers.remove(this._id);
-		GlobalUI.closeDialog()
+		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

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

@@ -5,24 +5,24 @@
 				Armor:<br>
 				{{#if armor}}
 					{{#with armor}}
-						<paper-item class="inventoryItem">{{name}}</paper-item>
+						<paper-item class="inventoryItem"  hero-id="main">{{name}}</paper-item>
 					{{/with}}
 				{{else}}
 					<paper-item>none</paper-item>
 				{{/if}}
 				Equipment:<br>
 				{{#each equipment}}
-					<paper-item class="inventoryItem">
+					<paper-item class="inventoryItem"  hero-id="main">
 						{{name}}
 					</paper-item>
 				{{/each}}
 			</paper-shadow>
 			<div class="containers">
 				{{#each containers}}
-					<paper-shadow class="card">
+					<paper-shadow class="card"  hero-id="main">
 						<h2 class="containerName">{{name}}</h2>
 						{{#each items ../_id _id}}
-							<paper-item class="inventoryItem">
+							<paper-item class="inventoryItem" hero-id="main">
 								{{#if gt1 quantity}}{{quantity}}{{/if}}&nbsp;{{pluralName}}
 							</paper-item>
 						{{/each}}

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

@@ -36,29 +36,35 @@ Template.inventory.events({
 		}
 		_.defer(function(){
 			var itemId = Items.insert({charId: charId, container: containerId});
-			GlobalUI.showDialog({
-				template:     "itemDialog",
-				data:         {itemId: itemId, charId: charId},
-				fullOnMobile: true
+			GlobalUI.setDetail({
+				template: "itemDialog",
+				data:     {itemId: itemId, charId: charId},
+				hero:     $(event.currentTarget)
 			});
 		});
 	},
 	"tap #addContainer": function(event){
 		var containerId = Containers.insert({name: "New Container", isCarried: true, charId: this._id});
-		//TODO show container dialog
+		GlobalUI.setDetail({
+			template: "containerDialog",
+			data:     {containerId: this._id, charId: this.charId},
+			hero:     $(event.currentTarget)
+		});
 	},
 	"tap .inventoryItem": function(event){
-		GlobalUI.setDialog({
-			template:     "itemDialog",
-			data:         {itemId: this._id, charId: this.charId},
-			fullOnMobile: true
+		var itemId = this._id;
+		var charId = Template.parentData()._id;
+		GlobalUI.setDetail({
+			template: "itemDialog",
+			data:     {itemId: itemId, charId: charId},
+			hero:     $(event.currentTarget)
 		});
 	},
 	"tap .containerName": function(event){
-		GlobalUI.setDialog({
-			template:     "containerDialog",
-			data:         {containerId: this._id, charId: this.charId},
-			fullOnMobile: true
+		GlobalUI.setDetail({
+			template: "containerDialog",
+			data:     {containerId: this._id, charId: this.charId},
+			hero:     $(event.currentTarget).parent()
 		});
 	}
-})
+});

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

@@ -1,77 +1,84 @@
 <template name="itemDialog">
 	{{#with item}}
-		<!--Delete button-->
-		<paper-menu-button>
-			<paper-icon-button role="button" tabindex="0" icon="delete" aria-label="Delete Item" noink></paper-icon-button>
-			<paper-dropdown class="dropdown">
-				<paper-button id="deleteItem">Delete Item</paper-button>
-				<paper-button>Cancel</paper-button>
-			</paper-dropdown>
-		</paper-menu-button>
-		
-		<div class="itemDialogWidth"></div>
-		<!--Name and plural name-->
-		<paper-input id="itemNameInput" label="Name" floatinglabel value={{name}}></paper-input>
-		{{# if 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>
+		<core-header-panel fit>
+			<core-toolbar 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="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" label="Name" floatinglabel value={{name}}></paper-input>
+				{{# if 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" 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="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
+					</paper-autogrow-textarea>
+				</paper-input-decorator>
+				<!--Container dropdown-->
+				<paper-dropdown-menu label="Container">
+					<paper-dropdown class="dropdown">
+						<core-menu id="containerDropDown" class="menu"  selected={{containerIndex}}>
+							{{#each containers}}
+								<paper-item class="containerMenuItem">{{name}}</paper-item>
+							{{/each}}
+						</core-menu>
+					</paper-dropdown>
+				</paper-dropdown-menu>
+				<!--Equipment slot dropdown-->
+				<paper-dropdown-menu label="slot">
+					<paper-dropdown class="dropdown">
+						<core-menu id="slotDropDown" class="menu"  selected={{equipmentSlotIndex}}>
+							{{#each equipmentSlots}}
+								<paper-item class="slotMenuItem">{{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}}
+						{{/each}}
+					</div>
+				{{/if}}
+				<paper-button id="addEffectButton"  raised>Add Effect</paper-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" 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="itemDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-			</paper-autogrow-textarea>
-		</paper-input-decorator>
-		<!--Container dropdown-->
-		<paper-dropdown-menu label="Container">
-			<paper-dropdown class="dropdown">
-				<core-menu id="containerDropDown" class="menu"  selected={{containerIndex}}>
-					{{#each containers}}
-						<paper-item class="containerMenuItem">{{name}}</paper-item>
-					{{/each}}
-				</core-menu>
-			</paper-dropdown>
-		</paper-dropdown-menu>
-		<!--Equipment slot dropdown-->
-		<paper-dropdown-menu label="slot">
-			<paper-dropdown class="dropdown">
-				<core-menu id="slotDropDown" class="menu"  selected={{equipmentSlotIndex}}>
-					{{#each equipmentSlots}}
-						<paper-item class="slotMenuItem">{{name}}</paper-item>
-					{{/each}}
-				</core-menu>
-			</paper-dropdown>
-		</paper-dropdown-menu>
-		
-		<!--Effects-->
-		<h3>Effects</h3>
-		{{#each effects}}
-			{{>effectEdit}}
-		{{/each}}
-		<br>
-		<paper-icon-button id="addEffectButton" role="button" tabindex="0" icon="add" aria-label="addEffect"></paper-icon-button>
+		</core-header-panel>
 	{{/with}}
-	<paper-button affirmative>Done</paper-button>
 </template>

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

@@ -1,17 +1,29 @@
 Template.itemDialog.rendered = function(){
 	var self = this;
-	this.autorun(function(){
-		var item = Items.findOne(Template.currentData().itemId, {fields: {name: 1}});
-		if(item) Session.set("global.ui.dialogHeader", item.pluralName());
+	//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
-	_.defer(function(){GlobalUI.dialog.open()});
+	if (!this.alreadyRendered){
+		Session.set("global.ui.detailShow", true);
+		this.alreadyRendered = true;
+	}
 }
 
 Template.itemDialog.events({
+	"tap #backButton": function(){
+		GlobalUI.closeDetail();
+	},
 	"tap #deleteItem": function(){
 		Items.remove(this._id);
-		GlobalUI.closeDialog()
+		GlobalUI.closeDetail();
 	},
 	"tap #addEffectButton": function(){
 		Effects.insert({