Changed item detail to a detail view with the option to edit

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

@@ -209,6 +209,16 @@ paper-slider {
 	padding-bottom: 16px;
 }
 
+.sideMargin {
+	margin-left: 16px;
+	margin-right: 16px;
+}
+
+.vertMargin {
+	margin-top: 16px;
+	margin-bottom: 16px;
+}
+
 .s {
 	padding: 0 0 16px 0;
 }
@@ -220,3 +230,7 @@ paper-slider {
 .preline {
 	white-space: pre-line;
 }
+
+.prewrap{
+	white-space: pre-wrap;
+}

rpg-docs/client/views/character/attacks/attacksViewList/attacksViewList.html

@@ -0,0 +1,3 @@
+<template name="attacksViewList">
+	Attacks view list goes here
+</template>

rpg-docs/client/views/character/effects/effectView/effectView.html

@@ -1,7 +1,7 @@
 <template name="effectView">
 	<div class="effectView" layout horizontal center>
 		{{#with statName}}
-			<div flex>{{statName}}</div>
+			<div flex>{{this}}</div>
 		{{else}}
 			<div flex>{{sourceName}}</div>
 		{{/with}}

rpg-docs/client/views/character/effects/effectView/effectView.js

@@ -71,10 +71,10 @@ var stats = {
 };
 
 var operations = {
-	base: {name: "Base Value"}, 
+	base: {name: "Base Value"},
 	proficiency: {name: "Proficiency"},
-	add: {name: "Add"},
-	mul: {name: "Multiply"},
+	add: {name: "+"},
+	mul: {name: "x"},
 	min: {name: "Min"},
 	max: {name: "Max"},
 	advantage: {name: "Advantage"},
@@ -100,16 +100,16 @@ Template.effectView.helpers({
 			case "Characters":
 				return Characters.findOne(this.charId, {fields: {race: 1}}).race;
 			default:
-				return "Inate"
+				return "Inate";
 		}
 	},
 	statName: function(){
-		return stats[this.stat] && stats[this.stat].name || "No Stat"
+		return stats[this.stat] && stats[this.stat].name || "No Stat";
 	},
 	operationName: function(){
 		if(this.operation === "proficiency") return null;
 		if(stats[this.stat].group === "Weakness/Resistance") return null;
-		return operations[this.operation] && operations[this.operation].name || "No Operation"
+		return operations[this.operation] && operations[this.operation].name || "No Operation";
 	},
 	statValue: function(){
 		if(this.operation === "advantage" ||

rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.html

@@ -1,6 +1,6 @@
 <!--needs to be given charId, (parentId or stat) and type-->
 <template name="effectsViewList">
-	{{#if effects}}
+	{{#if effects.count}}
 		<hr style="margin: 16px 0 16px 0;">
 		<div id="effects">
 			<h2>Effects</h2>

rpg-docs/client/views/character/effects/effectsViewList/effectsViewList.js

@@ -1,7 +1,7 @@
 Template.effectsViewList.helpers({
 	effects: function(){
 		if(this.parentId){
-			return Effects.find({"parent.id": this.parentId, type: this.type, charId: this.charId}, {fields: {parent: 0}});
+			return Effects.find({"parent.id": this.parentId, charId: this.charId}, {fields: {parent: 0}});
 		} else if(this.stat){
 			return Effects.find({charId: this.charId, stat: this.stat});
 		}

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

@@ -1,57 +1,98 @@
 <template name="itemDialog">
 	{{#with item}}
-		{{#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={{parent.id}}>
-						{{#each containers}}
-							<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
-						{{/each}}
-					</core-menu>
-				</paper-dropdown>
-			</paper-dropdown-menu>
-			<!--Equipped-->
-			<div center horizontal layout>
-				<div flex>Equipped</div>
-				<paper-toggle-button id="equippedInput"
-									 checked={{enabled}}
-									 role="button" 
-									 aria-pressed="false"
-									 tabindex="0" 
-									 touch-action="pan-y">
-				</paper-toggle-button>
-			</div>
-			<!--Equipped-->
-			<div center horizontal layout>
-				<div flex>Requires Attunement</div>
-				<paper-checkbox id="attunementCheckbox" checked={{requiresAttunement}}></paper-checkbox>
-			</div>
-			<!--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 parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
-			<!--Attacks-->
-			{{> attackEditList  parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
+		{{#baseDialog title=itemHeading class=colorClass showEdit=true editing=editing}}
+			{{#if editing}}
+				{{> itemEdit}}
+			{{else}}
+				{{> itemDetails}}
+			{{/if}}
 		{{/baseDialog}}
 	{{/with}}
-</template>
+</template>
+
+<template name="itemDetails">
+	<div layout horizontal wrap center justified class="headline">
+		{{#if weight}}<div class="sideMargin">{{totalWeight}}lbs</div>{{/if}}
+		{{#if value}}<div>{{valueString totalValue}}</div>{{/if}}
+	</div>
+	<div layout horizontal wrap class="caption">
+		{{#if enabled}}<div class="vertMargin" style="margin-right: 16px">Equipped</div>{{/if}}
+		{{#if requiresAttunement}}<div class="vertMargin">Requires Attunement</div>{{/if}}
+	</div>
+	{{#if description}}
+		<hr class="vertMargin">
+		<div class="prewrap">{{description}}</div>
+	{{/if}}
+	{{> effectsViewList charId=charId parentId=_id}}
+	{{> attacksViewList}}
+</template>
+
+<template name="itemEdit">
+	<paper-input class="fullwidth" id="itemNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+	<div layout horizontal wrap>
+		<paper-input-decorator label="Quantity" floatinglabel>
+			<input id="quantityInput" type="number" value={{quantity}}>
+		</paper-input-decorator>
+		{{# if ne1 quantity}}<paper-input flex id="itemPluralInput" label="Plural Name" floatinglabel value={{plural}}></paper-input>{{/if}}
+	</div>
+
+	<hr class="vertMargin">
+
+	<div layout horizontal wrap justified>
+		<div center horizontal layout>
+			<div class="padded">Container</div>
+			{{> containerDropdown}}
+		</div>
+		<div center horizontal layout>
+			<div class="padded">Equipped</div>
+			<paper-toggle-button id="equippedInput"
+								 checked={{enabled}}
+								 role="button"
+								 aria-pressed="false"
+								 tabindex="0"
+								 touch-action="pan-y">
+			</paper-toggle-button>
+		</div>
+		<div center horizontal layout>
+			<div class="padded">Requires Attunement</div>
+			<paper-checkbox id="attunementCheckbox" checked={{requiresAttunement}}></paper-checkbox>
+		</div>
+	</div>
+
+	<hr class="vertMargin">
+
+	<div layout horizontal around-justified>
+		<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>
+	</div>
+
+	<hr class="vertMargin">
+
+	<!--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 parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
+	<!--Attacks-->
+	{{> attackEditList  parentId=_id parentCollection="Items" charId=charId type="equipment" enabled=equipped name=name}}
+</template>
+
+<template name="containerDropdown">
+	<paper-dropdown-menu id="containerDropDown" label="Container">
+		<paper-dropdown layered class="dropdown">
+			<core-menu class="menu"  selected={{parent.id}}>
+				{{#each containers}}
+					<paper-item name={{_id}} class="containerMenuItem">{{name}}</paper-item>
+				{{/each}}
+			</core-menu>
+		</paper-dropdown>
+	</paper-dropdown-menu>
+</template>

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

@@ -1,20 +1,44 @@
 var getContainers = function(charId){
-	return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}}).fetch();
+	return Containers.find({charId: charId}, {sort: {name: 1, _id: 1}, fields: {name: 1}});
 };
 
+Template.itemDialog.onCreated(function(){
+	this.editing = new ReactiveVar(false);
+});
+
 Template.itemDialog.helpers({
 	item: function(){
 		return Items.findOne(this.itemId);
 	},
-	containers: function(){
-		return getContainers(this.charId);
+	editing: function(){
+		return Template.instance().editing.get();
 	},
+	itemHeading: function(){
+		if(this.quantity === 1){
+			return this.name;
+		} else{
+			var pName = this.plural || this.name;
+			return this.quantity + " " + pName;
+		}
+	}
+});
+
+Template.itemDialog.events({
+	"tap #editButton": function(event, instance){
+		instance.editing.set(true);
+	},
+	"tap #doneEditingButton": function(event, instance){
+		instance.editing.set(false);
+	},
+});
+
+Template.itemEdit.helpers({
 	ne1: function(num){
 		return num != 1;
 	}
 });
 
-Template.itemDialog.events({
+Template.itemEdit.events({
 	"color-change": function(event, instance){
 		Items.update(instance.data.itemId, {$set: {color: event.color}});
 	},
@@ -62,12 +86,21 @@ Template.itemDialog.events({
 	"change #attunementCheckbox": function(event){
 		var value = event.currentTarget.checked;
 		Items.update(this._id, {$set: {requiresAttunement: value}});
-	},
+	}
+});
+
+Template.containerDropdown.helpers({
+	containers: function(){
+		return getContainers(this.charId);
+	}
+});
+
+Template.containerDropdown.events({
 	"core-select #containerDropDown": function(event){
 		var detail = event.originalEvent.detail;
 		if(!detail.isSelected) return;
 		var containerId = detail.item.getAttribute("name");
-		var item = Items.findOne(Template.currentData().itemId);
+		var item = Items.findOne(Template.currentData()._id);
 		item.moveToContainer(containerId);
 	}
 });

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

@@ -3,17 +3,41 @@
 		<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 showEdit}}
+				{{#if editing}}
+					{{#unless hideDelete}}
+						<paper-icon-button id="deleteButton"
+										   role="button"
+										   tabindex="0"
+										   icon="delete"
+										   aria-label="Delete Feature"
+										   noink></paper-icon-button>
+					{{/unless}}
+					{{#unless hideColor}}
+						{{> colorDropdown}}
+					{{/unless}}
+					<paper-icon-button id="doneEditingButton"
+									   icon="done"
+									   aria-label="Delete Feature"
+									   noink></paper-icon-button>
+				{{else}}
+					<paper-icon-button id="editButton"
+									   icon="create"
+									   aria-label="Delete Feature"
+									   noink></paper-icon-button>
+				{{/if}}
+			{{else}}
+				{{#unless hideDelete}}
+					<paper-icon-button id="deleteButton"
+									   role="button"
+									   tabindex="0"
+									   icon="delete"
+									   aria-label="Delete Feature"
+									   noink></paper-icon-button>
+				{{/unless}}
+				{{#unless hideColor}}
+					{{> colorDropdown}}
+				{{/unless}}
 			{{/if}}
 		</core-toolbar>
 		<div class="detailContent">