(js) Change icon color of color picker

UI/WebServerResources/js/Common/sgColorPicker.directive.js

@@ -25,7 +25,7 @@
         '             ng-style="{ \'background-color\': sgColor }"',
         '             ng-click="$mdOpenMenu()"',
         '             md-menu-origin="md-menu-origin">',
-        '    <md-icon style="color: #fff">color_lens</md-icon>',
+        '    <md-icon ng-style="{ color: sgIconColor }">color_lens</md-icon>',
         '  </md-button>',
         '  <md-menu-content width="3">',
         '    <md-content class="md-padding">',
@@ -48,6 +48,7 @@
       // Expose ng-model value to scope
       ngModelController.$render = function() {
         scope.sgColor = ngModelController.$viewValue;
+        scope.sgIconColor = contrast(ngModelController.$viewValue);
       };
     }
   }
@@ -63,6 +64,7 @@
     $scope.setColor = function(color) {
       // Update scope value and ng-model
       $scope.sgColor = color;
+      $scope.sgIconColor = contrast(color);
       ngModelController.$setViewValue(color);
     };
   }

UI/WebServerResources/js/Common/sgFolderStylesheet.directive.js

@@ -71,44 +71,6 @@
       var vm = this;
 
       vm.contrast = contrast;
-
-      function hexToRgb(hex) {
-        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16)
-        } : null;
-      }
-
-      // Respect contrast ratio recommendation from W3C:
-      // http://www.w3.org/TR/WCAG20/#contrast-ratiodef
-      function contrast(hex) {
-        var color, c, l = 1;
-
-        color = hexToRgb(hex);
-        if (color) {
-	  c = [color.r / 255, color.g / 255, color.b / 255];
-
-	  for (var i = 0; i < c.length; ++i) {
-	    if (c[i] <= 0.03928) {
-	      c[i] = c[i] / 12.92;
-	    }
-            else {
-	      c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
-	    }
-	  }
-
-	  l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-        }
-
-	if (l > 0.179) {
-          return 'black';
-        }
-        else {
-          return 'white';
-	}
-      }
     }
   }
 

UI/WebServerResources/js/Common/utils.js

@@ -298,6 +298,8 @@ Date.prototype.getHourString = function() {
     return newString;
 };
 
+/* Functions */
+
 function l() {
   var key = arguments[0];
   var value = key;
@@ -313,3 +315,41 @@ function l() {
 
   return value;
 }
+
+function hexToRgb(hex) {
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : null;
+}
+
+// Respect contrast ratio recommendation from W3C:
+// http://www.w3.org/TR/WCAG20/#contrast-ratiodef
+function contrast(hex) {
+  var color, c, l = 1;
+
+  color = hexToRgb(hex);
+  if (color) {
+    c = [color.r / 255, color.g / 255, color.b / 255];
+
+    for (var i = 0; i < c.length; ++i) {
+      if (c[i] <= 0.03928) {
+	c[i] = c[i] / 12.92;
+      }
+      else {
+	c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
+      }
+    }
+
+    l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
+  }
+
+  if (l > 0.179) {
+    return 'black';
+  }
+  else {
+    return 'white';
+  }
+}