From b44fe33b30f1ca7306adf8e71f8b03db8608c830 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 20 Jan 2017 09:05:16 +0200
Subject: [PATCH] Finished upgrading stat tab to Polymer 1

---
 .../attributeDialog/attributeDialog.html      | 98 ++++++++++---------
 .../strengthDialog/strengthDialog.html        |  8 +-
 .../carryCapacityTable.html                   |  8 +-
 .../stats/skillDialog/skillDialog.html        | 93 +++++++++---------
 .../character/stats/statCard/statCard.html    |  2 +-
 .../client/views/character/stats/stats.js     | 12 +--
 .../views/characterList/characterList.css     |  9 +-
 .../views/characterList/characterList.html    | 24 +++--
 .../paperTemplates/baseDialog/baseDialog.html | 78 +++++++--------
 .../paperTemplates/baseDialog/baseDialog.js   | 10 +-
 10 files changed, 169 insertions(+), 173 deletions(-)

diff --git a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
index f2b06de5..ec9f313f 100644
--- a/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
+++ b/rpg-docs/client/views/character/stats/attributeDialog/attributeDialog.html
@@ -6,12 +6,12 @@
 </template>
 
 <template name="attributeDialogView">
-	<div layout horizontal center-justified end>
-		<div class="display2">
+	<div class="layout horizontal center-justified end">
+		<div class="paper-font-display2">
 			{{attributeValue}}
 		</div>
 		{{#if adjustment}}
-			<div class="display1">
+			<div class="paper-font-display1">
 				/{{attributeBase}}
 			</div>
 		{{/if}}
@@ -19,50 +19,52 @@
 
 	<hr class="vertMargin">
 
-	<table class="summaryTable">
-		{{#each baseEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>Base: {{statValue}}</td>
+	<div class="layout vertical center">
+		<table class="summaryTable">
+			{{#each baseEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>Base: {{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each addEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>{{signedString statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each mulEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>&times; {{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each minEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>Min: {{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each maxEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>Max: {{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#if adjustment}}
+				<tr class="paper-font-body2">
+					<td>Base Value</td>
+					<td>{{attributeBase}}</td>
+				</tr>
+				<tr>
+					<td>Adjustment</td>
+					<td>{{signedString adjustment}}</td>
+				</tr>
+			{{/if}}
+			<tr class="paper-font-body2">
+				<td>Total</td>
+				<td>{{attributeValue}}</td>
 			</tr>
-		{{/each}}
-		{{#each addEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>{{signedString statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#each mulEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>&times; {{statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#each minEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>Min: {{statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#each maxEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>Max: {{statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#if adjustment}}
-			<tr class="body2">
-				<td>Base Value</td>
-				<td>{{attributeBase}}</td>
-			</tr>
-			<tr>
-				<td>Adjustment</td>
-				<td>{{signedString adjustment}}</td>
-			</tr>
-		{{/if}}
-		<tr class="body2">
-			<td>Total</td>
-			<td>{{attributeValue}}</td>
-		</tr>
-	</table>
+		</table>
+	</div>
 </template>
diff --git a/rpg-docs/client/views/character/stats/attributeDialog/strengthDialog/strengthDialog.html b/rpg-docs/client/views/character/stats/attributeDialog/strengthDialog/strengthDialog.html
index 5e22564f..88a05987 100644
--- a/rpg-docs/client/views/character/stats/attributeDialog/strengthDialog/strengthDialog.html
+++ b/rpg-docs/client/views/character/stats/attributeDialog/strengthDialog/strengthDialog.html
@@ -3,9 +3,9 @@
 		{{> attributeDialogView}}
 		<hr class="vertMargin">
 		<div>
-			<div class="title padded">Carrying</div>
+			<div class="paper-font-title padded">Carrying</div>
 			{{> carryCapacityTable}}
-			<div class="title padded">Jumping</div>
+			<div class="paper-font-title padded">Jumping</div>
 			<table class="strengthTable">
 				<tr>
 					<td>Running long jump</td>
@@ -18,7 +18,7 @@
 				<tr>
 					<td>Running high jump</td>
 					<td>{{evaluate charId "3 + strengthMod"}} feet</td>
-					<td class="caption">
+					<td>
 						Can reach a ledge as high as
 						{{evaluate charId "3 + strengthMod"}} feet
 						+ 1.5&times; your height
@@ -27,7 +27,7 @@
 				<tr>
 					<td>Standing high jump</td>
 					<td>{{evaluate charId "floor((3 + strengthMod)/2)"}} feet</td>
-					<td class="caption">
+					<td>
 						Can reach a ledge as high as
 						{{evaluate charId "floor((3 + strengthMod)/2)"}} feet
 						+ 1.5&times; your height
diff --git a/rpg-docs/client/views/character/stats/carryCapacityTable/carryCapacityTable.html b/rpg-docs/client/views/character/stats/carryCapacityTable/carryCapacityTable.html
index e6f67f02..b47e29a7 100644
--- a/rpg-docs/client/views/character/stats/carryCapacityTable/carryCapacityTable.html
+++ b/rpg-docs/client/views/character/stats/carryCapacityTable/carryCapacityTable.html
@@ -3,26 +3,26 @@
 		<tr>
 			<td>Encumbered</td>
 			<td>&gt;{{evaluate charId "strength * 5 * carryMultiplier"}}lbs</td>
-			<td class="caption">Variant rule, encumbered characters move 10 feet slower</td>
+			<td>Variant rule, encumbered characters move 10 feet slower</td>
 		</tr>
 		<tr>
 			<td>Heavily encumbered</td>
 			<td>&gt;{{evaluate charId "strength * 10 * carryMultiplier"}}lbs</td>
-			<td class="caption">
+			<td>
 				Variant rule, heavily encumbered characters move 20 feet slower and have disadvantage on ability checks, attack rolls, and saving thows that use Strength, Dexterity, or Constitution
 			</td>
 		</tr>
 		<tr>
 			<td>Over Encumbered</td>
 			<td>&gt;{{evaluate charId "strength * 15 * carryMultiplier"}}lbs</td>
-			<td class="caption">
+			<td>
 				Characters that can only just lift, push or drag their current load can only move at 5 feet.
 			</td>
 		</tr>
 		<tr>
 			<td>Push, drag or lift maximum</td>
 			<td>{{evaluate charId "strength * 30 * carryMultiplier"}}lbs</td>
-			<td class="caption"></td>
+			<td></td>
 		</tr>
 	</table>
 </template>
diff --git a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
index d2ad5908..8edf4caa 100644
--- a/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
+++ b/rpg-docs/client/views/character/stats/skillDialog/skillDialog.html
@@ -6,11 +6,11 @@
 </template>
 
 <template name="skillDialogView">
-	<div layout vertical center>
-		<div class="display2">
+	<div class="layout vertical center">
+		<div class="paper-font-display2">
 			{{characterCalculate "skillMod" charId skillName}}
 		</div>
-		<div class="subhead">
+		<div class="paper-font-subhead">
 			<iron-icon icon="{{profIcon}}" class="black54"></iron-icon>
 			{{#if profSource}}
 				{{proficiencyValue}} - {{#with profSource}}{{sourceName}}{{/with}}
@@ -21,55 +21,56 @@
 	</div>
 
 	<hr class="vertMargin">
-
-	<table class="summaryTable">
-		<tr>
-			<td>{{abilityName}}</td>
-			<td>{{characterCalculate "abilityMod" charId ability}}</td>
-		</tr>
-		{{#if characterCalculate "proficiency" charId skillName}}
+	<div class="layout vertical center">
+		<table class="summaryTable">
 			<tr>
-				<td>{{proficiencyValue}}</td>
-				<td>{{signedString profBonus}}</td>
+				<td>{{abilityName}}</td>
+				<td>{{characterCalculate "abilityMod" charId ability}}</td>
 			</tr>
-		{{/if}}
-		{{#each addEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>{{signedString statValue}}</td>
+			{{#if characterCalculate "proficiency" charId skillName}}
+				<tr>
+					<td>{{proficiencyValue}}</td>
+					<td>{{signedString profBonus}}</td>
+				</tr>
+			{{/if}}
+			{{#each addEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>{{signedString statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each mulEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>&times;{{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each minEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>Min: {{statValue}}</td>
+				</tr>
+			{{/each}}
+			{{#each maxEffects}}
+				<tr>
+					<td>{{sourceName}}</td>
+					<td>Max: {{statValue}}</td>
+				</tr>
+			{{/each}}
+			<tr class="paper-font-body2">
+				<td>Total</td>
+				<td>{{characterCalculate "skillMod" charId skillName}}</td>
 			</tr>
-		{{/each}}
-		{{#each mulEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>&times;{{statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#each minEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>Min: {{statValue}}</td>
-			</tr>
-		{{/each}}
-		{{#each maxEffects}}
-			<tr>
-				<td>{{sourceName}}</td>
-				<td>Max: {{statValue}}</td>
-			</tr>
-		{{/each}}
-		<tr class="body2">
-			<td>Total</td>
-			<td>{{characterCalculate "skillMod" charId skillName}}</td>
-		</tr>
-	</table>
+		</table>
+	</div>
 
 	{{#if or advEffects.count dadvEffects.count conditionalEffects.count}}
 		<hr class="vertMargin">
 	{{/if}}
 
-	<div class="spaceAfter" horizontal center layout>
+	<div class="spaceAfter horizontal center layout">
 		{{#if advEffects.count}}
-			<div class="body2" style="width: 100px;">
+			<div class="paper-font-body2" style="width: 100px;">
 				Advantage
 			</div>
 			<div flex>
@@ -79,9 +80,9 @@
 			</div>
 		{{/if}}
 	</div>
-	<div class="spaceAfter" horizontal center layout>
+	<div class="spaceAfter horizontal center layout">
 		{{#if dadvEffects.count}}
-			<div class="body2" style="width: 100px;">
+			<div class="paper-font-body2" style="width: 100px;">
 				Disadvantage
 			</div>
 			<div flex>
@@ -94,7 +95,7 @@
 	<!--Conditional Benefits-->
 	{{#each conditionalEffects}}
 		<div class="spaceAfter">
-			<div class="body2">{{sourceName}}</div>
+			<div class="paper-font-body2">{{sourceName}}</div>
 			<div>*{{statValue}}</div>
 		</div>
 	{{/each}}
diff --git a/rpg-docs/client/views/character/stats/statCard/statCard.html b/rpg-docs/client/views/character/stats/statCard/statCard.html
index 997a6df5..bf3ef3f7 100644
--- a/rpg-docs/client/views/character/stats/statCard/statCard.html
+++ b/rpg-docs/client/views/character/stats/statCard/statCard.html
@@ -1,6 +1,6 @@
 <template name="statCard">
 	<div>
-		<paper-material class="ability-mini-card layout horizontal">
+		<paper-material class="stat-card layout horizontal">
 			<div class="numbers paper-font-display1">
 					{{#if isSkill}}
 						{{prefix}}{{skillMod}}
diff --git a/rpg-docs/client/views/character/stats/stats.js b/rpg-docs/client/views/character/stats/stats.js
index 9d2f7e6e..f38934b8 100644
--- a/rpg-docs/client/views/character/stats/stats.js
+++ b/rpg-docs/client/views/character/stats/stats.js
@@ -1,10 +1,10 @@
 Template.stats.events({
-	"click .statCard": function(event, instance){
+	"click .stat-card": function(event, instance){
 		var charId = instance.data._id;
 		if (this.isSkill){
 			pushDialogStack({
 				template: "skillDialog",
-				data:     {
+				data: {
 					name: this.name,
 					skillName: this.stat,
 					charId: charId,
@@ -15,7 +15,7 @@ Template.stats.events({
 		} else {
 			pushDialogStack({
 				template: "attributeDialog",
-				data:     {
+				data: {
 					name: this.name,
 					statName: this.stat,
 					charId: charId,
@@ -31,7 +31,7 @@ Template.stats.events({
 		if (this.ability === "strength") template = "strengthDialog";
 		pushDialogStack({
 			template: template,
-			data:     {
+			data: {
 				name: this.title,
 				statName: this.ability,
 				charId: charId,
@@ -45,7 +45,7 @@ Template.stats.events({
 		var charId = instance.data._id;
 		pushDialogStack({
 			template: "skillDialog",
-			data:     {
+			data: {
 				name: this.name,
 				skillName: skill,
 				charId: charId,
@@ -56,7 +56,7 @@ Template.stats.events({
 	"tap .hitPointTitle": function(event, instance) {
 		pushDialogStack({
 			template: "attributeDialog",
-			data:     {
+			data: {
 				name: "Hit Points",
 				statName: "hitPoints",
 				charId: this._id,
diff --git a/rpg-docs/client/views/characterList/characterList.css b/rpg-docs/client/views/characterList/characterList.css
index 63e43913..f25313b8 100644
--- a/rpg-docs/client/views/characterList/characterList.css
+++ b/rpg-docs/client/views/characterList/characterList.css
@@ -9,7 +9,7 @@
 }
 
 .character-card .image {
-	position: relative;
+
 }
 
 .character-card .initials {
@@ -19,8 +19,11 @@
 }
 
 .character-card paper-item {
-	margin-top: 8px;
-	margin-bottom: 8px;
+	padding-top: 16px;
+	padding-bottom: 16px;
+	height: 76px;
+	background-color: #545454;
+	background-color: rgba(0,0,0,0.3);
 }
 
 .character-card .name {
diff --git a/rpg-docs/client/views/characterList/characterList.html b/rpg-docs/client/views/characterList/characterList.html
index b7bd9d59..1603eaa5 100644
--- a/rpg-docs/client/views/characterList/characterList.html
+++ b/rpg-docs/client/views/characterList/characterList.html
@@ -11,23 +11,21 @@
 					{{#if characters.count}}
 						<div class="character-list layout horizontal wrap">
 							{{# each characters}}
-								<a class="character-card flex layout vertical" href="/character/{{_id}}">
-									<div class="flex image">
-										<iron-image class="fit {{colorClass}}"
-													sizing="cover" preload fade src={{picture}}>
-										</iron-image>
-										{{#unless picture}}
-											<div class="fit initials layout vertical center center-justified">
-												{{initials name}}
-											</div>
-										{{/unless}}
-									</div>
+								<a class="character-card flex layout vertical end-justified" href="/character/{{_id}}">
+									<iron-image class="fit {{colorClass}}"
+												sizing="cover" preload fade src={{picture}}>
+									</iron-image>
+									{{#unless picture}}
+										<div class="fit initials layout vertical center center-justified">
+											{{initials name}}
+										</div>
+									{{/unless}}
 									<paper-item>
 										<paper-item-body two-lines>
-											<div class="name">
+											<div class="name white87">
 												{{name}}
 											</div>
-											<div secondary>
+											<div secondary style="color: #8a8a8a; color: rgba(255,255,255,0.87);">
 												{{alignment}} {{gender}} {{race}}
 											</div>
 										</paper-item-body>
diff --git a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
index 249f2d5b..072f71ba 100644
--- a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
+++ b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html
@@ -1,44 +1,40 @@
 <template name="baseDialog">
-	<div class="{{class}} top subhead"
-		 style="height: 72px;"
-		 hero-id="toolbar" hero
-		 layout horizontal center>
-		<paper-icon-button id="backButton" 
-						   icon="arrow-back">
-		</paper-icon-button>
-		<div flex>{{title}}</div>
-		{{#if editing}}
-			{{#unless hideDelete}}
-				<paper-icon-button id="deleteButton"
-								   role="button"
-								   tabindex="0"
-								   icon="delete"
-								   aria-label="Delete Feature">
+	<app-header-layout has-scrolling-region class="fit base-dialog">
+		<app-header fixed effects="waterfall">
+			<app-toolbar class={{class}}>
+				<paper-icon-button id="backButton"
+								   icon="arrow-back">
 				</paper-icon-button>
+				<div main-title>{{title}}</div>
+				{{#if editing}}
+					{{#unless hideDelete}}
+						<paper-icon-button id="deleteButton"
+										   role="button"
+										   tabindex="0"
+										   icon="delete">
+						</paper-icon-button>
+					{{/unless}}
+					{{#unless hideColor}}
+						{{> colorDropdown}}
+					{{/unless}}
+					<paper-icon-button id="doneEditingButton"
+									   icon="done">
+					</paper-icon-button>
+				{{else}}
+					{{#if showEdit}}
+						<paper-icon-button id="editButton"
+										   icon="create">
+						</paper-icon-button>
+					{{/if}}
+				{{/if}}
+			</app-toolbar>
+		</app-header>
+		<div class="form">
+			{{#unless editing}}
+				{{> UI.contentBlock}}
+			{{else}}
+				{{> UI.elseBlock}}
 			{{/unless}}
-			{{#unless hideColor}}
-				{{> colorDropdown}}
-			{{/unless}}
-			<paper-icon-button id="doneEditingButton"
-							   icon="done"
-							   aria-label="Delete Feature">
-			</paper-icon-button>
-		{{else}}
-			{{#if showEdit}}
-				<paper-icon-button id="editButton"
-								   icon="create"
-								   aria-label="Delete Feature">
-				</paper-icon-button>
-			{{/if}}
-		{{/if}}
-	</div>
-	<div class="bottom scroll-y"
-		 style="padding: 24px"
-		 flex>
-		{{#unless editing}}
-			{{> UI.contentBlock}}
-		{{else}}
-			{{> UI.elseBlock}}
-		{{/unless}}
-	</div>
-</template>
\ No newline at end of file
+		</div>
+	</app-header-layout>
+</template>
diff --git a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
index adf63f76..09526a48 100644
--- a/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
+++ b/rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js
@@ -2,14 +2,10 @@ Template.baseDialog.onCreated(function(){
 	this.editing = new ReactiveVar(!!this.data.startEditing);
 });
 
-Template.baseDialog.onRendered(function(){
-	//after the dialog is built, open it
-	Session.set("global.ui.detailShow", true);
-});
-
 Template.baseDialog.helpers({
 	editing: function(){
-		return Template.instance().editing.get() && canEditCharacter(Template.parentData().charId);
+		return Template.instance().editing.get() &&
+			canEditCharacter(Template.parentData().charId);
 	},
 	showEdit: function() {
 		if (this.hideEdit) return false;
@@ -19,7 +15,7 @@ Template.baseDialog.helpers({
 
 Template.baseDialog.events({
 	"tap #backButton": function(){
-		GlobalUI.closeDetail();
+		popDialogStack();
 	},
 	"tap #editButton": function(event, instance){
 		instance.editing.set(true);