Added color picking to library properties

app/imports/ui/components/ColorPicker.vue

@@ -27,7 +27,7 @@
           >
             <v-scroll-y-transition>
               <v-icon
-                v-if="colorOption === color"
+                v-if="kebabColor === colorOption"
                 :class="{dark: isDark(colorOption, shade)}"
               >
                 check
@@ -49,13 +49,13 @@
             <div
               v-for="shadeOption in shades"
               :key="shadeOption"
-              :class="[color, shadeOption]"
+              :class="[kebabColor, shadeOption]"
               class="shade-swatch d-flex align-center"
               @click="shade = shadeOption"
             >
               <v-scroll-y-transition>
                 <v-icon
-                  v-if="shade === shadeOption"
+                  v-if="kebabShade === shadeOption"
                   :class="{dark: isDark(color, shade)}"
                 >
                   check
@@ -104,9 +104,9 @@
   // Create an index of hex colors and what color/shade combination makes them
   let colorIndex = {};
   for (let color in vuetifyColors){
-    color = camelToKebabCase(color);
+    color = kebabToCamelCase(color);
     for (let shade in vuetifyColors[color]){
-      shade = camelToKebabCase(shade);
+      shade = kebabToCamelCase(shade);
       colorIndex[vuetifyColors[color][shade]] = {color, shade};
     }
   }
@@ -167,7 +167,6 @@
           return this.combination && this.combination.color;
         },
         set(newColor){
-          console.log(newColor, colorToHex(newColor, this.shade));
           this.$emit('input', colorToHex(newColor, this.shade));
         },
       },
@@ -176,7 +175,6 @@
           return this.combination && this.combination.shade;
         },
         set(newShade){
-          console.log(newShade, colorToHex(this.color, newShade));
           this.$emit('input', colorToHex(this.color, newShade));
         },
       },

app/imports/ui/components/propertyToolbar.vue

@@ -21,7 +21,7 @@
       >
         <v-spacer />
         <color-picker
-          v-if="false"
+          v-if="$listeners && $listeners['color-changed']"
           :value="model.color"
           @input="colorChanged"
         />

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

@@ -1,5 +1,7 @@
 <template lang="html">
-  <v-icon>{{icon}}</v-icon>
+  <v-icon :color="color">
+    {{ icon }}
+  </v-icon>
 </template>
 
 <script>
@@ -8,6 +10,7 @@ import { getPropertyIcon } from '/imports/constants/PROPERTIES.js';
 export default {
 	props: {
 		type: String,
+    color: String,
 	},
 	computed: {
 		icon(){

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

@@ -4,6 +4,7 @@
       class="mr-2"
       :type="model.type"
       :class="selected && 'primary--text'"
+      :color="model.color"
     />
     <div
       class="text-no-wrap text-truncate"

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

@@ -4,6 +4,7 @@
       class="mr-2"
       :type="model.type"
       :class="selected && 'primary--text'"
+      :color="model.color"
     />
     <div
       class="text-no-wrap text-truncate"

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

@@ -3,6 +3,7 @@
     <property-icon
       class="mr-2"
       :type="model.type"
+      :color="model.color"
       :class="selected && 'primary--text'"
     />
     <div class="text-no-wrap text-truncate">

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

@@ -3,6 +3,7 @@
     <v-icon
       class="mr-2"
       :class="selected && 'primary--text'"
+      :color="model.color"
     >
       {{ effectIcon }}
     </v-icon>

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

@@ -3,6 +3,7 @@
     <v-icon
       class="mr-2"
       :class="selected && 'primary--text'"
+      :color="model.color"
     >
       {{ model.equipped ? 'check_box' : 'check_box_outline_blank' }}
     </v-icon>