Updated the new character dialog to Polymer 1

rpg-docs/client/style/main.scss

@@ -18,16 +18,6 @@ body {
 	background-color: #E0E0E0;
 }
 
-//fix tabs and core-toolbar having box shadow
-core-toolbar {
-	box-shadow: none;
-}
-
-//give drawer panel a shadow always
-core-header-panel[drawer] {
-	box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.2);
-}
-
 //Paragraphs
 p {
 	margin-bottom: 8px;
@@ -77,6 +67,10 @@ paper-icon-item::shadow #contentIcon {
 	right: 24px;
 }
 
+paper-fab {
+	background-color: #d13b2e;
+}
+
 //Buttons
 paper-button {
 	color: #000;

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

@@ -1,40 +1,27 @@
 <template name="newCharacterDialog">
-	<div>
-		<paper-input id="nameInput" label="Name"></paper-input><br>
-		<paper-input id="genderInput" label="Gender"></paper-input><br>
-		<paper-input id="raceInput" label="Race"></paper-input>
-		<!--
-		<div>
-			<div layout horizontal center-justified>
-				{{pointsUsed}}/<paper-input-decorator><input type="number" value="27"></paper-input-decorator>
-			</div>
-			<div layout horizontal wrap>
-				<div>Strength</div>
-				<paper-slider id="strSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
-			</div>
-			<div layout horizontal wrap>
-				<div>Dexterity</div>
-				<paper-slider id="dexSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
-			</div>
-			<div layout horizontal wrap>
-				<div>Constitution</div>
-				<paper-slider id="conSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
-			</div>
-			<div layout horizontal wrap>
-				<div>Intelligence</div>
-				<paper-slider id="intSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
-			</div>
-			<div layout horizontal wrap>
-				<div>Wisdom</div>
-				<paper-slider id="wisSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
-			</div>
-			<div layout horizontal wrap>
-				<div>Charisma</div>
-				<paper-slider id="chaSlider" min="8" max="15" value="8" secondaryProgress={{secondaryProgress}}></paper-slider>
+	<div class="fit layout vertical">
+		<app-header-layout has-scrolling-region class="new-character-dialog flex">
+			<app-header fixed effects="waterfall">
+				<app-toolbar>
+				  <div main-title>New Character</div>
+				</app-toolbar>
+			</app-header>
+			<div class="form">
+				<p>
+					Input the basics of your character, but don't worry, you can always change these values later
+				</p>
+				<paper-input class="nameInput" label="Name" {{errorAtts "name"}}></paper-input><br>
+				<paper-input class="genderInput" label="Gender" {{errorAtts "gender"}}></paper-input><br>
+				<paper-input class="raceInput" label="Race" {{errorAtts "race"}}></paper-input>
 			</div>
+		</app-header-layout>
+		<div class="buttons layout horizontal end-justified">
+			<paper-button class="cancelButton">
+				Cancel
+			</paper-button>
+			<paper-button class="addButton" disabled={{invalid}}>
+				Add
+			</paper-button>
 		</div>
-		-->
 	</div>
-	<paper-button id="cancelButton" affirmative> Cancel </paper-button>
-	<paper-button id="addButton"    affirmative> Add    </paper-button>
-</template>
+</template>

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

@@ -1,13 +1,49 @@
-Template.newCharacterDialog.events({
-	"tap #addButton": function(event, instance){
-		Characters.insert({
-			name: instance.find("#nameInput").value,
-			gender: instance.find("#genderInput").value,
-			race: instance.find("#raceInput").value,
-			owner: Meteor.userId(),
-		}, function(err, id){
-			if (err) throw err;
-			Router.go("characterSheet", {_id: id});
-		});
-	}
+Template.newCharacterDialog.onCreated(function(){
+	this.character = {};
+	this.schema = new SimpleSchema({
+		//strings
+		name:      {type: String},
+		gender:    {type: String, optional: true},
+		race:      {type: String, optional: true},
+	});
+	this.context = this.schema.newContext();
+	this.context.runOnce = false;
+});
+
+Template.newCharacterDialog.helpers({
+	invalid(){
+		let context = Template.instance().context;
+		let valid = context.isValid() && context.runOnce;
+		return !valid;
+	},
+	errorAtts(key){
+		let error = Template.instance().context.keyErrorMessage(key);
+		if (error){
+			return {
+				invalid: true,
+				["error-message"]: error,
+			}
+		}
+	},
+});
+
+changeFunction = function(field){
+	return _.debounce(function(event, instance){
+		instance.character[field] = event.currentTarget.value;
+		instance.schema.clean(instance.character);
+		instance.context.validate(instance.character);
+		if (!instance.context.runOnce) instance.context.runOnce = true;
+	}, 200);
+};
+
+Template.newCharacterDialog.events({
+	"input .nameInput": changeFunction("name"),
+	"input .genderInput": changeFunction("gender"),
+	"input .raceInput": changeFunction("race"),
+	"click .cancelButton": function(event, instance){
+		popDialogStack();
+	},
+	"click .addButton": function(event, instance){
+		popDialogStack(instance.character);
+	},
 });

rpg-docs/client/views/characterList/characterList.html

@@ -51,11 +51,7 @@
 			<div class="fab-buffer"></div>
 			<paper-fab class="floatyButton addCharacter"
 					   icon="add"
-					   title="Add"
-					   role="button"
-					   tabindex="0"
-					   aria-label="Add"
-					   hero-id="main"></paper-fab>
+					   title="Add"></paper-fab>
 		</div>
 	</app-header-layout>
 </template>

rpg-docs/client/views/characterList/characterList.js

@@ -22,9 +22,15 @@ Template.characterList.helpers({
 
 Template.characterList.events({
 	"tap .addCharacter": function(event, template) {
-		GlobalUI.showDialog({
-			heading: "New Character",
+		pushDialogStack({
 			template: "newCharacterDialog",
-		});
+			element: event.currentTarget,
+			callback(character){
+				if (!character) return;
+				character.owner = Meteor.userId();
+				let _id = Characters.insert(character);
+				Router.go("characterSheet", {_id});
+			},
+		})
 	},
 });

rpg-docs/client/views/feedback/feedback.css

@@ -1,7 +0,0 @@
-.feedback .form {
-	padding: 24px;
-}
-
-.feedback .buttons {
-	padding: 8px 8px 8px 24px;
-}

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

@@ -50,3 +50,11 @@
 	background: red;
 	border-radius: 30px;
 }
+
+.dialog-stack .dialog .form {
+	padding: 24px;
+}
+
+.dialog-stack .dialog .buttons {
+	padding: 8px 8px 8px 24px;
+}