fix(fabSpeedDial): fix many visual issues

 * maintain state when focusing/bluring/tabbing through actions

   speed dial would previously show a very short and erroneous animation
   when tabbing, or rapidly blurring/focusing, through child items

 * add demo showing tooltip usage

 * fix $digest in-progress error when opening a dialog

   cebor reported a $digest in progress bug when trying to open a dialog
   from within the speed dial; haven't figured out how to create a test
   that demonstrates it, but I added a demo which shows failure

 * animations fail on Safari

   update webkitTransform styles and set height to initial instead of 100%

closes #3213, closes #3338, closes #3277, closes #3236, closes #3375

src/components/fabSpeedDial/demoBasicUsage/index.html

@@ -21,7 +21,7 @@
  <md-button aria-label="facebook" class="md-fab md-raised md-mini">
  <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
  </md-button>
- <md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
+ <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
  <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
  </md-button>
  </md-fab-actions>

src/components/fabSpeedDial/demoModal/index.html

@@ -0,0 +1,42 @@
+<div ng-controller="AppCtrl" layout="column">
+ <md-content class="md-padding" layout="column">
+ <p>
+ You can also use the buttons to open a dialog.
+ </p>
+
+ <div class="lock-size" layout="row" layout-align="center center">
+ <md-fab-speed-dial md-direction="down" class="md-fling">
+ <md-fab-trigger>
+ <md-button aria-label="Menu" class="md-fab md-warn">
+ <md-tooltip md-direction="top">Menu</md-tooltip>
+ <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+ </md-button>
+ </md-fab-trigger>
+
+ <md-fab-actions>
+ <md-button aria-label="Open dialog" class="md-fab md-raised md-mini"
+ ng-click="demo.openDialog($event)">
+ <md-tooltip md-direction="left">Open dialog</md-tooltip>
+ <md-icon md-svg-src="img/icons/launch.svg"></md-icon>
+ </md-button>
+ </md-fab-actions>
+ </md-fab-speed-dial>
+ </div>
+ </md-content>
+
+ <script type="text/ng-template" id="dialog.html">
+ <md-dialog>
+ <md-dialog-content>Hello User!!!</md-dialog-content>
+
+ <div class="md-actions">
+ <md-button aria-label="Close dialog" ng-click="dialog.close()" class="md-primary">
+ Close Greeting
+ </md-button>
+
+ <md-button aria-label="Submit dialog" ng-click="dialog.submit()" class="md-primary">
+ Submit
+ </md-button>
+ </div>
+ </md-dialog>
+ </script>
+</div>

src/components/fabSpeedDial/demoModal/script.js

@@ -0,0 +1,25 @@
+(function() {
+ 'use strict';
+
+ angular.module('fabSpeedDialModalDemo', ['ngMaterial'])
+ .controller('AppCtrl', function($scope, $mdDialog) {
+ $scope.demo = {
+ openDialog: function($event) {
+ $mdDialog.show({
+ clickOutsideToClose: true,
+ controller: function($mdDialog) {
+ this.close = function() {
+ $mdDialog.cancel();
+ };
+ this.submit = function() {
+ $mdDialog.hide();
+ };
+ },
+ controllerAs: 'dialog',
+ templateUrl: 'dialog.html',
+ targetEvent: $event
+ });
+ }
+ };
+ });
+})();

src/components/fabSpeedDial/demoModal/style.scss

@@ -0,0 +1,16 @@
+.md-fab.md-mini {
+ background-color: #aaa !important;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+ background-color: #333 !important;
+}
+
+.lock-size {
+ min-width: 300px;
+ min-height: 300px;
+ width: 300px;
+ height: 300px;
+ margin-left: auto;
+ margin-right: auto;
+}

src/components/fabSpeedDial/demoTooltips/index.html

@@ -0,0 +1,35 @@
+<div ng-controller="AppCtrl" layout="column">
+ <md-content class="md-padding" layout="column">
+ <p>
+ You may add tooltips to both the trigger and actions.
+ </p>
+
+ <div class="lock-size" layout="row" layout-align="center center">
+ <md-fab-speed-dial md-direction="down" class="md-fling">
+ <md-fab-trigger>
+ <md-button aria-label="menu" class="md-fab md-warn">
+ <md-tooltip md-direction="top">Menu</md-tooltip>
+ <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+ </md-button>
+ </md-fab-trigger>
+
+ <md-fab-actions>
+ <md-button aria-label="twitter" class="md-fab md-raised md-mini">
+ <md-tooltip md-direction="left">Twitter</md-tooltip>
+ <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
+ </md-button>
+
+ <md-button aria-label="facebook" class="md-fab md-raised md-mini">
+ <md-tooltip md-direction="right">Facebook</md-tooltip>
+ <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
+ </md-button>
+
+ <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
+ <md-tooltip md-direction="left">Google Hangout</md-tooltip>
+ <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
+ </md-button>
+ </md-fab-actions>
+ </md-fab-speed-dial>
+ </div>
+ </md-content>
+</div>

src/components/fabSpeedDial/demoTooltips/script.js

@@ -0,0 +1,9 @@
+(function() {
+ 'use strict';
+
+ angular.module('fabSpeedDialTooltipDemo', ['ngMaterial'])
+ .controller('AppCtrl', function($scope) {
+ $scope.demo = {
+ };
+ });
+})();

src/components/fabSpeedDial/demoTooltips/style.scss

@@ -0,0 +1,20 @@
+.text-capitalize {
+ text-transform: capitalize;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+ background-color: #000 !important;
+}
+
+p.note {
+ font-size: 1.2rem;
+}
+
+.lock-size {
+ min-width: 300px;
+ min-height: 300px;
+ width: 300px;
+ height: 300px;
+ margin-left: auto;
+ margin-right: auto;
+}

src/components/fabSpeedDial/fabSpeedDial.js

@@ -73,17 +73,34 @@
  element.prepend('<div class="md-css-variables"></div>');
  }
 
- function FabSpeedDialController($scope, $element, $animate) {
+ function FabSpeedDialController($scope, $element, $animate, $timeout) {
  var vm = this;
 
  // Define our open/close functions
  // Note: Used by fabTrigger and fabActions directives
  vm.open = function() {
- $scope.$apply('vm.isOpen = true');
+ // Run in a timeout to avoid conflicts with existing digest loops
+ $timeout(function() {
+ vm.isOpen = true;
+ });
  };
 
  vm.close = function() {
- $scope.$apply('vm.isOpen = false');
+ // Run in a timeout to avoid conflicts with existing digest loops
+ $timeout(function() {
+ // Only close if we do not currently have mouse focus (since child elements can call this)
+ !vm.moused && (vm.isOpen = false);
+ });
+ };
+
+ vm.mouseenter = function() {
+ vm.moused = true;
+ vm.open();
+ };
+
+ vm.mouseleave = function() {
+ vm.moused = false;
+ vm.close();
  };
 
  setupDefaults();
@@ -101,8 +118,8 @@
 
  // Setup our event listeners
  function setupListeners() {
- $element.on('mouseenter', vm.open);
- $element.on('mouseleave', vm.close);
+ $element.on('mouseenter', vm.mouseenter);
+ $element.on('mouseleave', vm.mouseleave);
  }
 
  // Setup our watchers
@@ -142,18 +159,19 @@
  angular.forEach(items, function(item, index) {
  var styles = item.style;
 
- styles.transform = '';
+ styles.transform = styles.webkitTransform = '';
  styles.transitionDelay = '';
  styles.opacity = 1;
 
  // Make the items closest to the trigger have the highest z-index
- item.style.zIndex = (items.length - index) + startZIndex;
+ styles.zIndex = (items.length - index) + startZIndex;
  });
 
  // If the control is closed, hide the items behind the trigger
  if (!ctrl.isOpen) {
  angular.forEach(items, function(item, index) {
  var newPosition, axis;
+ var styles = item.style;
 
  switch (ctrl.direction) {
  case 'up':
@@ -174,7 +192,9 @@
  break;
  }
 
- item.style.transform = 'translate' + axis + '(' + newPosition + 'px)';
+ var newTranslate = 'translate' + axis + '(' + newPosition + 'px)';
+
+ styles.transform = styles.webkitTransform = newTranslate;
  });
  }
  }
@@ -205,7 +225,7 @@
  offsetDelay = index * delay;
 
  styles.opacity = ctrl.isOpen ? 1 : 0;
- styles.transform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
+ styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
  styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
  });
  }

src/components/fabSpeedDial/fabSpeedDial.scss

@@ -17,7 +17,7 @@ md-fab-speed-dial {
  display: flex;
 
  // Set the height so that the z-index in the JS animation works
- height: 100%;
+ height: initial;
 
  .md-fab-action-item {
  visibility: hidden;

src/components/fabSpeedDial/fabSpeedDial.spec.js

@@ -32,33 +32,37 @@ describe('<md-fab-speed-dial> directive', function() {
  expect(element.hasClass('md-right')).toBe(true);
  }));
 
- it('opens when the trigger element is focused', inject(function() {
+ it('opens when the trigger element is focused', inject(function($timeout) {
  compileAndLink(
  '<md-fab-speed-dial><md-fab-trigger><button></button></md-fab-trigger></md-fab-speed-dial>'
  );
 
  element.find('button').triggerHandler('focus');
+ $timeout.flush();
  expect(controller.isOpen).toBe(true);
  }));
 
- it('opens when the speed dial elements are focused', inject(function() {
+ it('opens when the speed dial elements are focused', inject(function($timeout) {
  compileAndLink(
  '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
  );
 
  element.find('button').triggerHandler('focus');
+ $timeout.flush();
  expect(controller.isOpen).toBe(true);
  }));
 
- it('closes when the speed dial elements are blurred', inject(function() {
+ it('closes when the speed dial elements are blurred', inject(function($timeout) {
  compileAndLink(
  '<md-fab-speed-dial><md-fab-actions><button></button></md-fab-actions></md-fab-speed-dial>'
  );
 
  element.find('button').triggerHandler('focus');
+ $timeout.flush();
  expect(controller.isOpen).toBe(true);
 
  element.find('button').triggerHandler('blur');
+ $timeout.flush();
  expect(controller.isOpen).toBe(false);
  }));