Updated color dropdown to Polymer 1 paper-swatch-picker

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;
-}
+}

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">

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>

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,
 		});
 	}
 });