Updated color dropdown to Polymer 1 paper-swatch-picker

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"

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-swatch-picker column-count="5" horizontal-align="right" color-list={{colors}} color={{selectedColor}}>
-		<paper-icon-button icon="editor:format-paint" class="dropdown-trigger"></paper-icon-button>
+	</paper-swatch-picker>
-		<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>
 </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){
+	"color-picker-selected": function(event, instance){
-		var color = event.currentTarget.getAttribute("name");
+		var color = event.originalEvent.detail.color;
-		instance.$(".colorDropdown").trigger({
+		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,
 		});
 	}
 });

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"},
 ];

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>