From 03cb32bf34b5fb5022daee7ac5f1e36d5ec486d2 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 31 Jan 2017 13:36:15 +0200
Subject: [PATCH] Updated color dropdown to Polymer 1 paper-swatch-picker

---
 rpg-docs/bower.json                           |  3 ++-
 rpg-docs/client/style/colors.css              |  6 ++++-
 .../client/views/layout/polymerImports.html   |  1 +
 .../colorDropdown/colorDropdown.html          | 10 ++------
 .../colorDropdown/colorDropdown.js            | 25 ++++++++++++++-----
 rpg-docs/lib/constants/colorOptions.js        |  2 +-
 .../public/custom_components/app-theme.html   |  7 ++++++
 7 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/rpg-docs/bower.json b/rpg-docs/bower.json
index fa6aa300..14fe4745 100644
--- a/rpg-docs/bower.json
+++ b/rpg-docs/bower.json
@@ -21,7 +21,8 @@
     "neon-elements": "PolymerElements/neon-elements#^1.0.0",
     "paper-elements": "PolymerElements/paper-elements#^1.0.7",
     "app-elements": "PolymerElements/app-elements#^0.10.1",
-    "marked-element": "PolymerElements/marked-element#^1.2.0"
+    "marked-element": "PolymerElements/marked-element#^1.2.0",
+    "paper-swatch-picker": "PolymerElements/paper-swatch-picker#~1.0.2"
   },
   "resolutions": {
     "webcomponentsjs": "0.7.23"
diff --git a/rpg-docs/client/style/colors.css b/rpg-docs/client/style/colors.css
index 6f501aa9..04aa90a2 100644
--- a/rpg-docs/client/style/colors.css
+++ b/rpg-docs/client/style/colors.css
@@ -70,6 +70,10 @@
 	background-color: #9E9E9E;
 }
 
+.blue-grey {
+	background-color: #607D8B;
+}
+
 .app-grey {
 	background-color: #424242;
 }
@@ -80,4 +84,4 @@
 
 .black {
 	background-color: #262626;
-}
\ No newline at end of file
+}
diff --git a/rpg-docs/client/views/layout/polymerImports.html b/rpg-docs/client/views/layout/polymerImports.html
index 400d5dae..0e36303f 100644
--- a/rpg-docs/client/views/layout/polymerImports.html
+++ b/rpg-docs/client/views/layout/polymerImports.html
@@ -30,6 +30,7 @@
 	<link rel="import" href="/components/neon-animation/neon-animation.html">
 
 	<link rel="import" href="/components/paper-button/paper-button.html">
+	<link rel="import" href="/components/paper-swatch-picker/paper-swatch-picker.html">
 	<!--<link rel="import" href="/components/paper-checkbox/paper-checkbox.html"> Using custom one instead -->
 	<link rel="import" href="/components/paper-dialog/paper-dialog.html">
 	<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
index 0358e099..a1e756f0 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html
@@ -1,10 +1,4 @@
 <template name="colorDropdown">
-	<paper-menu-button class="colorDropdown" horizontal-align="right" dynamic-align>
-		<paper-icon-button icon="editor:format-paint" class="dropdown-trigger"></paper-icon-button>
-		<paper-menu class="dropdown-content" attr-for-selected="name" selected={{color}}>
-			{{#each colors}}
-				<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
-			{{/each}}
-		</paper-menu>
-	</paper-menu-button>
+	<paper-swatch-picker column-count="5" horizontal-align="right" color-list={{colors}} color={{selectedColor}}>
+	</paper-swatch-picker>
 </template>
diff --git a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
index 1c3e384c..e6fa01b0 100644
--- a/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
+++ b/rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js
@@ -1,15 +1,28 @@
 Template.colorDropdown.helpers({
 	colors: function(){
-		return colorOptions;
-	}
+		let colors = "";
+		_.each(colorOptions, (option) => {
+			colors += !colors ? `["${option.color}"` : `, "${option.color}"`;
+		});
+		colors += "]";
+		return colors;
+	},
+	selectedColor: function(){
+		const selected = _.find(colorOptions, (option) => option.key === this.color);
+		return selected && selected.color;
+	},
 });
 
 Template.colorDropdown.events({
-	"click paper-item": function(event, instance){
-		var color = event.currentTarget.getAttribute("name");
-		instance.$(".colorDropdown").trigger({
+	"color-picker-selected": function(event, instance){
+		var color = event.originalEvent.detail.color;
+		var option = _.find(colorOptions, (option) => {
+			return option.color === color.toUpperCase()}
+		);
+		var key = option && option.key;
+		instance.$("paper-swatch-picker").trigger({
 			type: "color-change",
-			color: color,
+			color: key,
 		});
 	}
 });
diff --git a/rpg-docs/lib/constants/colorOptions.js b/rpg-docs/lib/constants/colorOptions.js
index 8f5d3bea..e6937a44 100644
--- a/rpg-docs/lib/constants/colorOptions.js
+++ b/rpg-docs/lib/constants/colorOptions.js
@@ -16,7 +16,7 @@ colorOptions = [
 	{key: "o", className: "orange", whiteText: false, color: "#FF9800"},
 	{key: "p", className: "deep-orange", whiteText: true, color: "#FF5722"},
 	{key: "q", className: "grey", whiteText: true, color: "#9E9E9E"}, //spec says no white text
-	//{key: "r", className: "blue-grey", whiteText: true, color: "#607D8B"},
+	{key: "r", className: "blue-grey", whiteText: true, color: "#607D8B"},
 	{key: "s", className: "brown", whiteText: true, color: "#795548"},
 	{key: "t", className: "black", whiteText: true, color: "#000000"},
 ];
diff --git a/rpg-docs/public/custom_components/app-theme.html b/rpg-docs/public/custom_components/app-theme.html
index 5105b1b4..1b90d2a2 100644
--- a/rpg-docs/public/custom_components/app-theme.html
+++ b/rpg-docs/public/custom_components/app-theme.html
@@ -53,4 +53,11 @@
 		--iron-icon-width: 23px;
 		--iron-icon-height: 23px;
 	}
+	paper-swatch-picker {
+		--paper-swatch-picker-color-size: 24px;
+		--paper-swatch-picker-icon: {
+			color: #dedede !important;
+			color: rgba(255,255,255,0.87) !important;
+		}
+	}
 </style>