feat(tabs): ink ripple color syncs with ink bar

Author: ajoslin

src/components/tabs/js/inkBarDirective.js

@@ -25,17 +25,19 @@ function MdTabInkDirective($mdConstant, $window, $$rAF, $timeout) {
 
     if (nobar) return;
 
+    tabsCtrl.inkBarElement = element;
+
     scope.$watch(tabsCtrl.selected, updateBar);
     scope.$on('$mdTabsChanged', updateBar);
 
     function updateBar() {
       var selected = tabsCtrl.selected();
 
-      var hideInkBar = !selected || tabsCtrl.count() < 2 || 
+      var hideInkBar = !selected || tabsCtrl.count() < 2 ||
         (scope.pagination && scope.pagination.itemsPerPage === 1);
       element.css('display', hideInkBar ? 'none' : 'block');
 
-      if (!hideInkBar) { 
+      if (!hideInkBar) {
         var count = tabsCtrl.count();
         var scale = 1 / count;
         var left = tabsCtrl.indexOf(selected);

src/components/tabs/js/tabItemDirective.js

@@ -94,7 +94,9 @@ function MdTabDirective($mdInkRipple, $compile, $mdAria, $mdUtil, $mdConstant) {
       transcludeTabContent();
       configureAria();
 
-      var detachRippleFn = $mdInkRipple.attachTabBehavior(scope, element);
+      var detachRippleFn = $mdInkRipple.attachTabBehavior(scope, element, {
+        colorElement: tabsCtrl.inkBarElement
+      });
       tabsCtrl.add(tabItemCtrl);
       scope.$on('$destroy', function() {
         detachRippleFn();
@@ -171,7 +173,7 @@ function MdTabDirective($mdInkRipple, $compile, $mdAria, $mdUtil, $mdConstant) {
       function watchActiveAttribute() {
         var unwatch = scope.$parent.$watch('!!(' + attr.mdActive + ')', activeWatchAction);
         scope.$on('$destroy', unwatch);
-        
+
         function activeWatchAction(isActive) {
           var isSelected = tabsCtrl.selected() === tabItemCtrl;
 
@@ -185,7 +187,7 @@ function MdTabDirective($mdInkRipple, $compile, $mdAria, $mdUtil, $mdConstant) {
 
       function watchDisabled() {
         scope.$watch(tabItemCtrl.isDisabled, disabledWatchAction);
-        
+
         function disabledWatchAction(isDisabled) {
           element.attr('aria-disabled', isDisabled);
 

src/components/tabs/tabs-theme.scss

@@ -12,6 +12,7 @@ md-tabs.md-#{$theme-name}-theme {
   }
 
   md-tabs-ink-bar {
+    color: $tabs-highlight-color;
     md-tabs-ink-bar-inner {
       background: $tabs-highlight-color;
     }

src/core/services/ripple/ripple.js

@@ -30,46 +30,35 @@ function InkRippleService($window, $timeout) {
     attach: attach
   };
 
-  function attachButtonBehavior(scope, element) {
-    return attach(scope, element, {
+  function attachButtonBehavior(scope, element, options) {
+    return attach(scope, element, angular.extend({
       isFAB: element.hasClass('md-fab'),
       isMenuItem: element.hasClass('md-menu-item'),
       center: false,
       dimBackground: true
-    });
+    }, options));
   }
 
-  function attachCheckboxBehavior(scope, element) {
-    return attach(scope, element, {
+  function attachCheckboxBehavior(scope, element, options) {
+    return attach(scope, element, angular.extend({
       center: true,
       dimBackground: false
-    });
+    }, options));
   }
 
-  function attachTabBehavior(scope, element) {
-    return attach(scope, element, {
+  function attachTabBehavior(scope, element, options) {
+    return attach(scope, element, angular.extend({
       center: false,
       dimBackground: true,
       outline: true
-    });
+    }, options));
   }
 
   function attach(scope, element, options) {
     if (element.controller('mdNoInk')) return angular.noop;
 
-    var rippleContainer, rippleSize,
-        controller = element.controller('mdInkRipple') || {},
-        counter = 0,
-        ripples = [],
-        states = [],
-        isActiveExpr = element.attr('md-highlight'),
-        isActive = false,
-        isHeld = false,
-        node = element[0],
-        hammertime = new Hammer(node),
-        color = parseColor(element.attr('md-ink-ripple')) || parseColor($window.getComputedStyle(node).color || 'rgb(0, 0, 0)');
-
     options = angular.extend({
+      colorElement: element,
       mousedown: true,
       hover: true,
       focus: true,
@@ -79,27 +68,34 @@ function InkRippleService($window, $timeout) {
       outline: false,
       isFAB: false,
       isMenuItem: false
-    }, options || {});
+    }, options);
+
+    var rippleContainer, rippleSize,
+        controller = element.controller('mdInkRipple') || {},
+        counter = 0,
+        ripples = [],
+        states = [],
+        isActiveExpr = element.attr('md-highlight'),
+        isActive = false,
+        isHeld = false,
+        node = element[0],
+        hammertime = new Hammer(node),
+        color = parseColor(element.attr('md-ink-ripple')) || parseColor($window.getComputedStyle(options.colorElement[0]).color || 'rgb(0, 0, 0)');
 
     options.mousedown && hammertime.on('hammer.input', onInput);
 
     controller.createRipple = createRipple;
 
     if (isActiveExpr) {
-      scope.$watch(
-          function () {
-            return scope.$eval(isActiveExpr);
-          },
-          function (newValue) {
-            isActive = newValue;
-            if (isActive && !ripples.length) {
-              $timeout(function () {
-                createRipple(0, 0);
-              }, 0, false);
-            }
-            angular.forEach(ripples, updateElement);
-          }
-      );
+      scope.$watch(isActiveExpr, function watchActive(newValue) {
+        isActive = newValue;
+        if (isActive && !ripples.length) {
+          $timeout(function () {
+            createRipple(0, 0);
+          }, 0, false);
+        }
+        angular.forEach(ripples, updateElement);
+      });
     }
 
     // Publish self-detach method if desired...