Updated hitpoint / temporary hitpoint box to Polymer 1

2017-01-18 11:19:03 +02:00
parent 420de9b005
commit 817020bea8
10 changed files with 818 additions and 616 deletions
--- a/rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.html
+++ b/rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.html
@@ -1,14 +1,28 @@
 <!-- data just needs charId -->
 <template name="addTHPDialog">
-	<div style="width: 200px; height: 150px;">
-		<paper-input id="nameInput" label="Label"></paper-input>
-		<paper-input-decorator label="Quantity" floatinglabel>
-			<input autoFocus id="quantityInput" type="number" value="10">
-		</paper-input-decorator>
-		<div layout horizontal justify-center>
-			Delete when zero <paper-checkbox id="deleteWhenZeroCheckbox" checked style="margin-left: 8px;"></paper-checkbox>
+	<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>Add Hitpoint Slider</div>
+				</app-toolbar>
+			</app-header>
+			<div class="form">
+				<paper-input id="quantityInput" label="Hitpoint maximum" autoFocus type="number" value="" min="0" allowed-pattern="[0-9]">
+				</paper-input>
+				<paper-input id="nameInput" label="Label"></paper-input>
+				<paper-checkbox id="deleteWhenZeroCheckbox">
+					Delete when zero
+				</paper-checkbox>
+			</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>
--- a/rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.js
+++ b/rpg-docs/client/views/character/stats/addTHPDialog/addTHPDialog.js
@@ -1,5 +1,10 @@
+Template.addTHPDialog.onRendered(function(){
+	this.find("#quantityInput").focus();
+});
+
 Template.addTHPDialog.events({
-	"tap #addButton": function(event, instance){
+	"tap .addButton": function(event, instance){
+		popDialogStack();
 		var max = +instance.find("#quantityInput").value;
 		if (!max || max < 0) max = 0;
 		TemporaryHitPoints.insert({
@@ -8,5 +13,8 @@ Template.addTHPDialog.events({
 			maximum: max,
 			deleteOnZero: !!instance.find("#deleteWhenZeroCheckbox").checked,
 		});
-	}
+	},
+	"tap .cancelButton": function(event, instance){
+		popDialogStack();
+	},
 });
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.css
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.css
@@ -3,24 +3,20 @@
 	margin-right: 8px;
 }

-/*Slider knob color*/
-#hitPointSlider::shadow #sliderKnobInner {
-	background-color: #0f9d58;
+.healthCard #stableButton {
+	color: #b71c1c;
+	transition: color 0.4s ease;
+	width: 100%
 }

-/*Slider pin*/
-#hitPointSlider::shadow #sliderKnobInner::before {
-	background-color: #0f9d58;
-	height: 32px;
-	width: 32px;
+.healthCard #stableButton:before {
+	content: "Unstable";
 }

-/*Slider pin text*/
-#hitPointSlider::shadow #sliderKnob > #sliderKnobInner::after {
-	font-size: 16px;
+.healthCard #stableButton.stable {
+	color: #1b5e20;
 }

-/*Slider bar*/
-#hitPointSlider::shadow #sliderBar::shadow #activeProgress {
-	background-color: #0f9d58;
+.healthCard #stableButton.stable:before{
+	content: "Stable";
 }
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.html
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.html
@@ -22,21 +22,21 @@
 			{{#each tempHitPoints}}
 				<div>
 					{{name}}
-					<div class="layout horizontal">
-					<paper-diff-slider class="tempHitPointSlider"
+				</div>
+				<div class="layout horizontal center">
+					<div style="height: 40px; width: 40px;">
+						{{#unless left}}
+							<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
+						{{/unless}}
+					</div>
+					<paper-diff-slider class="tempHitPointSlider flex"
 							  value={{left}}
 							  max={{maximum}}
 							  editable pin
-							  role="slider"
-							  flex
 							  ></paper-diff-slider>
-					{{#unless left}}
-						<paper-icon-button class="deleteTHP" icon="delete"></paper-icon-button>
-					{{/unless}}
 				</div>
-			</div>
 			{{/each}}
-			<div class="caption">
+			<div class="paper-font-caption">
 				{{#if multipliers.immunities.length}}
 					<div>
 						Immune:     {{#each multipliers.immunities}}  {{name}} {{/each}}
@@ -68,15 +68,12 @@
 									<paper-icon-button class="slotBubble failBubble" icon={{failIcon 3}} disabled={{failDisabled 3}}></paper-icon-button>
 								</div>
 							</div>
-							<div class="layout horizontal center center-justified" style="min-width: 94px">
+							<div class="layout horizontal center center-justified" style="width: 94px">
 								{{#if dead}}
 									DEAD
 								{{else}}
-									{{#if stable}}
-										<paper-button id="stableButton">Stable</paper-button>
-									{{else}}
-										<paper-button id="unstableButton">Unstable</paper-button>
-									{{/if}}
+								<paper-button id="stableButton" class="{{#if stable}}stable{{/if}}">
+								</paper-button>
 								{{/if}}
 							</div>
 							<div layout vertical center>
--- a/rpg-docs/client/views/character/stats/healthCard/healthCard.js
+++ b/rpg-docs/client/views/character/stats/healthCard/healthCard.js
@@ -10,12 +10,12 @@ Template.healthCard.helpers({
 		return char && char.deathSave;
 	},
 	failIcon: function(num){
-		if (num <= this.fail) return "radio-button-on";
-		else return "radio-button-off";
+		if (num <= this.fail) return "radio-button-checked";
+		else return "radio-button-unchecked";
 	},
 	passIcon: function(num){
-		if (num <= this.pass) return "radio-button-on";
-		else return "radio-button-off";
+		if (num <= this.pass) return "radio-button-checked";
+		else return "radio-button-unchecked";
 	},
 	failDisabled: function(num){
 		return !(num === this.fail || num - 1 === this.fail);
@@ -27,6 +27,7 @@ Template.healthCard.helpers({
 		return this.fail >= 3;
 	},
 	multipliers: function(){
+		// jscs:disable maximumLineLength
 		var multipliers = [
 			{name: "Acid",        value: Characters.calculate.attributeValue(this._id, "acidMultiplier")},
 			{name: "Bludgeoning", value: Characters.calculate.attributeValue(this._id, "bludgeoningMultiplier")},
@@ -42,6 +43,7 @@ Template.healthCard.helpers({
 			{name: "Slashing",    value: Characters.calculate.attributeValue(this._id, "slashingMultiplier")},
 			{name: "Thunder",     value: Characters.calculate.attributeValue(this._id, "thunderMultiplier")},
 		];
+		// jscs:enable maximumLineLength
 		multipliers = _.groupBy(multipliers, "value");
 		return {
 			"immunities": multipliers["0"] || [],
@@ -54,7 +56,7 @@ Template.healthCard.helpers({
 Template.healthCard.events({
 	"change #hitPointSlider": function(event){
 		var value = event.currentTarget.value;
-		var base = Characters.calculate.attributeBase(this._id, "hitPoints")
+		var base = Characters.calculate.attributeBase(this._id, "hitPoints");
 		var adjustment = value - base;
 		Characters.update(this._id, {$set: {"hitPoints.adjustment": adjustment}});
 		//reset the death saves if we are gaining HP
@@ -73,39 +75,42 @@ Template.healthCard.events({
 		var used = this.maximum - value;
 		TemporaryHitPoints.update(this._id, {$set: {"used": used}});
 	},
-	"tap .deleteTHP": function(event){
+	"click .deleteTHP": function(event){
 		TemporaryHitPoints.remove(this._id);
 	},
-	"tap #addTempHP": function(event){
-		GlobalUI.showDialog({
+	"click #addTempHP": function(event){
+		pushDialogStack({
 			template: "addTHPDialog",
 			data: {charId: this._id},
+			element: event.currentTarget.parentElement,
 		});
 	},
-	"tap .failBubble": function(event){
+	"click .failBubble": function(event){
 		if (event.currentTarget.disabled) return;
 		var char = Template.parentData();
-		if (event.currentTarget.icon === "radio-button-off"){
+		if (event.currentTarget.icon === "radio-button-unchecked"){
 			Characters.update(char._id, {$set: {"deathSave.fail": this.fail + 1}});
 		} else {
 			Characters.update(char._id, {$set: {"deathSave.fail": this.fail - 1}});
 		}
 	},
-	"tap .passBubble": function(event){
+	"click .passBubble": function(event){
 		if (event.currentTarget.disabled) return;
 		var char = Template.parentData();
-		if (event.currentTarget.icon === "radio-button-off"){
+		if (event.currentTarget.icon === "radio-button-unchecked"){
 			Characters.update(char._id, {$set: {"deathSave.pass": this.pass + 1}});
 		} else {
 			Characters.update(char._id, {$set: {"deathSave.pass": this.pass - 1}});
 		}
 	},
-	"tap #stableButton": function(event){
-		var char = Template.parentData();
-		Characters.update(char._id, {$set: {"deathSave.stable": false}});
-	},
-	"tap #unstableButton": function(event){
-		var char = Template.parentData();
-		Characters.update(char._id, {$set: {"deathSave.stable": true}});
+	"click #stableButton": function(event){
+		var char = Characters.findOne(Template.parentData()._id, {
+			fields: {deathSave: 1}
+		});
+		Characters.update(char._id, {
+			$set: {
+				"deathSave.stable": !char.deathSave.stable
+			}
+		});
 	},
 });
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -28,6 +28,7 @@
 	<link rel="import" href="/components/neon-animation/neon-animations.html">

 	<link rel="import" href="/components/paper-button/paper-button.html">
+	<link rel="import" href="/components/paper-checkbox/paper-checkbox.html">
 	<link rel="import" href="/components/paper-dialog/paper-dialog.html">
 	<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
 	<link rel="import" href="/components/paper-fab/paper-fab.html">
@@ -43,5 +44,6 @@
 	<link rel="import" href="/components/paper-tabs/paper-tabs.html">
 	<link rel="import" href="/components/paper-toast/paper-toast.html">

+	<link rel="import" href="/custom_components/paper-diff-slider/paper-diff-slider.html">
 	<link rel="import" href="/custom_components/app-theme.html">
 </head>
--- a/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
+++ b/rpg-docs/client/views/paperTemplates/dialogStack/dialogStack.css
@@ -29,6 +29,8 @@
 	position: relative;
 	height: 80%;
 	width: 80%;
+	max-width: 800px;
+	max-height: 600px;
 }

 .dialog-stack .dialog {