Skillrows overhauled to material design specs

rpg-docs/client/views/character/Stats/skillRow/skillRow.css

@@ -1,36 +1,19 @@
 .skillRow {
 	height: 32px;
-	display: flex;
-	align-items: center;
-	position: relative;
+	margin: 0 -8px 0 -8px;
 }
 
-.skillRow:hover{
-	background: #FFEBEE;
-}
-
-.profIcon{
-	display: inline-block;
-	width: 40px;
-	height: 26px;
-	background-size: contain;
-	background-repeat: no-repeat;
-
-	/*TODO fix the actual images and remove inversion*/
-	-webkit-filter: invert(100%);
-	opacity: 0.54;
-	pointer-events: none;
+.skillRow core-icon {
+	color: rgba(0,0,0,0.54);
 }
 
 .skillMod {
-	width: 20px;
-	text-align: right;
+	width: 42px;
+	text-align: center;
 }
 
 .skillName, .skillMod{
-	display: inline-block;
-	vertical-align: top; 
-	margin-right: 8px;
+	
 }
 
 .fail.skillMod {
@@ -41,14 +24,16 @@
 	background-image: url(/png/advantage/greenUp.png);
 	background-size: contain;
 	background-repeat: no-repeat;
+	background-position: center;
 }
 
 .disadvantage{
 	background-image: url(/png/advantage/redDown.png);
 	background-size: contain;
 	background-repeat: no-repeat;
+	background-position: center;
 }
 
-td.conditionals::after{
+.hasConditionals::after{
 	content: "*";
 }

rpg-docs/client/views/character/Stats/skillRow/skillRow.html

@@ -1,17 +1,16 @@
 <template name="skillRow">
-	<div class="subhead skillRow">
-		{{> ripple}}
-		<div class="profIcon" style="background-image: url(/png/profIcons/{{profIcon skill}})"></div>
+	<paper-item class="skillRow" layout horizontal>
+		<core-icon icon="{{profIcon}}"></core-icon>
 		{{#if failSkill}}
 		<div class="fail skillMod">fail</div>
 		{{else}}
 		<div class="{{advantage}} skillMod">{{../skillMod skill}}</div>
 		{{/if}}
-		<div class="{{conditionals}} skillName">
+		<div class="{{#if conditionalCount}}hasConditionals{{/if}} skillName">
 			{{name}}
 			{{#if showPassive}}
-			({{../passiveSkill skill}})
+				({{../passiveSkill skill}})
 			{{/if}}
 		</div>
-	</div>
+	</paper-item>
 </template>

rpg-docs/client/views/character/Stats/skillRow/skillRow.js

@@ -1,40 +1,22 @@
 Template.skillRow.helpers({
-	profIcon: function(skill){
+	profIcon: function(){
 		var prof = Template.parentData(1).proficiency(this.skill);
-		if(prof > 0 && prof < 1) return "profHalf.png";
-		if(prof === 1) return "profSingle.png";
-		if(prof > 1) return "profDouble.png";
-		return "profNone.png";
+		if(prof > 0 && prof < 1) return "image:brightness-2";
+		if(prof === 1) return "image:brightness-1";
+		if(prof > 1) return "av:album";
+		return "radio-button-off";
 	},
 	failSkill: function(){
-		var skill = Template.parentData(1).getField(this.skill);
-		_.each(skill.effets, function(effect){
-			if (effect.operation === "fail"){
-				return true;
-			}
-		})
-		return false;
+		var charId = Template.parentData(1)._id;
+		return Effects.find({charId: charId, stat: this.skill, enabled: true, operation: "fail"}).count();
 	},
 	advantage: function(){
-		var adv = 0;
-		var disadv = 0;
-		var skill = Template.parentData(1).getField(this.skill);
-		_.each(skill.effets, function(effect){
-			if (effect.operation === "advantage"){
-				adv ++;
-			} else if (effect.operation === "disadvantage") {
-				disadv ++;
-			}
-		})
-		if(adv > 0 && disadv === 0) return "advantage";
-		if(disadv > 0 && adv === 0) return "disadvantage";
+		var advantage = Template.parentData(1).advantage(this.skill);
+		if(advantage > 0) return "advantage";
+		if(advantage < 0) return "disadvantage";
 	},
-	conditionals: function(){
-		var skill = Template.parentData(1).getField(this.skill);
-		_.each(skill.effets, function(effect){
-			if (effect.operation === "conditional"){
-				return "conditionals";
-			}
-		})
+	conditionalCount: function(){
+		var charId = Template.parentData(1)._id;
+		return Effects.find({charId: charId, stat: this.skill, enabled: true, operation: "conditional"}).count();
 	}
 });

rpg-docs/client/views/layout/imports.html

@@ -3,6 +3,9 @@
 <link rel="import" href="/components/core-animated-pages/transitions/cross-fade.html">
 <link rel="import" href="/components/core-animated-pages/transitions/hero-transition.html">
 <link rel="import" href="/components/core-animated-pages/transitions/slide-from-right.html">
+<link rel="import" href="/components/core-icons/av-icons.html">
+<link rel="import" href="/components/core-icons/core-icons.html">
+<link rel="import" href="/components/core-icons/image-icons.html">
 <link rel="import" href="/components/core-item/core-item.html">
 <link rel="import" href="/components/core-menu/core-menu.html">
 <link rel="import" href="/components/core-scaffold/core-scaffold.html">