fix skills UI bugs and icon consistency for skills

app/imports/ui/properties/components/skills/SkillListTile.vue

@@ -4,9 +4,10 @@
     style="min-height: 36px;"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-icon class="prof-icon">
-      {{ icon }}
-    </v-icon>
+    <proficiency-icon
+      :value="model.proficiency"
+      class="prof-icon"
+    />
     <v-list-item-content class="py-1">
       <v-list-item-title>
         <span
@@ -41,8 +42,12 @@
 
 <script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
 
 export default {
+  components: {
+    ProficiencyIcon,
+  },
 	props: {
     model: {
       type: Object,
@@ -51,19 +56,6 @@ export default {
     hideModifier: Boolean,
 	},
 	computed: {
-		icon(){
-      if (this.model.proficiency == 0.49){
-				return 'mdi-brightness-3';
-			} else if (this.model.proficiency == 0.5){
-				return 'mdi-brightness-2';
-			} else if (this.model.proficiency == 1) {
-				return 'mdi-brightness-1'
-			} else if (this.model.proficiency == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
-		},
 		displayedModifier(){
 			let mod = this.model.value;
 			if (this.model.fail){

app/imports/ui/properties/components/skills/SkillProficiency.vue

@@ -43,6 +43,7 @@
 <script lang="js">
   import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
   import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
+  import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
 
   export default {
     components: {
@@ -58,17 +59,7 @@
     },
     computed: {
       icon(){
-        if (this.model.value == 0.49){
-          return 'mdi-brightness-3';
-        } else if (this.model.value == 0.5) {
-          return 'mdi-brightness-2'
-        } else if (this.model.value == 1) {
-          return 'mdi-brightness-1'
-        } else if (this.model.value == 2){
-          return 'album'
-        } else {
-          return 'mdi-radiobox-blank';
-        }
+        return getProficiencyIcon(this.model.value);
       },
       proficiencyText(){
         switch (this.model.value){

app/imports/ui/properties/forms/shared/ProficiencySelect.vue

@@ -20,20 +20,9 @@
 </template>
 
 <script lang="js">
+  import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
+
 	const ICON_SPIN_DURATION = 300;
-	let proficiencyIcon = function(value){
-    if (value == 0.49){
-			return 'mdi-brightness-3';
-		} else if (value == 0.5){
-			return 'mdi-brightness-2';
-		} else if (value == 1) {
-			return 'mdi-brightness-1'
-		} else if (value == 2){
-			return 'album'
-		} else {
-			return 'mdi-radiobox-blank';
-		}
-	};
 
 	export default {
 		props: {
@@ -60,7 +49,7 @@
 			'value': {
 				immediate: true,
 				handler(newValue){
-					let newIcon = proficiencyIcon(newValue);
+					let newIcon = getProficiencyIcon(newValue);
 					this.iconClass='leaving';
 					setTimeout(() => {
 						this.displayedIcon = newIcon;

app/imports/ui/properties/shared/ProficiencyIcon.vue

@@ -5,22 +5,18 @@
 </template>
 
 <script lang="js">
+import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
+
 export default {
 	props: {
-		value: Number,
+		value: {
+      type: Number,
+      default: undefined,
+    },
 	},
 	computed: {
 		displayedIcon(){
-			let value = this.value;
-			if (value == 0.5){
-				return 'mdi-brightness-2';
-			} else if (value == 1) {
-				return 'mdi-brightness-1'
-			} else if (value == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
+      return getProficiencyIcon(this.value);
 		}
 	}
 }

app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue

@@ -0,0 +1,32 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <proficiency-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+      :value="model.value"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="model.stats && model.stats.length">
+        {{ model.stats.join(', ') }}
+      </template>
+      <template v-else>
+        {{ title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+
+export default {
+  components: {
+    ProficiencyIcon,
+  },
+  mixins: [treeNodeViewMixin]
+}
+</script>

app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js

@@ -4,6 +4,7 @@ import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue'
 import DamageTreeNode from '/imports/ui/properties/treeNodeViews/DamageTreeNode.vue';
 import EffectTreeNode from '/imports/ui/properties/treeNodeViews/EffectTreeNode.vue';
 import ClassLevelTreeNode from '/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue';
+import ProficiencyTreeNode from '/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue';
 import ReferenceTreeNode from '/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue';
 
 export default {
@@ -13,5 +14,6 @@ export default {
   damage: DamageTreeNode,
   effect: EffectTreeNode,
   item: ItemTreeNode,
+  proficiency: ProficiencyTreeNode,
   reference: ReferenceTreeNode,
 }

app/imports/ui/properties/viewers/ProficiencyViewer.vue

@@ -1,10 +1,12 @@
 <template lang="html">
   <div class="proficiency-viewer">
+    <div class="text-h5">
+      {{ model.stats && model.stats.join(' ') }}
+    </div>
     <div class="text-h5 layout">
-      {{ model.skill }}
       <proficiency-icon
         :value="model.value"
-        class="ml-3 mr-1"
+        class="mr-1"
       />
       <div>
         {{ proficiencyText }}
@@ -16,6 +18,7 @@
 <script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+
 export default {
   components: {
     ProficiencyIcon,

app/imports/ui/properties/viewers/SkillViewer.vue

@@ -89,6 +89,7 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
 import SkillProficiency from '/imports/ui/properties/components/skills/SkillProficiency.vue';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
+import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
 
 export default {
   components: {
@@ -109,17 +110,7 @@ export default {
 			}
 		},
     icon(){
-			if (this.model.proficiency == 0.49){
-				return 'mdi-brightness-3';
-			} else if (this.model.proficiency == 0.5){
-				return 'mdi-brightness-2';
-			} else if (this.model.proficiency == 1) {
-				return 'mdi-brightness-1'
-			} else if (this.model.proficiency == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
+      return getProficiencyIcon(this.model.proficiency);
 		},
   },
   methods: {

app/imports/ui/utility/getProficiencyIcon.js

@@ -0,0 +1,13 @@
+export default function getProficiencyIcon(proficiency){
+  if (proficiency == 0.49){
+    return 'mdi-brightness-3';
+  } else if (proficiency == 0.5){
+    return 'mdi-brightness-2';
+  } else if (proficiency == 1) {
+    return 'mdi-brightness-1'
+  } else if (proficiency == 2){
+    return 'mdi-album'
+  } else {
+    return 'mdi-radiobox-blank';
+  }
+}