Added color options for containers, added spell lists

rpg-docs/client/views/character/features/featureDialog/featureDialog.html

@@ -1,7 +1,7 @@
 <template name="featureDialog">
 	{{#with feature}}
 		<core-header-panel fit>
-			<core-toolbar hero-id="toolbar" hero>
+			<core-toolbar class={{colorClass}} hero-id="toolbar" hero>
 				<paper-icon-button id="backButton" role="button" tabindex="0" icon="arrow-back" aria-label="close"></paper-icon-button>
 				<div flex>{{name}}</div>
 				<paper-icon-button id="deleteFeature" 
@@ -12,26 +12,31 @@
 								   noink></paper-icon-button>
 			</core-toolbar>
 			<div class="detailContent">
+				<!--name-->
 				<paper-input id="featureNameInput" label="Name" floatinglabel value={{name}}></paper-input>
+				<!--color-->
+				{{> colorDropdown}}
 				<hr style="margin: 16px 0 16px 0;">
+				<!--description-->
 				<paper-input-decorator label="Description" floatinglabel layout vertical>
 					<paper-autogrow-textarea>
 						<textarea id="featureDescriptionInput" placeholder aria-label="Description" value={{description}}></textarea>
 					</paper-autogrow-textarea>
 				</paper-input-decorator>
 				<hr style="margin: 16px 0 16px 0;">
-				<div layout horizontal center>
-					<div class="caption">Limit Uses <paper-toggle-button id="limitUseCheck"
-											 checked={{usesSet}} 
-											 role="button" 
-											 aria-pressed="false" 
-											 tabindex="0" 
-											 touch-action="pan-y">
-						</paper-toggle-button>
-						{{#if usesSet}}
-							<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
-						{{/if}}
-					</div>
+				<div layout horizontal center style="height: 60px;">
+					<div class="caption">Limit Uses</div>
+					<paper-toggle-button id="limitUseCheck"
+										 checked={{usesSet}} 
+										 role="button" 
+										 aria-pressed="false" 
+										 tabindex="0" 
+										 touch-action="pan-y"
+										 style="margin-left: 8px; margin-right:8px;">
+					</paper-toggle-button>
+					{{#if usesSet}}
+						<paper-input id="usesInput" label="Uses" floatinglabel value={{uses}}></paper-input>
+					{{/if}}
 				</div>
 				{{#if effects}}
 					<hr style="margin: 16px 0 16px 0;">

rpg-docs/client/views/character/features/featureDialog/featureDialog.js

@@ -55,6 +55,12 @@ Template.featureDialog.events({
 		var featureId = this._id;
 		Features.update(featureId, {$set: {uses: value}});
 	},
+	"core-select .colorDropdown": function(event){
+		var detail = event.originalEvent.detail;
+		if(!detail.isSelected) return;
+		var value = detail.item.getAttribute("name");
+		Features.update(this._id, {$set: {color: value}});
+	}
 });
 
 Template.featureDialog.helpers({
@@ -67,5 +73,8 @@ Template.featureDialog.helpers({
 	},
 	usesSet: function(){
 		return _.isString(this.uses);
+	},
+	colorClass: function(){
+		return getColorClass(this.color)
 	}
 });

rpg-docs/client/views/character/features/features.html

@@ -9,9 +9,9 @@
 			</div>
 			<div class="containers">
 				{{#each features}}
-					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}}>
-						<div class="containerTop green white-text" hero-id="toolbar" layout horizontal center {{detailHero}}>
-							<div class="containerName title" hero-id="title" flex {{detailHero}}>{{name}}</div>
+					<paper-shadow class="card container featureCard"  hero-id="main" {{detailHero}} style="order: {{featureOrder}};">
+						<div class="containerTop {{colorClass}}" hero-id="toolbar" layout horizontal center {{detailHero}}>
+							<div class="containerName subhead" hero-id="title" flex {{detailHero}}>{{name}}</div>
 							{{#if hasUses}}<div class="subhead" style="margin-right: 8px">{{usesLeft}}/{{usesValue}}</div>{{/if}}
 							<paper-ripple fit></paper-ripple>
 						</div>

rpg-docs/client/views/character/features/features.js

@@ -1,10 +1,16 @@
 Template.features.helpers({
 	features: function(){
-		var features = Features.find({charId: this._id});
+		var features = Features.find({charId: this._id}, {sort: {name: 1}});
 		return features;
 	},
 	hasUses: function(){
 		return this.usesValue() > 0;
+	},
+	colorClass: function(){
+		return getColorClass(this.color)
+	},
+	featureOrder: function(){
+		return _.indexOf(_.keys(colorOptions), this.color);
 	}
 });