From 33ca60c2e647ef2b6aa0abd5863922b0f42e4f5a Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 20 Jan 2017 15:45:18 +0200
Subject: [PATCH] Migrated the Feature page to Polymer 1

---
 .../client/globalHelpers/openParentDialog.js  |  41 +-
 rpg-docs/client/style/main.css                |   7 +
 .../characterSettings/shareDialog.html        |   4 +-
 .../client/views/character/characterSheet.js  |   9 +-
 .../features/featureDialog/featureDialog.html |  61 ++-
 .../features/featureDialog/featureDialog.js   |  65 ++--
 .../views/character/features/features.css     |   4 -
 .../views/character/features/features.html    | 110 +++---
 .../views/character/features/features.js      |  51 ++-
 .../client/views/character/stats/stats.html   |   2 +-
 .../home/intro/{intro.scss => intro.css}      |   0
 rpg-docs/client/views/layout/layout.css       |   5 -
 rpg-docs/client/views/layout/layout.html      |  26 +-
 .../client/views/layout/polymerImports.html   |   4 +
 .../colorDropdown/colorDropdown.js            |   1 -
 .../dialogStack/dialogStack.css               |   7 +-
 .../paperTemplates/dialogStack/dialogStack.js |  45 ++-
 .../public/custom_components/app-theme.html   |  28 +-
 .../dicecloud-selectable.html                 | 353 ++++++++++++++++++
 .../dicecloud-selector.html                   |  24 ++
 20 files changed, 613 insertions(+), 234 deletions(-)
 rename rpg-docs/client/views/home/intro/{intro.scss => intro.css} (100%)
 create mode 100644 rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
 create mode 100644 rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selector.html

diff --git a/rpg-docs/client/globalHelpers/openParentDialog.js b/rpg-docs/client/globalHelpers/openParentDialog.js
index 7f1528a2..139428fe 100644
--- a/rpg-docs/client/globalHelpers/openParentDialog.js
+++ b/rpg-docs/client/globalHelpers/openParentDialog.js
@@ -1,32 +1,23 @@
-openParentDialog = function(parent, charId, heroId) {
-	var detail;
+openParentDialog = function({
+	parent, charId, element, returnElement, callback,
+}) {
+	let template;
+	let data;
 	if (parent.collection === "Characters" && parent.group === "racial") {
-		detail = {
-			template: "raceDialog",
-			data: {charId: parent.id},
-		};
+		template = "raceDialog";
+		data = {charId: parent.id};
 	} else if (parent.collection === "Features") {
-		detail = {
-			template: "featureDialog",
-			data:     {featureId: parent.id},
-		};
+		template = "featureDialog";
+		data = {featureId: parent.id};
 	} else if (parent.collection === "Classes") {
-		detail = {
-			template: "classDialog",
-			data: {classId: parent.id},
-		};
+		template = "classDialog";
+		data = {classId: parent.id};
 	} else if (parent.collection === "Items") {
-		detail = {
-			template: "itemDialog",
-			data:     {itemId: parent.id},
-		};
+		template = "itemDialog";
+		data = {itemId: parent.id};
 	} else if (parent.collection === "Spells") {
-		detail = {
-			template: "spellDialog",
-			data:     {spellId: parent.id},
-		};
+		template = "spellDialog";
+		data = {spellId: parent.id};
 	}
-	detail.heroId = heroId;
-	detail.charId = charId;
-	GlobalUI.setDetail(detail);
+	pushDialogStack({template, data, element, returnElement, callback});
 };
diff --git a/rpg-docs/client/style/main.css b/rpg-docs/client/style/main.css
index 7977a784..7884736f 100644
--- a/rpg-docs/client/style/main.css
+++ b/rpg-docs/client/style/main.css
@@ -55,6 +55,8 @@ paper-icon-item::shadow #contentIcon {
 	position: fixed;
 	bottom: 24px;
 	right: 24px;
+	/* stop the fab from flashing during animation */
+	transform: translateZ(0);
 }
 
 paper-fab {
@@ -75,6 +77,11 @@ paper-button {
 	text-transform: uppercase;
 }
 
+dicecloud-selector paper-item {
+	white-space: nowrap;
+	overflow: hidden;
+}
+
 /*Style shortcuts*/
 .scroll-y {
 	overflow-y: auto;
diff --git a/rpg-docs/client/views/character/characterSettings/shareDialog.html b/rpg-docs/client/views/character/characterSettings/shareDialog.html
index 3be53bba..4554da61 100644
--- a/rpg-docs/client/views/character/characterSettings/shareDialog.html
+++ b/rpg-docs/client/views/character/characterSettings/shareDialog.html
@@ -8,10 +8,10 @@
 			</app-header>
 			<div class="form flex">
 				<paper-dropdown-menu label="Who can view this character">
-		   			<paper-listbox class="visibilityDropdown dropdown-content" selected={{viewPermission}} attr-for-selected="name">
+		   			<dicecloud-selector class="visibilityDropdown dropdown-content" selected={{viewPermission}}>
 		   				<paper-item name="whitelist">Only people I share with</paper-item>
 		   				<paper-item name="public">Anyone with link</paper-item>
-		   			</paper-listbox>
+		   			</dicecloud-selector>
 		   		</paper-dropdown-menu>
 				<div class="layout horizontal center wrap">
 		   			<paper-input class="flex" id="userNameOrEmailInput" label="Share with username or email" floatinglabel></paper-input>
diff --git a/rpg-docs/client/views/character/characterSheet.js b/rpg-docs/client/views/character/characterSheet.js
index c29332bf..bbb9b367 100644
--- a/rpg-docs/client/views/character/characterSheet.js
+++ b/rpg-docs/client/views/character/characterSheet.js
@@ -30,24 +30,21 @@ Template.characterSheet.events({
 	"color-change": function(event, instance){
 		Characters.update(this._id, {$set: {color: event.color}});
 	},
-	"tap #deleteCharacter": function(event, instance){
-		const menu = instance.find(".character-menu");
+	"click #deleteCharacter": function(event, instance){
 		pushDialogStack({
 			data: this,
 			template: "deleteCharacterConfirmation",
 			element: event.currentTarget.parentElement.parentElement,
 		});
 	},
-	"tap #shareCharacter": function(event, instance){
-		const menu = instance.find(".character-menu");
+	"click #shareCharacter": function(event, instance){
 		pushDialogStack({
 			data: this,
 			template: "shareDialog",
 			element: event.currentTarget.parentElement.parentElement,
 		});
 	},
-	"tap #characterSettings": function(event, instance){
-		const menu = instance.find(".character-menu");
+	"click #characterSettings": function(event, instance){
 		pushDialogStack({
 			data: this,
 			template: "characterSettings",
diff --git a/rpg-docs/client/views/character/features/featureDialog/featureDialog.html b/rpg-docs/client/views/character/features/featureDialog/featureDialog.html
index 500da4f9..77dde01c 100644
--- a/rpg-docs/client/views/character/features/featureDialog/featureDialog.html
+++ b/rpg-docs/client/views/character/features/featureDialog/featureDialog.html
@@ -10,10 +10,9 @@
 
 <template name="featureDetails">
 	{{#if or canEnable hasUses}}
-		<div layout horizontal center justified wrap>
+		<div class="layout horizontal center justified wrap">
 			{{#if canEnable}}
-				<div>enabled:</div>
-				<paper-checkbox class="sideMargin" checked={{enabled}}></paper-checkbox>
+				<paper-checkbox class="sideMargin" checked={{enabled}}>enabled</paper-checkbox>
 			{{/if}}
 			{{#if hasUses}}
 				<div class="subhead" style="margin-right: 16px">
@@ -21,7 +20,7 @@
 				</div>
 			{{/if}}
 			{{#if hasUses}}
-				<div layout horizontal>
+				<div class="layout horizontal">
 					<paper-button class="useFeature" disabled={{noUsesLeft}}>Use</paper-button>
 					<paper-button class="resetFeature" disabled={{usesFull}}>Reset</paper-button>
 				</div>
@@ -41,44 +40,36 @@
 
 <template name="featureEdit">
 	<!--name-->
-	<paper-input id="featureNameInput" class="fullwidth" label="Name" floatinglabel value={{name}}></paper-input>
+	<paper-input id="featureNameInput" class="fullwidth" label="Name" value={{name}}></paper-input>
 
-	<hr class="vertMargin">
-
-	<div layout horizontal center style="height: 60px;">
-		<paper-dropdown-menu id="enabledDropdown" label="Enable Feature">
-			<paper-dropdown layered class="dropdown">
-				<core-menu id="enabledMenu" class="menu"  selected={{enabledSelection}} on-tap="onStatMenuTap">
-					<paper-item name="alwaysEnabled"> Always Enabled </paper-item>
-					<paper-item name="enabled">       Enabled        </paper-item>
-					<paper-item name="disabled">      Disabled       </paper-item>
-				</core-menu>
-			</paper-dropdown>
+	<div class="layout horizontal center wrap justified">
+		<paper-dropdown-menu class=flex label="Enable Feature" style="flex-basis: 150px; max-width: 200px;">
+			<dicecloud-selector selected={{enabledSelection}} class="dropdown-content enabled-dropdown">
+				<paper-item name="alwaysEnabled" style="width: 150px;">
+					Always Enabled
+				</paper-item>
+				<paper-item name="enabled">
+					Enabled
+				</paper-item>
+				<paper-item name="disabled">
+					Disabled
+				</paper-item>
+			</dicecloud-selector>
 		</paper-dropdown-menu>
-		<div layout horizontal center class="sideMargin">
-			<div>Limit Uses: </div>
-			<paper-toggle-button id="limitUseCheck"
-								 class="sideMargin"
-								 checked={{usesSet}}
-								 role="button" 
-								 aria-pressed="false"
-								 tabindex="0"
-								 touch-action="pan-y">
-			</paper-toggle-button>
-		</div>
+		<paper-toggle-button id="limitUseCheck" checked={{usesSet}} style="margin: 0 16px; height: 62px;">
+			 Limit uses
+		</paper-toggle-button>
 		{{#if usesSet}}
-			<paper-input flex id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
+			<paper-input id="usesInput" type="number" allowed-pattern="[0-9]" class="flex"
+						label="Uses" value={{uses}} style="flex-basis: 100px; max-width: 200px">
+			</paper-input>
+		{{else}}
+			<div class="flex" style="flex-basis: 100px; max-width: 200px"></div>
 		{{/if}}
 	</div>
 
-	<hr class="vertMargin">
-
 	<!--description-->
-	<paper-input-decorator label="Description" floatinglabel layout vertical>
-		<paper-autogrow-textarea>
-			<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
-		</paper-autogrow-textarea>
-	</paper-input-decorator>
+	<paper-textarea label="Description" id="featureDescriptionInput" value={{description}}></paper-textarea>
 
 	{{> effectsEditList parentId=_id parentCollection="Features" charId=charId name=name enabled=enabled}}
 	{{> proficiencyEditList parentId=_id parentCollection="Features" charId=charId enabled=enabled}}
diff --git a/rpg-docs/client/views/character/features/featureDialog/featureDialog.js b/rpg-docs/client/views/character/features/featureDialog/featureDialog.js
index 6c0b85a4..1bd41a68 100644
--- a/rpg-docs/client/views/character/features/featureDialog/featureDialog.js
+++ b/rpg-docs/client/views/character/features/featureDialog/featureDialog.js
@@ -31,11 +31,11 @@ Template.featureDetails.helpers({
 });
 
 Template.featureDetails.events({
-	"tap .useFeature": function(event){
+	"click .useFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$inc: {used: 1}});
 	},
-	"tap .resetFeature": function(event){
+	"click .resetFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$set: {used: 0}});
 	},
@@ -46,10 +46,6 @@ Template.featureDetails.events({
 	},
 });
 
-Template.featureEdit.onRendered(function(){
-	updatePolymerInputs(this);
-});
-
 Template.featureEdit.helpers({
 	usesSet: function(){
 		return _.isString(this.uses);
@@ -67,32 +63,53 @@ Template.featureEdit.helpers({
 	},
 });
 
+const debounce = (f) => _.debounce(f, 300);
+
 Template.featureEdit.events({
-	"change #featureNameInput": function(event){
-		var name = Template.instance().find("#featureNameInput").value;
-		Features.update(this._id, {$set: {name: name}});
-	},
-	"change #featureDescriptionInput": function(event){
-		var description = Template.instance().find("#featureDescriptionInput").value;
-		Features.update(this._id, {$set: {description: description}});
-	},
-	"change #limitUseCheck": function(event){
+	"input #featureNameInput": debounce(function(event){
+		var name = event.currentTarget.value;
+		Features.update(this._id, {
+			$set: {name: name}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
+	"input #featureDescriptionInput": debounce(function(event){
+		var description = event.currentTarget.value;
+		Features.update(this._id, {
+			$set: {description: description}
+		}, {
+			removeEmptyStrings: false,
+			trimStrings: false,
+		});
+	}),
+	"change #limitUseCheck": debounce(function(event){
 		var currentUses = this.uses;
 		var featureId = this._id;
 		if (event.target.checked && !_.isString(currentUses)){
-			Features.update(featureId, {$set: {uses: ""}}, {removeEmptyStrings: false});
+			Features.update(featureId, {
+				$set: {uses: ""}
+			}, {
+				removeEmptyStrings: false
+			});
 		} else if (!event.target.checked && _.isString(currentUses)){
-			Features.update(featureId, {$unset: {uses: ""}});
+			Features.update(featureId, {
+				$unset: {uses: ""}
+			});
 		}
-	},
-	"change #usesInput, input #quantityInput": function(event){
-		var value = event.target.value;
+	}),
+	"input #usesInput, input #quantityInput": debounce(function(event){
+		var value = event.currentTarget.value;
 		var featureId = this._id;
-		Features.update(featureId, {$set: {uses: value}});
-	},
-	"core-select #enabledDropdown": function(event){
+		Features.update(featureId, {
+			$set: {uses: value}
+		}, {
+			removeEmptyStrings: false,
+		});
+	}),
+	"iron-select .enabled-dropdown": function(event){
 		var detail = event.originalEvent.detail;
-		if (!detail.isSelected) return;
 		var value = detail.item.getAttribute("name");
 		var setter;
 		if (value === "enabled"){
diff --git a/rpg-docs/client/views/character/features/features.css b/rpg-docs/client/views/character/features/features.css
index 02c189b9..acb80cda 100644
--- a/rpg-docs/client/views/character/features/features.css
+++ b/rpg-docs/client/views/character/features/features.css
@@ -3,10 +3,6 @@
 }
 
 .features {
-	display: flex !important;
-	justify-content: center;
-	align-items: stretch;
-	flex-wrap: wrap;
 	padding: 4px;
 }
 
diff --git a/rpg-docs/client/views/character/features/features.html b/rpg-docs/client/views/character/features/features.html
index 55b4191e..16eba8f4 100644
--- a/rpg-docs/client/views/character/features/features.html
+++ b/rpg-docs/client/views/character/features/features.html
@@ -1,20 +1,19 @@
 <template name="features">
-	<div fit>
-		<div class="scroll-y" fit>
-			<div class="column-container">
-				<!--expertiseDice-->
-				{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
-				<!--ki-->
-				{{>resource name="ki" title="Ki Points" color="teal" char=this}}
-				<!--rages-->
-				{{>resource name="rages" title="Rages" color="teal" char=this}}
-				<!--sorceryPoints-->
-				{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
-				<!--superiorityDice-->
-				{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
+	<div class="features">
+		<div class="column-container">
+			<!--expertiseDice-->
+			{{>resource name="expertiseDice" title="Expertise Dice" color="teal" char=this}}
+			<!--ki-->
+			{{>resource name="ki" title="Ki Points" color="teal" char=this}}
+			<!--rages-->
+			{{>resource name="rages" title="Rages" color="teal" char=this}}
+			<!--sorceryPoints-->
+			{{>resource name="sorceryPoints" title="Sorcery Points" color="teal" char=this}}
+			<!--superiorityDice-->
+			{{>resource name="superiorityDice" title="Superiority Dice" color="teal" char=this}}
 
-				<!--Attacks-->
-				<div>
+			<!--Attacks-->
+			<div>
 				<paper-material class="card">
 					<div class="top white">
 						Attacks
@@ -22,23 +21,21 @@
 					<div class="bottom list">
 						{{#each attacks}}
 							<div class="item-slot">
-								<div class="flexible attack item"
-											hero-id="main" {{detailHero}}>
-									<div layout horizontal>
-										<div class="headline"
-											 style="margin-right: 16px;"
-											 layout horizontal center>
+								<div class="flexible attack item">
+									<div class="layout horizontal">
+										<div class="paper-font-headline layout horizontal center"
+											 style="margin-right: 16px;">
 											{{evaluateSigned ../_id attackBonus}}
 										</div>
-										<div flex layout vertical>
-											<div class="body2">
+										<div class="flex layout vertical">
+											<div class="paper-font-body2">
 												{{name}}
 											</div>
 											<div>
 												{{evaluateString ../_id damage}}&nbsp;{{damageType}}
 											</div>
 											{{#if details}}
-												<div class="caption">
+												<div>
 													{{details}}
 												</div>
 											{{/if}}
@@ -49,46 +46,43 @@
 						{{/each}}
 					</div>
 				</paper-material>
-				</div>
+			</div>
 
-				<!--Proficiencies-->
-				<div>
+			<!--Proficiencies-->
+			<div>
 				<paper-material class="card">
 					<div class="white top">
 						Proficiencies
 					</div>
 					<div flex class="bottom list">
 						{{#if weaponProfs.count}}
-							<div class="subhead">Weapons</div>
+							<div class="paper-font-subhead">Weapons</div>
 						{{/if}}
 						{{#each weaponProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if armorProfs.count}}
-							<div class="subhead">Armor</div>
+							<div class="paper-font-subhead">Armor</div>
 						{{/if}}
 						{{#each armorProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 						{{#if toolProfs.count}}
-							<div class="subhead">Tools</div>
+							<div class="paper-font-subhead">Tools</div>
 						{{/if}}
 						{{#each toolProfs}}
 							{{> proficiencyListItem}}
 						{{/each}}
 					</div>
 				</paper-material>
-				</div>
+			</div>
 
-				<!--features-->
-				{{#each features}}
-					<div>
-					<paper-material class="card featureCard"
-								  hero-id="main" {{detailHero}}>
-						<div class="top {{colorClass}} subhead"
-							 layout horizontal
-							 hero-id="toolbar" {{detailHero}}>
-							<div flex hero-id="title" {{detailHero}}>
+			<!--features-->
+			{{#each features}}
+				<div>
+					<paper-material class="card featureCard" data-id={{_id}}>
+						<div class="top {{colorClass}} paper-font-subhead layout horizontal">
+							<div class="flex">
 								{{name}}
 							</div>
 							{{#if hasUses}}
@@ -97,22 +91,22 @@
 								</div>
 							{{/if}}
 							{{#if canEnable}}
-								<core-tooltip label="Feature enabled"
-											  position="left">
+								<div>
 									<paper-checkbox class="enabledCheckbox"
 													checked={{enabled}}
 													disabled={{#unless canEditCharacter charId}}true{{/unless}}>
 									</paper-checkbox>
-								</core-tooltip>
+									<paper-tooltip position="left">Feature enabled</paper-tooltip>
+								</div>
 							{{/if}}
 						</div>
 						{{#if description}}
-							<div flex class="bottom">
+							<div class="bottom flex">
 								{{#markdown}}{{evaluateString charId shortDescription}}{{/markdown}}
 							</div>
 						{{/if}}
 						{{#if hasUses}}
-							<div layout horizontal center end-justified>
+							<div class="layout horizontal center end-justified">
 								<paper-button class="useFeature"
 											  disabled={{noUsesLeft}}>
 									Use
@@ -124,20 +118,15 @@
 							</div>
 						{{/if}}
 					</paper-material>
-					</div>
-				{{/each}}
-			</div>
-			<div class="fab-buffer"></div>
+				</div>
+			{{/each}}
 		</div>
 		{{#if canEditCharacter _id}}
 			<paper-fab id="addFeature"
 					   class="floatyButton"
-					   icon="add"
-					   title="Add"
-					   role="button"
-					   tabindex="0"
-					   aria-label="Add"
-					   hero-id="main"></paper-fab>
+					   icon="add">
+		   		<paper-tooltip position="left">Add Feature</paper-tooltip>
+		  	</paper-fab>
 		{{/if}}
 	</div>
 </template>
@@ -145,12 +134,8 @@
 <template name="resource">
 	{{#if characterCalculate "attributeBase" char._id name}}
 	<div>
-		<paper-material class="card"
-					  hero-id="main" {{detailHero name char._id}}
-					  layout horizontal>
-			<div class="left {{getColor}} display1 white-text"
-				 hero-id="toolbar" {{detailHero name char._id}}
-				 layout horizontal center>
+		<paper-material class="card layout horizontal">
+			<div class="left {{getColor}} paper-font-display1 white-text layout horizontal center">
 				<div style="margin-right: 8px;">
 					<paper-icon-button class="resourceUp"
 									   icon="arrow-drop-up"
@@ -164,8 +149,7 @@
 				<div>{{characterCalculate "attributeValue" char._id name}}</div>
 				<!--<div>/{{char.attributeBase name}}</div>-->
 			</div>
-			<div class="right clickable"
-				 flex layout horizontal center>
+			<div class="right clickable flex layout horizontal center">
 				{{title}}
 			</div>
 		</paper-material>
diff --git a/rpg-docs/client/views/character/features/features.js b/rpg-docs/client/views/character/features/features.js
index 99687f39..605ceb72 100644
--- a/rpg-docs/client/views/character/features/features.js
+++ b/rpg-docs/client/views/character/features/features.js
@@ -43,54 +43,45 @@ Template.features.helpers({
 });
 
 Template.features.events({
-	"tap #addFeature": function(event){
+	"click #addFeature": function(event, instance){
 		var featureId = Features.insert({
 			name: "New Feature",
 			charId: this._id,
 			enabled: true,
 			alwaysEnabled: true,
 		});
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: "featureDialog",
 			data:     {featureId: featureId, charId: this._id, startEditing: true},
-			heroId:   featureId,
+			element: event.currentTarget,
+			returnElement: instance.find(`.featureCard[data-id='${featureId}']`),
 		});
 	},
-	"tap #addAttackButton": function(event){
-		var charId = this._id;
-		Attacks.insert({
-			charId: charId
-		}, function(error, id){
-			if (!error){
-				GlobalUI.setDetail({
-					template: "attackDialog",
-					data:     {attackId: id, charId: charId},
-					heroId:   id,
-				});
-			}
-		});
-	},
-	"tap .featureCard .top": function(event){
+	"click .featureCard .top": function(event){
 		var featureId = this._id;
 		var charId = Template.parentData()._id;
-		GlobalUI.setDetail({
+		pushDialogStack({
 			template: "featureDialog",
 			data:     {featureId: featureId, charId: charId},
-			heroId:   featureId,
+			element:   event.currentTarget.parentElement,
 		});
 	},
-	"tap .attack": function(event){
-		openParentDialog(this.parent, this.charId, this._id);
+	"click .attack": function(event){
+		openParentDialog({
+			parent: this.parent,
+			charId: this.charId,
+			element: event.currentTarget,
+		});
 	},
-	"tap .useFeature": function(event){
+	"click .useFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$inc: {used: 1}});
 	},
-	"tap .resetFeature": function(event){
+	"click .resetFeature": function(event){
 		var featureId = this._id;
 		Features.update(featureId, {$set: {used: 0}});
 	},
-	"tap .enabledCheckbox": function(event){
+	"click .enabledCheckbox": function(event){
 		event.stopPropagation();
 	},
 	"change .enabledCheckbox": function(event){
@@ -122,7 +113,7 @@ Template.resource.helpers({
 });
 
 Template.resource.events({
-	"tap .resourceUp": function(event){
+	"click .resourceUp": function(event){
 		var value = Characters.calculate.attributeValue(this.char._id, this.name);
 		var base = Characters.calculate.attributeBase(this.char._id, this.name);
 		if (value < base){
@@ -131,7 +122,7 @@ Template.resource.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .resourceDown": function(event){
+	"click .resourceDown": function(event){
 		var value = Characters.calculate.attributeValue(this.char._id, this.name);
 		if (value > 0){
 			var modifier = {$inc: {}};
@@ -139,11 +130,11 @@ Template.resource.events({
 			Characters.update(this.char._id, modifier, {validate: false});
 		}
 	},
-	"tap .right": function(event, instance) {
-		GlobalUI.setDetail({
+	"click .right": function(event, instance) {
+		pushDialogStack({
 			template: "attributeDialog",
 			data:     {name: this.title, statName: this.name, charId: this.char._id},
-			heroId:   this.char._id + this.name,
+			element: event.currentTarget.parentElement,
 		});
 	},
 });
diff --git a/rpg-docs/client/views/character/stats/stats.html b/rpg-docs/client/views/character/stats/stats.html
index 2e33a9ba..c922593a 100644
--- a/rpg-docs/client/views/character/stats/stats.html
+++ b/rpg-docs/client/views/character/stats/stats.html
@@ -1,5 +1,5 @@
 <template name="stats">
-	<div class="scroll-y" fit>
+	<div class="stats">
 		<div style="padding: 8px 8px 0 8px">
 			{{> healthCard}}
 		</div>
diff --git a/rpg-docs/client/views/home/intro/intro.scss b/rpg-docs/client/views/home/intro/intro.css
similarity index 100%
rename from rpg-docs/client/views/home/intro/intro.scss
rename to rpg-docs/client/views/home/intro/intro.css
diff --git a/rpg-docs/client/views/layout/layout.css b/rpg-docs/client/views/layout/layout.css
index 4fd7883b..a3618ac9 100644
--- a/rpg-docs/client/views/layout/layout.css
+++ b/rpg-docs/client/views/layout/layout.css
@@ -1,10 +1,5 @@
 #accountSummary {
-	padding: 16px;
 	min-height: 146px;
-	background-image: url(/png/paper-dice-crown.png);
-  	background-repeat: no-repeat;
-	background-size: cover;
-	background-position: center center;
 	color: white;
 }
 
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index e8439cc6..e125f0a2 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -1,17 +1,19 @@
 <template name="layout">
-	<app-drawer-layout class="layout" responsiveWidth="905px" fullbleed>
+	<app-drawer-layout class="layout" responsive-width="905px" fullbleed>
 		<app-drawer>
-			<app-header-layout mode="seamed" class="white">
-				<div id="accountSummary">
-					{{#if currentUser}}
-						<a href="/account"
-							 style="text-decoration: underline; cursor: pointer; font-size: 16px;">
-							{{profileLink}}
-						</a>
-					{{else}}
-						<a href="/sign-in" style="color: white;">Sign in</a>
-					{{/if}}
-				</div>
+			<app-header-layout class="white" has-scrolling-region>
+				<app-header id="accountSummary" effects="waterfall parallax-background" condenses fixed>
+					<app-toolbar>
+						{{#if currentUser}}
+							<a href="/account"
+								 style="text-decoration: underline; cursor: pointer; font-size: 16px;">
+								{{profileLink}}
+							</a>
+						{{else}}
+							<a href="/sign-in" style="color: white; text-decoration: underline;">Sign in</a>
+						{{/if}}
+					</app-toolbar>
+				</app-header>
 				<div id="navPanel">
 					<a href="/" tabindex="-1">
 						<paper-icon-item id="homeNav">
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index f91b4542..9f0f9089 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -8,6 +8,7 @@
 	</script>
 	<link rel="import" href="/components/app-layout/app-layout.html">
 	<link rel="import" href="/components/app-layout/app-scroll-effects/effects/waterfall.html">
+	<link rel="import" href="/components/app-layout/app-scroll-effects/effects/parallax-background.html">
 	<link rel="import" href="/components/app-layout/app-scroll-effects/effects/resize-title.html">
 
 	<link rel="import" href="/components/iron-icon/iron-icon.html">
@@ -23,6 +24,7 @@
 <!--<link rel="import" href="/components/iron-icons/places-icons.html">-->
 	<link rel="import" href="/components/iron-icons/social-icons.html">
 	<link rel="import" href="/components/iron-image/iron-image.html">
+	<link rel="import" href="/components/iron-selector/iron-selector.html">
 
 	<link rel="import" href="/components/neon-animation/neon-animation.html">
 	<link rel="import" href="/components/neon-animation/neon-animations.html">
@@ -39,6 +41,7 @@
 	<link rel="import" href="/components/paper-listbox/paper-listbox.html">
 	<link rel="import" href="/components/paper-material/paper-material.html">
 	<link rel="import" href="/components/paper-menu-button/paper-menu-button.html">
+	<link rel="import" href="/components/paper-menu/paper-menu.html">
 	<link rel="import" href="/components/paper-radio-button/paper-radio-button.html">
 	<link rel="import" href="/components/paper-radio-group/paper-radio-group.html">
 	<link rel="import" href="/components/paper-ripple/paper-ripple.html">
@@ -48,6 +51,7 @@
 	<link rel="import" href="/components/paper-toggle-button/paper-toggle-button.html">
 	<link rel="import" href="/components/paper-tooltip/paper-tooltip.html">
 
+	<link rel="import" href="/custom_components/dicecloud-selector/dicecloud-selector.html">
 	<link rel="import" href="/custom_components/paper-checkbox/paper-checkbox.html">
 	<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
 	<link rel="import" href="/custom_components/app-theme.html">
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
index 1e7af670..1c3e384c 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
@@ -6,7 +6,6 @@ Template.colorDropdown.helpers({
 
 Template.colorDropdown.events({
 	"click paper-item": function(event, instance){
-		instance.find(".colorDropdown").close();
 		var color = event.currentTarget.getAttribute("name");
 		instance.$(".colorDropdown").trigger({
 			type: "color-change",
diff --git a/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css b/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
index 6b8677bd..bc8efb5c 100644
--- a/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
+++ b/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
@@ -6,7 +6,7 @@
 	bottom: 0;
 	left: 0;
 	visibility: visible;
-	transition: visibility 0s;
+	transition: visibility 0s linear;
 }
 
 .dialog-stack.hide {
@@ -15,8 +15,9 @@
 }
 
 .dialog-stack .backdrop {
-	background: rgba(0,0,0,0.4);
-	opacity: 1;
+	background: #000;
+	transform: translateZ(0);
+	opacity: 0.4;
 	transition: opacity 400ms linear;
 }
 
diff --git a/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js b/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js
index 332274b3..a5f1b3ab 100644
--- a/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js
+++ b/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.js
@@ -2,7 +2,7 @@ dialogs = new ReactiveArray();
 const offset = 16;
 const duration = 400;
 
-pushDialogStack = function({template, data, element, callback}){
+pushDialogStack = function({template, data, element, returnElement, callback}){
 	// Generate a new _id so that Blaze knows how to shuffle the array
 	const _id = Random.id();
 	dialogs.push({
@@ -10,6 +10,7 @@ pushDialogStack = function({template, data, element, callback}){
 		template,
 		data,
 		element,
+		returnElement,
 		callback,
 	});
 };
@@ -20,11 +21,6 @@ popDialogStack = function(result){
 	dialog.callback && dialog.callback(result);
 };
 
-let cloneHolder;
-Template.dialogStack.onRendered(function(){
-	cloneHolder = this.find(".clone-holder");
-});
-
 Template.dialogStack.helpers({
 	dialogStackClass(){
 		if (!dialogs.get().length) return "hide";
@@ -43,13 +39,8 @@ Template.dialogStack.helpers({
 });
 
 Template.dialogStack.events({
-	"click .dialog-stack": function(event){
-		popDialogStack();
-	},
-	"click .dialog-sizer": function(event){
-		// Returning false from an event handler is the same as calling both
-		// stopImmediatePropagation and preventDefault on the event.
-		return false;
+	"click .dialog-stack .backdrop": function(event){
+		if (event.target === event.currentTarget) popDialogStack();
 	},
 });
 
@@ -76,10 +67,11 @@ const imitate = (
 	element.style.borderRadius = transformedRadius($(source).css("border-radius"));
 }
 
-const dialogOpenAnimation = ({element, dialog}) => {
+const dialogOpenAnimation = ({element, returnElement, dialog}) => {
 	const dialogRect = dialog.getBoundingClientRect();
 	const elementRect = element.getBoundingClientRect();
 	element.style.visibility = "hidden";
+	if (returnElement) returnElement.style.visibility = "hidden";
 	// Get how must the element change to become the dialog
 	const deltaLeft = elementRect.left - dialogRect.left;
 	const deltaTop = elementRect.top - dialogRect.top;
@@ -103,7 +95,22 @@ const dialogOpenAnimation = ({element, dialog}) => {
 	}, duration);
 }
 
-const dialogCloseAnimation = ({element, dialog, callback}) => {
+const dialogCloseAnimation = ({element, returnElement, dialog, callback}) => {
+	// We are returning to a different element
+	// pop the original element back in and use the returnElement in its place
+	if (returnElement){
+		let originalElement = element;
+		element = returnElement;
+		originalElement.style.visibility = "";
+		originalElement.style.transform = "scale(0)";
+		_.defer(() => {
+			originalElement.style.transition = `transform ${duration}ms ease`;
+			originalElement.style.transform = "";
+		});
+		_.delay(() => {
+			originalElement.style.transition = "";
+		}, duration);
+	}
 	// Reset the dialog if it is mid-transition
 	dialog.style.transition = "none";
 	dialog.style.transform = "none";
@@ -171,18 +178,22 @@ Template.dialogStack.uihooks({
 			if (data.element){
 				// Store the reference to the element on the DOM node itself,
 				// since Blaze won't keep the data around for the remove hook
-				node["data-element"] = data.element;
+				node._dialogStackElement = data.element;
+				node._dialogStackReturnElement = data.returnElement;
 				dialogOpenAnimation({
 					element: data.element,
+					returnElement: data.returnElement,
 					dialog: node,
 				});
 			}
 		},
 		remove: function(node, tpl) {
-			const element = node["data-element"];
+			const element = node._dialogStackElement;
+			const returnElement = node._dialogStackReturnElement;
 			if (element){
 				dialogCloseAnimation({
 					element,
+					returnElement,
 					dialog: node,
 					callback(){
 						node.remove();
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index b2427fe7..5598baed 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -4,12 +4,15 @@
 <link rel="import" href="../components/paper-styles/classes/global.html">
 
 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">
-	--primary-color: #424242;
-	--light-primary-color: #666;
-	--dark-primary-color: #222;
-	--accent-color: #d13b2e;
-	--light-accent-color: #ff5a4b;
-	--dark-accent-color: #ad2a1f;
+	:root {
+		--primary-color: #424242;
+		--light-primary-color: #666;
+		--dark-primary-color: #222;
+
+		--accent-color: #d13b2e;
+		--light-accent-color: #ff5a4b;
+		--dark-accent-color: #ad2a1f;
+	}
 	paper-item.short {
 		--paper-item-min-height: 32px;
 	}
@@ -22,4 +25,17 @@
 		letter-spacing: inherit;
 		line-height: inherit;
 	}
+	#accountSummary{
+		--app-header-background-front-layer: {
+			background-image: url(/png/paper-dice-crown.png);
+		};
+	}
+	.card .top paper-checkbox {
+		--paper-checkbox-unchecked-color: #757575;
+		--paper-checkbox-unchecked-color: rgba(255,255,255,0.54);
+		--paper-checkbox-unchecked-ink-color: #fff;
+		--paper-checkbox-checked-color: #606060;
+		--paper-checkbox-checked-color: rgba(255,255,255,0.30);
+		--paper-checkbox-checked-ink-color: #fff;
+	}
 </style>
diff --git a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
new file mode 100644
index 00000000..fceeba7e
--- /dev/null
+++ b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selectable.html
@@ -0,0 +1,353 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../components/iron-selector/iron-selection.html">
+
+<script>
+// jscs:disable
+  /**
+   * A stripped down version of iron-selectable
+   * No multi-select
+   * Assumes attrForSelected = "name"
+   * Behaves a little better with Blaze
+   */
+  /** @polymerBehavior */
+  Polymer.DicecloudSelectableBehavior = {
+
+      /**
+       * Fired when dicecloud-selector is activated (selected or deselected).
+       * It is fired before the selected items are changed.
+       * Cancel the event to abort selection.
+       *
+       * @event iron-activate
+       */
+
+      /**
+       * Fired when an item is selected
+       *
+       * @event iron-select
+       */
+
+      /**
+       * Fired when an item is deselected
+       *
+       * @event iron-deselect
+       */
+
+      /**
+       * Fired when the list of selectable items changes (e.g., items are
+       * added or removed). The detail of the event is a mutation record that
+       * describes what changed.
+       *
+       * @event iron-items-changed
+       */
+
+    properties: {
+
+      /**
+       * Gets or sets the selected element. The default is to use the index of the item.
+       * @type {string|number}
+       */
+      selected: {
+        type: String,
+        notify: true
+      },
+
+      /**
+       * Returns the currently selected item.
+       *
+       * @type {?Object}
+       */
+      selectedItem: {
+        type: Object,
+        readOnly: true,
+        notify: true
+      },
+
+      /**
+       * The event that fires from items when they are selected. Selectable
+       * will listen for this event from items and update the selection state.
+       * Set to empty string to listen to no events.
+       */
+      activateEvent: {
+        type: String,
+        value: 'tap',
+        observer: '_activateEventChanged'
+      },
+
+      /**
+       * This is a CSS selector string.  If this is set, only items that match the CSS selector
+       * are selectable.
+       */
+      selectable: String,
+
+      /**
+       * The class to set on elements when selected.
+       */
+      selectedClass: {
+        type: String,
+        value: 'iron-selected'
+      },
+
+      /**
+       * The attribute to set on elements when selected.
+       */
+      selectedAttribute: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * Default fallback if the selection based on selected with `name`
+       * is not found.
+       */
+      fallbackSelection: {
+        type: String,
+        value: null
+      },
+
+      /**
+       * The list of items from which a selection can be made.
+       */
+      items: {
+        type: Array,
+        readOnly: true,
+        notify: true,
+        value: function() {
+          return [];
+        }
+      },
+
+      /**
+       * The set of excluded elements where the key is the `localName`
+       * of the element that will be ignored from the item list.
+       *
+       * @default {template: 1}
+       */
+      _excludedLocalNames: {
+        type: Object,
+        value: function() {
+          return {
+            'template': 1
+          };
+        }
+      }
+    },
+
+    observers: [
+      '_updateSelected(selected)',
+      '_checkFallback(fallbackSelection)'
+    ],
+
+    created: function() {
+      this._bindFilterItem = this._filterItem.bind(this);
+      this._selection = new Polymer.IronSelection(this._applySelection.bind(this));
+    },
+
+    attached: function() {
+      this._observer = this._observeItems(this);
+      this._updateItems();
+      if (!this._shouldUpdateSelection) {
+        this._updateSelected();
+      }
+      this._addListener(this.activateEvent);
+    },
+
+    detached: function() {
+      if (this._observer) {
+        Polymer.dom(this).unobserveNodes(this._observer);
+      }
+      this._removeListener(this.activateEvent);
+    },
+
+    /**
+     * Returns the index of the given item.
+     *
+     * @method indexOf
+     * @param {Object} item
+     * @returns Returns the index of the item
+     */
+    indexOf: function(item) {
+      return this.items.indexOf(item);
+    },
+
+    /**
+     * Selects the given value.
+     *
+     * @method select
+     * @param {string|number} value the value to select.
+     */
+    select: function(value) {
+      this.selected = value;
+    },
+
+    /**
+     * Selects the previous item.
+     *
+     * @method selectPrevious
+     */
+    selectPrevious: function() {
+      var length = this.items.length;
+      var index = (Number(this._valueToIndex(this.selected)) - 1 + length) % length;
+      this.selected = this._indexToValue(index);
+    },
+
+    /**
+     * Selects the next item.
+     *
+     * @method selectNext
+     */
+    selectNext: function() {
+      var index = (Number(this._valueToIndex(this.selected)) + 1) % this.items.length;
+      this.selected = this._indexToValue(index);
+    },
+
+    /**
+     * Selects the item at the given index.
+     *
+     * @method selectIndex
+     */
+    selectIndex: function(index) {
+      this.select(this._indexToValue(index));
+    },
+
+    /**
+     * Force a synchronous update of the `items` property.
+     *
+     * NOTE: Consider listening for the `iron-items-changed` event to respond to
+     * updates to the set of selectable items after updates to the DOM list and
+     * selection state have been made.
+     *
+     * WARNING: If you are using this method, you should probably consider an
+     * alternate approach. Synchronously querying for items is potentially
+     * slow for many use cases. The `items` property will update asynchronously
+     * on its own to reflect selectable items in the DOM.
+     */
+    forceSynchronousItemUpdate: function() {
+      this._updateItems();
+    },
+
+    get _shouldUpdateSelection() {
+      return this.selected != null;
+    },
+
+    _checkFallback: function() {
+      if (this._shouldUpdateSelection) {
+        this._updateSelected();
+      }
+    },
+
+    _addListener: function(eventName) {
+      this.listen(this, eventName, '_activateHandler');
+    },
+
+    _removeListener: function(eventName) {
+      this.unlisten(this, eventName, '_activateHandler');
+    },
+
+    _activateEventChanged: function(eventName, old) {
+      this._removeListener(old);
+      this._addListener(eventName);
+    },
+
+    _updateItems: function() {
+      var nodes = Polymer.dom(this).queryDistributedElements(this.selectable || '*');
+      nodes = Array.prototype.filter.call(nodes, this._bindFilterItem);
+      this._setItems(nodes);
+    },
+
+    _updateSelected: function() {
+      this._selectSelected(this.selected);
+    },
+
+    _selectSelected: function(selected) {
+      this._selection.select(this._valueToItem(this.selected));
+      // Check for items, since this array is populated only when attached
+      // Since Number(0) is falsy, explicitly check for undefined
+      if (this.fallbackSelection && this.items.length && (this._selection.get() === undefined)) {
+        this.selected = this.fallbackSelection;
+      }
+    },
+
+    _filterItem: function(node) {
+      return !this._excludedLocalNames[node.localName];
+    },
+
+    _valueToItem: function(value) {
+      return (value == null) ? null : this.items[this._valueToIndex(value)];
+    },
+
+    _valueToIndex: function(value) {
+      for (var i = 0, item; item = this.items[i]; i++) {
+        if (this._valueForItem(item) == value) {
+          return i;
+        }
+      }
+    },
+
+    _indexToValue: function(index) {
+      var item = this.items[index];
+      if (item) {
+        return this._valueForItem(item);
+      }
+    },
+
+    _valueForItem: function(item) {
+      return item.getAttribute("name") || item["name"];
+    },
+
+    _applySelection: function(item, isSelected) {
+      if (this.selectedClass) {
+        this.toggleClass(this.selectedClass, isSelected, item);
+      }
+      if (this.selectedAttribute) {
+        this.toggleAttribute(this.selectedAttribute, isSelected, item);
+      }
+      this._selectionChange();
+      this.fire('iron-' + (isSelected ? 'select' : 'deselect'), {item: item});
+    },
+
+    _selectionChange: function() {
+      this._setSelectedItem(this._selection.get());
+    },
+
+    // observe items change under the given node.
+    _observeItems: function(node) {
+      return Polymer.dom(node).observeNodes(function(mutation) {
+        this._updateItems();
+
+        if (this._shouldUpdateSelection) {
+          this._updateSelected();
+        }
+
+        // Let other interested parties know about the change so that
+        // we don't have to recreate mutation observers everywhere.
+        this.fire('iron-items-changed', mutation, {
+          bubbles: false,
+          cancelable: false
+        });
+      });
+    },
+
+    _activateHandler: function(e) {
+      var t = e.target;
+      var items = this.items;
+      while (t && t != this) {
+        var i = items.indexOf(t);
+        if (i >= 0) {
+          var value = this._indexToValue(i);
+          this._itemActivate(value, t);
+          return;
+        }
+        t = t.parentNode;
+      }
+    },
+
+    _itemActivate: function(value, item) {
+      if (!this.fire('iron-activate',
+          {selected: value, item: item}, {cancelable: true}).defaultPrevented) {
+        this.select(value);
+      }
+    }
+
+  };
+
+</script>
diff --git a/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selector.html b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selector.html
new file mode 100644
index 00000000..d2cde4c1
--- /dev/null
+++ b/rpg-docs/public/custom_components/dicecloud-selector/dicecloud-selector.html
@@ -0,0 +1,24 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="dicecloud-selectable.html">
+
+<script>
+// jscs:disable
+  /**
+  `dicecloud-selector` implements DicecloudSelectableBehavior
+  behaves like a simple iron-selector
+  - No multi-select
+  - Assumes attrForSelected = "name"
+  - Behaves a little better with Blaze
+  */
+
+  Polymer({
+
+    is: 'dicecloud-selector',
+
+    behaviors: [
+      Polymer.DicecloudSelectableBehavior
+    ]
+
+  });
+
+</script>