Implementation for copay distribution sass.

src/js/controllers/preferencesColor.js

@@ -5,15 +5,16 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
   $scope.wallet = wallet;
   var walletId = wallet.credentials.walletId;
   var config = configService.getSync();
-  $scope.colorList = configService.getColorList();
   config.colorFor = config.colorFor || {};
-  $scope.currentColor = config.colorFor[walletId] || '#4A90E2';
 
-  $timeout(function() {
-    $scope.$apply();
-  });
+  var retries = 3;
+  $scope.colorCount = getColorCount();
+  setCurrentColorIndex();
+
+  $scope.save = function(i) {
+    var color = indexToColor(i);
+    if (!color) return;
 
-  $scope.save = function(color) {
     var opts = {
       colorFor: {}
     };
@@ -24,4 +25,53 @@ angular.module('copayApp.controllers').controller('preferencesColorController',
       $ionicHistory.goBack();
     });
   };
+
+  function getColorDefault() {
+    return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-default')[0]).color);
+  };
+
+  function getColorCount() {
+    var count = window.getComputedStyle(document.getElementsByClassName('wallet-color-count')[0]).content;
+    return parseInt(count.replace(/[^0-9]/g, ''));
+  };
+
+  function setCurrentColorIndex() {
+    try {
+      $scope.currentColorIndex = colorToIndex(config.colorFor[walletId]);
+      if ($scope.currentColorIndex == undefined) {
+        $scope.currentColorIndex = colorToIndex(getColorDefault());
+      }
+    } catch(e) {
+      // Wait for DOM to render and try again.
+      $timeout(function() {
+        if (retries > 0) {
+          retries -= 1;
+          setCurrentColorIndex();
+        }
+      }, 100);
+    }
+  };
+
+  function colorToIndex(color) {
+    for (var i = 0; i < $scope.colorCount; i++) {
+      if (indexToColor(i) == color) {
+        return i;
+      }
+    }
+    return undefined;
+  };
+
+  function indexToColor(i) {
+    // Expect an exception to be thrown if can't getComputedStyle().
+    return rgb2hex(window.getComputedStyle(document.getElementsByClassName('wallet-color-' + i)[0]).backgroundColor);
+  };
+
+  function rgb2hex(rgb) {
+    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+    return (rgb && rgb.length === 4) ? "#" +
+      ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+      ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
+      ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
+  };
+
 });

src/js/directives/svg.js

@@ -0,0 +1,44 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  /**
+   * Replaces img tag with its svg content to allow for CSS styling of the svg.
+   */
+  .directive('svg', function($http) {
+    return {
+      restrict: 'C',
+      link: function(scope, element, attrs) {
+        var imgId = attrs.id;
+        var imgClass = attrs.class;
+        var imgUrl = attrs.src;
+        var svg;
+
+        // Load svg content
+        $http.get(imgUrl).success(function(data, status) {
+          svg = angular.element(data);
+          for (var i = svg.length - 1; i >= 0; i--) {
+            if (svg[i].constructor == SVGSVGElement) {
+              svg = angular.element(svg[i]);
+              break;
+            }
+          }
+
+          if (typeof imgId !== 'undefined') {
+            svg.attr('id', imgId);
+          }
+
+          if (typeof imgClass !== 'undefined') {
+            svg.attr('class', imgClass);
+          }
+          // Remove invalid attributes
+          svg = svg.removeAttr('xmlns:a');
+          element.replaceWith(svg);
+        });
+
+        scope.$on('$destroy', function() {
+          if (svg) svg.remove();
+        });
+      }
+    };
+  });
+    

src/js/filters/filters.js

@@ -71,4 +71,12 @@ angular.module('copayApp.filters', [])
       if (reverse) filtered.reverse();
       return filtered;
     };
+  })
+  .filter('range', function() {
+    return function(input, total) {
+      total = parseInt(total);
+      for (var i = 0; i < total; i++)
+        input.push(i);
+      return input;
+    };
   });

src/js/services/configService.js

@@ -83,69 +83,6 @@ angular.module('copayApp.services').factory('configService', function(storageSer
 
   var configCache = null;
 
-  var colorList = [
-    {
-      color: "#DD4B39",
-      name: "Cinnabar"
-  },
-    {
-      color: "#F38F12",
-      name: "Carrot Orange"
-  },
-    {
-      color: "#FAA77F",
-      name: "Light Salmon"
-  },
-    {
-      color: "#D0B136",
-      name: "Metallic Gold"
-  },
-    {
-      color: "#9EDD72",
-      name: "Feijoa"
-  },
-    {
-      color: "#29BB9C",
-      name: "Shamrock"
-  },
-    {
-      color: "#019477",
-      name: "Observatory"
-  },
-    {
-      color: "#77DADA",
-      name: "Turquoise Blue"
-  },
-    {
-      color: "#4A90E2",
-      name: "Cornflower Blue"
-  },
-    {
-      color: "#484ED3",
-      name: "Free Speech Blue"
-  },
-    {
-      color: "#9B59B6",
-      name: "Deep Lilac"
-  },
-    {
-      color: "#E856EF",
-      name: "Free Speech Magenta"
-  },
-    {
-      color: "#FF599E",
-      name: "Brilliant Rose"
-  },
-    {
-      color: "#7A8C9E",
-      name: "Light Slate Grey"
-  }
-    ];
-
-  root.getColorList = function() {
-    return colorList;
-  };
-
   root.getSync = function() {
     if (!configCache)
       throw new Error('configService#getSync called when cache is not initialized');

src/js/services/profileService.js

@@ -33,7 +33,7 @@ angular.module('copayApp.services')
       configService.whenAvailable(function(config) {
         wallet.usingCustomBWS = config.bwsFor && config.bwsFor[wallet.id] && (config.bwsFor[wallet.id] != defaults.bws.url);
         wallet.name = (config.aliasFor && config.aliasFor[wallet.id]) || wallet.credentials.walletName;
-        wallet.color = (config.colorFor && config.colorFor[wallet.id]) || '#4A90E2';
+        wallet.color = (config.colorFor && config.colorFor[wallet.id]);
         wallet.email = config.emailFor && config.emailFor[wallet.id];
       });
     }