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% * make changes suggested by gkalpak * more fixes suggested by gkalpak closes #3213, closes #3338, closes #3277, closes #3236, closes #3375
angular · Jun 28, 2015 · 78fcf18 · 78fcf18
1 parent 044dbdc
commit 78fcf18
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 21 deletions.
diff --git a/src/components/fabSpeedDial/demoBasicUsage/index.html b/src/components/fabSpeedDial/demoBasicUsage/index.html
@@ -1,4 +1,4 @@
-<div ng-controller="AppCtrl" layout="column">
+<div ng-controller="DemoCtrl as demo" layout="column">
   <md-content class="md-padding" layout="column">
     <p>
       You may supply a direction of <code>left</code>, <code>up</code>, <code>down</code>, or
@@ -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>

diff --git a/src/components/fabSpeedDial/demoBasicUsage/script.js b/src/components/fabSpeedDial/demoBasicUsage/script.js
@@ -2,18 +2,16 @@
   'use strict';
 
   angular.module('fabSpeedDialBasicUsageDemo', ['ngMaterial'])
-    .controller('AppCtrl', function($scope) {
-      $scope.demo = {
-        topDirections: ['left', 'up'],
-        bottomDirections: ['down', 'right'],
+    .controller('DemoCtrl', function() {
+      this.topDirections = ['left', 'up'];
+      this.bottomDirections = ['down', 'right'];
 
-        isOpen: false,
+      this.isOpen = false;
 
-        availableModes: ['md-fling', 'md-scale'],
-        selectedMode: 'md-fling',
+      this.availableModes = ['md-fling', 'md-scale'];
+      this.selectedMode = 'md-fling';
 
-        availableDirections: ['up', 'down', 'left', 'right'],
-        selectedDirection: 'up'
-      };
+      this.availableDirections = ['up', 'down', 'left', 'right'];
+      this.selectedDirection = 'up';
     });
 })();
diff --git a/src/components/fabSpeedDial/demoModal/index.html b/src/components/fabSpeedDial/demoModal/index.html
@@ -0,0 +1,42 @@
+<div ng-controller="DemoCtrl as demo" 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 demo-fab trigger-fab">
+            <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 demo-fab action-fab"
+                     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>
diff --git a/src/components/fabSpeedDial/demoModal/script.js b/src/components/fabSpeedDial/demoModal/script.js
@@ -0,0 +1,23 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialModalDemo', ['ngMaterial'])
+    .controller('DemoCtrl', function($mdDialog) {
+      this.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
+        });
+      }
+    });
+})();
diff --git a/src/components/fabSpeedDial/demoModal/style.scss b/src/components/fabSpeedDial/demoModal/style.scss
@@ -0,0 +1,18 @@
+.md-fab.demo-fab.trigger-fab, .md-fab.demo-fab.action-fab {
+  &:hover, &.md-focused {
+    background-color: #333;
+  }
+}
+
+.md-fab.demo-fab.action-fab {
+  background-color: #aaa;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/src/components/fabSpeedDial/demoTooltips/index.html b/src/components/fabSpeedDial/demoTooltips/index.html
@@ -0,0 +1,35 @@
+<div 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>
diff --git a/src/components/fabSpeedDial/demoTooltips/script.js b/src/components/fabSpeedDial/demoTooltips/script.js
diff --git a/src/components/fabSpeedDial/demoTooltips/style.scss b/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;
+}
diff --git a/src/components/fabSpeedDial/fabSpeedDial.js b/src/components/fabSpeedDial/fabSpeedDial.js
@@ -79,11 +79,24 @@
       // Define our open/close functions
       // Note: Used by fabTrigger and fabActions directives
       vm.open = function() {
-        $scope.$apply('vm.isOpen = true');
+        // Async eval to avoid conflicts with existing digest loops
+        $scope.$evalAsync("vm.isOpen = true");
       };
 
       vm.close = function() {
-        $scope.$apply('vm.isOpen = false');
+        // Async eval to avoid conflicts with existing digest loops
+        // Only close if we do not currently have mouse focus (since child elements can call this)
+        !vm.moused && $scope.$evalAsync("vm.isOpen = false");
+      };
+
+      vm.mouseenter = function() {
+        vm.moused = true;
+        vm.open();
+      };
+
+      vm.mouseleave = function() {
+        vm.moused = false;
+        vm.close();
       };
 
       setupDefaults();
@@ -101,8 +114,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 +155,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 +188,9 @@
               break;
           }
 
-          item.style.transform = 'translate' + axis + '(' + newPosition + 'px)';
+          var newTranslate = 'translate' + axis + '(' + newPosition + 'px)';
+
+          styles.transform = styles.webkitTransform = newTranslate;
         });
       }
     }
@@ -205,7 +221,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';
       });
     }

diff --git a/src/components/fabSpeedDial/fabSpeedDial.scss b/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;

diff --git a/src/components/fabSpeedDial/fabSpeedDial.spec.js b/src/components/fabSpeedDial/fabSpeedDial.spec.js
@@ -38,6 +38,7 @@ describe('<md-fab-speed-dial> directive', function() {
     );
 
     element.find('button').triggerHandler('focus');
+    pageScope.$digest();
     expect(controller.isOpen).toBe(true);
   }));
 
@@ -47,6 +48,7 @@ describe('<md-fab-speed-dial> directive', function() {
     );
 
     element.find('button').triggerHandler('focus');
+    pageScope.$digest();
     expect(controller.isOpen).toBe(true);
   }));
 
@@ -56,9 +58,11 @@ describe('<md-fab-speed-dial> directive', function() {
     );
 
     element.find('button').triggerHandler('focus');
+    pageScope.$digest();
     expect(controller.isOpen).toBe(true);
 
     element.find('button').triggerHandler('blur');
+    pageScope.$digest();
     expect(controller.isOpen).toBe(false);
   }));