From a67b13f6592fcd21a720fd8cbe13f3ebb3ad72d1 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 13 Jan 2017 13:21:42 +0200
Subject: [PATCH] Updated feedback form to Polymer 1

---
 rpg-docs/Model/Meta/Reports.js                |  4 +-
 .../client/views/character/characterSheet.css |  2 +-
 rpg-docs/client/views/feedback/feedback.css   |  7 ++
 rpg-docs/client/views/feedback/feedback.html  | 74 ++++++++++---------
 rpg-docs/client/views/feedback/feedback.js    | 11 ++-
 rpg-docs/client/views/layout/layout.css       |  4 +
 rpg-docs/client/views/layout/layout.js        | 13 +++-
 .../client/views/layout/polymerImports.html   |  7 ++
 .../public/custom_components/app-theme.html   |  1 +
 9 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 rpg-docs/client/views/feedback/feedback.css

diff --git a/rpg-docs/Model/Meta/Reports.js b/rpg-docs/Model/Meta/Reports.js
index ac0679e3..21ac4fe7 100644
--- a/rpg-docs/Model/Meta/Reports.js
+++ b/rpg-docs/Model/Meta/Reports.js
@@ -17,8 +17,8 @@ Schemas.Report = new SimpleSchema({
 	},
 	type: {
 		type: String,
-		allowedValues: ["bug", "change", "feature", "general"],
-		defaultValue: "bug",
+		allowedValues: ["General Feedback", "Bug", "Suggested Change", "Feature Request"],
+		defaultValue: "General Feedback",
 	},
 	//the immediate impact of doing this action (eg. -1 rages)
 	severity: {
diff --git a/rpg-docs/client/views/character/characterSheet.css b/rpg-docs/client/views/character/characterSheet.css
index b44b8881..96c4f398 100644
--- a/rpg-docs/client/views/character/characterSheet.css
+++ b/rpg-docs/client/views/character/characterSheet.css
@@ -1,4 +1,4 @@
-paper-tabs, app-toolbar {
+paper-tabs {
 	box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
 }
 
diff --git a/rpg-docs/client/views/feedback/feedback.css b/rpg-docs/client/views/feedback/feedback.css
new file mode 100644
index 00000000..fea6940f
--- /dev/null
+++ b/rpg-docs/client/views/feedback/feedback.css
@@ -0,0 +1,7 @@
+.feedback .form {
+	padding: 24px;
+}
+
+.feedback .buttons {
+	padding: 8px 8px 8px 24px;
+}
diff --git a/rpg-docs/client/views/feedback/feedback.html b/rpg-docs/client/views/feedback/feedback.html
index faba2274..53d6731d 100644
--- a/rpg-docs/client/views/feedback/feedback.html
+++ b/rpg-docs/client/views/feedback/feedback.html
@@ -1,37 +1,43 @@
 <template name="feedback">
-	<div class="feedback" style="min-width: 300px; min-height: 370px">
-		<div>
-			<paper-input id="feedbackTitle" label="Title" floatinglabel></paper-input>
+	<div class="fit layout vertical">
+		<app-header-layout has-scrolling-region class="feedback flex">
+			<app-header fixed effects="waterfall">
+				<app-toolbar>
+				  <div main-title>Feedback</div>
+				</app-toolbar>
+			</app-header>
+			<div class="form flex">
+				<div>
+					<paper-input id="feedbackTitle" label="Title" floatinglabel required></paper-input>
+				</div>
+				<div>
+					<paper-dropdown-menu label="Type" class="typeMenu">
+						<paper-listbox class="dropdown-content"  selected="0">
+							<paper-item label="General Feedback"> General Feedback </paper-item>
+							<paper-item label="Bug">			  Bug              </paper-item>
+							<paper-item label="Suggested Change"> Suggested Change </paper-item>
+							<paper-item label="Feature Request">  Feature Request  </paper-item>
+						</paper-listbox>
+					</paper-dropdown-menu>
+				</div>
+				<div class="layout horizontal">
+					<div class="paper-font-caption">not important</div>
+					<paper-slider id="severity" class="flex" max=10 min=1 value=5 snap></paper-slider>
+					<div class="paper-font-caption">important</div>
+				</div>
+				<paper-textarea label="Description" id="feedbackDescription" required></paper-textarea>
+			</div>
+		</app-header-layout>
+		<div class="buttons layout horizontal end-justified">
+			<paper-button id="cancelButton"
+						  affirmative>
+				Cancel
+			</paper-button>
+			<paper-button id="sendButton"
+						  affirmative
+						  disabled={{invalid}}>
+				Send
+			</paper-button>
 		</div>
-		<div>
-			<paper-dropdown-menu class="typeDropdown" label="Operation" flex>
-				<paper-dropdown layered class="dropdown">
-					<core-menu class="menu typeMenu" selected="general">
-						<paper-item name="general">General Feedback</paper-item>
-						<paper-item name="bug">Bug</paper-item>
-						<paper-item name="change">Suggested Change</paper-item>
-						<paper-item name="feature">Feature Request</paper-item>
-					</core-menu>
-				</paper-dropdown>
-			</paper-dropdown-menu>
-		</div>
-		<div layout horizontal center>
-			<div>Importance</div>
-			<paper-slider id="severity" max=10 min=1 value=5 snap></paper-slider>
-		</div>
-		<paper-input-decorator label="Description" floatinglabel layout vertical>
-			<paper-autogrow-textarea rows=10 maxRows=10>
-				<textarea id="feedbackDescription"></textarea>
-			</paper-autogrow-textarea>
-		</paper-input-decorator>
 	</div>
-	<paper-button id="cancelButton"
-				  affirmative>
-		Cancel
-	</paper-button>
-	<paper-button id="sendButton"
-				  affirmative
-				  disabled={{invalid}}>
-		Send
-	</paper-button>
-</template>
\ No newline at end of file
+</template>
diff --git a/rpg-docs/client/views/feedback/feedback.js b/rpg-docs/client/views/feedback/feedback.js
index fd2ceb29..ee3db5da 100644
--- a/rpg-docs/client/views/feedback/feedback.js
+++ b/rpg-docs/client/views/feedback/feedback.js
@@ -18,16 +18,19 @@ Template.feedback.events({
 	"input #feedbackDescription": function(event, instance) {
 		instance.description.set(instance.find("#feedbackDescription").value);
 	},
-	"tap #sendButton": function(event, instance) {
+	"click #sendButton": function(event, instance) {
 		var report = {};
 		report.title = instance.find("#feedbackTitle").value;
 		report.severity = instance.find("#severity").value;
-		report.type = instance.find(".typeMenu").selected;
+		report.type = instance.find(".typeMenu").value;
 		report.description = instance.find("#feedbackDescription").value;
 		report.metaData = {
 			url: window.location.href,
 			session: _.pairs(Session.keys),
 		};
-		Meteor.call("insertReport", report);
-	}
+		popDialogStack(report);
+	},
+	"click #cancelButton": function(event, template){
+		popDialogStack();
+	},
 });
diff --git a/rpg-docs/client/views/layout/layout.css b/rpg-docs/client/views/layout/layout.css
index 735a9bd5..d10d994b 100644
--- a/rpg-docs/client/views/layout/layout.css
+++ b/rpg-docs/client/views/layout/layout.css
@@ -16,6 +16,10 @@
 	padding: 16px;
 }
 
+#navPanel paper-icon-item {
+	background: white;
+}
+
 .layout > core-header-panel {
 	height: 100%;
 }
diff --git a/rpg-docs/client/views/layout/layout.js b/rpg-docs/client/views/layout/layout.js
index bad9c551..69edbf8e 100644
--- a/rpg-docs/client/views/layout/layout.js
+++ b/rpg-docs/client/views/layout/layout.js
@@ -38,10 +38,17 @@ Template.layout.events({
 		closeDrawer(instance);
 	},
 	"tap #feedback": function(event, instance) {
-		GlobalUI.showDialog({
-			heading: "Feedback",
+		pushDialogStack({
 			template: "feedback",
-			fullOnMobile: true,
+			element: event.currentTarget,
+			callback: function(report){
+				if (!report) return;
+				Meteor.call("insertReport", report, function(e, result){
+					GlobalUI.toast({
+						text: e && e.details || "Feedback submitted"
+					});
+				});
+			}
 		});
 		closeDrawer(instance);
 	},
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index c362fa8b..b325464f 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -7,6 +7,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/iron-icon/iron-icon.html">
 <!--<link rel="import" href="/components/iron-icons/av-icons.html">-->
@@ -24,11 +25,17 @@
 	<link rel="import" href="/components/neon-animation/neon-animation.html">
 	<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-dialog/paper-dialog.html">
+	<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
 	<link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
+	<link rel="import" href="/components/paper-input/paper-input.html">
+	<link rel="import" href="/components/paper-input/paper-textarea.html">
 	<link rel="import" href="/components/paper-item/all-imports.html">
+	<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-slider/paper-slider.html">
 	<link rel="import" href="/components/paper-tabs/paper-tabs.html">
 	<link rel="import" href="/components/paper-toast/paper-toast.html">
 
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index 3004f5b0..f9c0b0f1 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -1,5 +1,6 @@
 <link rel="import" href="../components/polymer/polymer.html">
 <link rel="import" href="../components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../components/paper-styles/classes/typography.html">
 
 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning">