Updated persona tab to Polymer 1

rpg-docs/client/globalHelpers/evaluate.js

@@ -23,3 +23,11 @@ Template.registerHelper("evaluateSignedSpaced", function(charId, string) {
 Template.registerHelper("evaluateString", function(charId, string) {
 	return evaluateString(charId, string);
 });
+
+Template.registerHelper("evaluateShortString", function(charId, string) {
+	if (_.isString(string)){
+		return evaluateString(
+			charId, string.split(/^( *[-*_]){3,} *(?:\n+|$)/m)[0]
+		);
+	}
+});

rpg-docs/client/style/cards.css

@@ -45,7 +45,7 @@
 	padding: 16px 0;
 }
 
-.card .bottom.list .subhead {
+.card .bottom.list .paper-font-subhead {
 	color: rgba(0,0,0,0.54);
 	font-size: 14px;
 	font-weight: 500;
@@ -79,3 +79,7 @@
 .card .left paper-icon-button[disabled] {
 	color: rgba(255, 255, 255, 0.2);
 }
+
+.card img, .card iron-image {
+	max-width: 100%;
+}

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

@@ -102,7 +102,7 @@
 						</div>
 						{{#if description}}
 							<div class="bottom flex">
-								{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
+								{{#markdown}}{{evaluateShortString charId description}}{{/markdown}}
 							</div>
 						{{/if}}
 						{{#if hasUses}}

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

@@ -3,11 +3,6 @@ Template.features.helpers({
 		var features = Features.find({charId: this._id}, {sort: {color: 1, name: 1}});
 		return features;
 	},
-	shortDescription: function() {
-		if (_.isString(this.description)){
-			return this.description.split(/^( *[-*_]){3,} *(?:\n+|$)/m)[0];
-		}
-	},
 	hasUses: function(){
 		return this.usesValue() > 0;
 	},

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

@@ -2,10 +2,9 @@
 	{{#baseDialog title=name class="deep-purple white-text" hideColor="true" hideDelete="true" startEditing=startEditing}}
 		{{#with char}}
 			<div>{{alignment}} {{gender}} {{race}}</div>
-			<core-image style="width: 350px; height: 350px; margin-top: 8px;"
+			<iron-image style="width: 350px; height: 350px; margin-top: 8px;"
-				sizing="cover"
+				sizing="contain"
-				hero-id="image" hero
+				src={{picture}}></iron-image>
-				src={{picture}}></core-image>
 		{{/with}}
 	{{else}}
 		{{#with char}}
@@ -15,22 +14,21 @@
 </template>
 
 <template name="personaDetailsEdit">
-	<div layout horizontal center-justified>
+	<div class="layout horizontal center-justified">
-		<div flex style="max-width: 350px;" layout vertical>
+		<div class="flex layout vertical" style="max-width: 400px;">
 			<!--Name-->
-			<paper-input id="nameInput" label="Name" floatinglabel value={{name}}></paper-input>
+			<paper-input id="nameInput" label="Name" value={{name}}></paper-input>
 			<!--Alignment-->
-			<paper-input id="alignmentInput" label="Alignment" floatinglabel value={{alignment}}></paper-input>
+			<paper-input id="alignmentInput" label="Alignment" value={{alignment}}></paper-input>
 			<!--Gender-->
-			<paper-input id="genderInput" label="Gender" floatinglabel value={{gender}}></paper-input>
+			<paper-input id="genderInput" label="Gender" value={{gender}}></paper-input>
 			<!--Race-->
-			<paper-input id="raceInput" label="Race" floatinglabel value={{race}}></paper-input>
+			<paper-input id="raceInput" label="Race" value={{race}}></paper-input>
 			<!--Picture-->
-			<paper-input id="pictureInput" label="Picture URL" floatinglabel value={{picture}}></paper-input>
+			<paper-input id="pictureInput" label="Picture URL" value={{picture}}></paper-input>
-			<core-image style="height:350px; width: 100%; margin-top: 8px;"
+			<iron-image style="margin-top: 8px; width: 100%; height: 400px;"
-						sizing="cover"
+						sizing="contain"
-						hero-id="image" hero
+						src={{picture}}></iron-image>
-						src={{picture}}></core-image>
 		</div>
 	</div>
 </template>

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

@@ -1,7 +1,3 @@
-Template.personaDetailsEdit.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
 Template.personaDetailsDialog.helpers({
 	char: function() {
 		return Characters.findOne(
@@ -11,25 +7,20 @@ Template.personaDetailsDialog.helpers({
 	}
 });
 
+inputHandler = (field) => _.debounce(function(event){
+	var input = event.currentTarget.value;
+	Characters.update(this._id, {
+		$set: {[field]: input}
+	}, {
+		removeEmptyStrings: false,
+		trimStrings: false,
+	});
+}, 300);
+
 Template.personaDetailsEdit.events({
-	"change #nameInput": function(event){
+	"input #nameInput, change #nameInput": inputHandler("name"),
-		var input = event.currentTarget.value;
+	"input #alignmentInput, change #alignmentInput": inputHandler("alignment"),
-		Characters.update(this._id, {$set: {name: input}});
+	"input #genderInput, change #genderInput": inputHandler("gender"),
-	},
+	"input #raceInput, change #raceInput": inputHandler("race"),
-	"change #alignmentInput": function(event){
+	"input #pictureInput, change #pictureInput": inputHandler("picture"),
-		var input = event.currentTarget.value;
-		Characters.update(this._id, {$set: {alignment: input}});
-	},
-	"change #genderInput": function(event){
-		var input = event.currentTarget.value;
-		Characters.update(this._id, {$set: {gender: input}});
-	},
-	"change #raceInput": function(event){
-		var input = event.currentTarget.value;
-		Characters.update(this._id, {$set: {race: input}});
-	},
-	"change #pictureInput": function(event){
-		var input = event.currentTarget.value;
-		Characters.update(this._id, {$set: {picture: input}});
-	},
 });

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

@@ -1,74 +1,63 @@
 <template name="persona">
-	<div fit>
+	<div class="column-container animation-slider">
-		<div id="persona" class="scroll-y" fit>
+		{{#with characterDetails}}
-			<div class="column-container">
+			<div>
-				{{#with characterDetails}}
+				<paper-material class="card">
-				<div>
+					{{#unless picture}}
-					<paper-material class="card"
+						<div class="top paper-font-subhead characterField {{colorClass}}">
-								  hero-id="main" {{detailHero "details" _id}}>
+							<div class="paper-font-subhead flex">
-						{{#unless picture}}
+								{{name}}
-							<div class="top subhead characterField {{colorClass}}"
-								 hero-id="toolbar" {{detailHero "details" _id}}>
-								<div class="subhead" flex
-									 hero-id="title" {{detailHero "details" _id}}>
-									{{name}}
-								</div>
-							</div>
-						{{else}}
-							<core-image class="characterField clickable"
-										style="height:350px; width: 100%;
-											   background-color: #e8e8e8;"
-										sizing="cover"
-										hero-id="image" {{detailHero "details" _id}}
-										src={{picture}}></core-image>
-						{{/unless}}
-						<div class="bottom">
-							{{#if picture}}
-								<div class="title" hero-id="title" {{detailHero "details" _id}}>
-									{{name}}
-								</div>
-							{{/if}}
-							<div class="subhead">
-								{{alignment}} {{gender}} {{race}}
 							</div>
 						</div>
-					</paper-material>
+					{{else}}
-				</div>
+						<iron-image class="characterField clickable"
-				{{/with}}
+									style="height:350px; width: 100%;
-				<div>{{> containerCard characterField "description" "Description"}}</div>
+										   background-color: #424242;"
-				<div>{{> containerCard characterField "personality" "Personality Traits"}}</div>
+									sizing="contain"
-				<div>{{> containerCard characterField "ideals" "Ideals"}}</div>
+									src={{picture}}></iron-image>
-				<div>{{> containerCard characterField "bonds" "Bonds"}}</div>
+					{{/unless}}
-				<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
+					<div class="bottom">
-				<div>{{> containerCard characterField "backstory" "Background"}}</div>
+						{{#if picture}}
-				<div>
+							<div class="paper-font-title">
-				<paper-material class="card">
+								{{name}}
-                    <div class="white top subhead">
+							</div>
-                      Languages
+						{{/if}}
-					</div>
+						<div class="paper-font-subhead">
-					<div class="bottom list">
+							{{alignment}} {{gender}} {{race}}
-						{{#each languages}}
+						</div>
-							{{> proficiencyListItem}}
-						{{/each}}
 					</div>
 				</paper-material>
-				</div>
 			</div>
+		{{/with}}
+		<div>{{> containerCard characterField "description" "Description"}}</div>
+		<div>{{> containerCard characterField "personality" "Personality Traits"}}</div>
+		<div>{{> containerCard characterField "ideals" "Ideals"}}</div>
+		<div>{{> containerCard characterField "bonds" "Bonds"}}</div>
+		<div>{{> containerCard characterField "flaws" "Flaws"}}</div>
+		<div>{{> containerCard characterField "backstory" "Background"}}</div>
+		<div>
+		<paper-material class="card">
+            <div class="white top paper-font-subhead">
+              Languages
+			</div>
+			<div class="bottom list">
+				{{#each languages}}
+					{{> proficiencyListItem}}
+				{{/each}}
+			</div>
+		</paper-material>
 		</div>
 	</div>
 </template>
 
 <template name="containerCard">
-	{{#containerCardHelper this}}{{evaluateString _id body}}{{/containerCardHelper}}
+	{{#containerCardHelper this}}{{evaluateShortString _id body}}{{/containerCardHelper}}
 </template>
 
 <template name="containerCardHelper">
-	<paper-material class="card {{class}}"
+	<paper-material class="card {{class}}">
-                  hero-id="main" {{detailHero field ../_id}}>
+        <div class="top paper-font-subhead {{colorClass}} {{topClass}}">
-        <div class="top subhead {{colorClass}} {{topClass}}"
+			<div class="paper-font-subhead flex">
-             hero-id="toolbar" {{detailHero field ../_id}}>
-			<div class="subhead" flex
-                 hero-id="title" {{detailHero field ../_id}}>
               {{title}}
           </div>
 		</div>

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

@@ -16,7 +16,6 @@ Template.persona.helpers({
 		char.field = "details";
 		char.title = char.name;
 		char.color = "d";
-		char.startEditing = true;
 		return char;
 	},
 	characterField: function(field, title){
@@ -39,28 +38,27 @@ Template.persona.helpers({
 });
 
 Template.persona.events({
-	"tap .characterField": function(event){
+	"click .characterField": function(event){
 		if (this.field == "details"){
 			this.charId = Template.parentData()._id;
-			GlobalUI.setDetail({
+			pushDialogStack({
 				template: "personaDetailsDialog",
 				data:     this,
-				heroId:   this._id + this.field,
+				element: event.currentTarget.parentElement,
 			});
 		} else {
 			var template = "textDialog";
 			if (this.field === "backstory") template = "backgroundDialog";
 			var charId = Template.parentData()._id;
-			GlobalUI.setDetail({
+			pushDialogStack({
 				template: template,
 				data: {
 					charId: charId,
 					field: this.field,
 					title: this.title,
 					color: this.color,
-					startEditing: true,
 				},
-				heroId:   this._id + this.field,
+				element: event.currentTarget.parentElement,
 			});
 		}
 	}

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

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

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

@@ -7,10 +7,6 @@ Template.textDialog.helpers({
 	}
 });
 
-Template.textDialogEdit.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
 Template.textDialogEdit.helpers({
 	value: function(){
 		var fieldSelector = {fields: {}};
@@ -21,10 +17,13 @@ Template.textDialogEdit.helpers({
 });
 
 Template.textDialogEdit.events({
-	"change #textInput": function(event){
+	"input #textInput": _.debounce(function(event){
 		var input = event.currentTarget.value;
-		var setter = {$set: {}};
+		Characters.update(this.charId, {
-		setter.$set[this.field] = input;
+			$set: {[this.field]: input}
-		Characters.update(this.charId, setter);
+		}, {
-	}
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}, 300),
 });

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

@@ -1,9 +1,7 @@
 <template name="proficiencyListItem">
 	<div class="item-slot">
-		<div class="proficiency item small layout horizontal center"
+		<div class="proficiency item small layout horizontal center">
-			 hero-id="main" {{detailHero}}>
+			<iron-icon icon="{{profIcon}}" style="margin-right: 16px;"></iron-icon>
-			<iron-icon icon="{{profIcon}}"
-					   style="margin-right: 16px;"></iron-icon>
 			<div class="flex">{{getName}}</div>
 		</div>
 	</div>

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

@@ -14,7 +14,11 @@ Template.proficiencyListItem.helpers({
 });
 
 Template.proficiencyListItem.events({
-	"tap .proficiency": function(event, instance){
+	"click .proficiency": function(event, instance){
-		openParentDialog(this.parent, this.charId, this._id);
+		openParentDialog({
+			parent: this.parent,
+			charId: this.charId,
+			element: event.currentTarget,
+		});
 	}
 });

rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css

@@ -85,3 +85,7 @@
 .dialog-stack .dialog .buttons {
 	padding: 8px 8px 8px 24px;
 }
+
+.dialog-stack .dialog img, .dialog-stack .dialog iron-image {
+	max-width: 100%;
+}