Generalised some dialogs

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.html

@@ -0,0 +1,23 @@
+<template name="baseDialog">
+	<core-header-panel fit>
+		<core-toolbar class={{class}} hero-id="toolbar" hero>
+			<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
+			<div flex>{{title}}</div>
+			{{#if hideColor}}{{else}}
+				<!--color-->
+				{{> colorDropdown}}
+			{{/if}}
+			{{#if hideDelete}}{{else}}
+			<paper-icon-button id="deleteButton" 
+							   role="button"
+							   tabindex="0"
+							   icon="delete" 
+							   aria-label="Delete Feature" 
+							   noink></paper-icon-button>
+			{{/if}}
+		</core-toolbar>
+		<div class="detailContent">
+			{{> UI.contentBlock}}
+		</div>
+	</core-header-panel>
+</template>

rpg-docs/client/views/paperTemplates/baseDialog/baseDialog.js

@@ -0,0 +1,24 @@
+Template.baseDialog.rendered = function(){
+	var self = this;
+	//update all autogrows after they've been filled
+	var pata = this.$("paper-autogrow-textarea");
+	pata.each(function(index, el){
+		el.update($(el).children().get(0));
+	})
+	//update all input fields as well
+	var input = this.$("paper-input");
+	input.each(function(index, el){
+		el.valueChanged();
+	})
+	//after the dialog is built, open it
+	if (!this.alreadyRendered){
+		Session.set("global.ui.detailShow", true);
+		this.alreadyRendered = true;
+	}
+}
+
+Template.baseDialog.events({
+	"tap #backButton": function(){
+		GlobalUI.closeDetail()
+	}
+});

rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.html

@@ -1,4 +1,4 @@
-<template name="colorDropdown">
+<template name="colorDropdownOld">
 	<paper-dropdown-menu class="colorDropdown {{colorClass color}}" label="Color">
 		<paper-dropdown layered class="dropdown">
 			<core-menu class="menu"  selected={{color}}>
@@ -9,3 +9,16 @@
 		</paper-dropdown>
 	</paper-dropdown-menu>
 </template>
+
+<template name="colorDropdown">
+	<paper-menu-button id="colorDropdown">
+		<paper-icon-button icon="editor:format-paint" noink></paper-icon-button>
+		<paper-dropdown class="dropdown">
+			<core-menu class="menu">
+				{{#each colors}}
+					<paper-item name={{key}} class="colorMenuItem {{colorClass key}}">{{className}}</paper-item>
+				{{/each}}
+			</core-menu>
+		</paper-dropdown>
+	</paper-menu-button>
+</template>

rpg-docs/client/views/paperTemplates/colorDropdown/colorDropdown.js

@@ -3,3 +3,13 @@ Template.colorDropdown.helpers({
 		return colorOptions;
 	}
 });
+
+Template.colorDropdown.events({
+	"tap .colorMenuItem": function(event, instance){
+		var color = event.currentTarget.getAttribute("name");
+		instance.$("#colorDropdown").trigger({
+			type: "color-change",
+			color: color
+		});
+	}
+})