From c1b3a2a39ecede75ae54d9bf46fbeb13ce51e6ff Mon Sep 17 00:00:00 2001
From: Topher Fangio <topher@profoundry.us>
Date: Fri, 18 Sep 2015 11:56:30 -0500
Subject: [PATCH] fix(fabSpeedDial): Make hovering an option via CSS.

Initially, the speed dial was designed to always open
when the user hovered over any portion of the speed
dial (including the area where the actions would
eventually appear). However, this made the speed dial
unusable on mobile (and sometimes unusable on desktop)
because it disallowed the user from pressing anything
underneath the actions.

Add the `md-hover-full` CSS class to allow developer
configuration of this behavior.

Ensure fabToolbar also works this way, and fix jumpy
animation.

Also updated the docs/demos and made the demos easier
to use on mobile.

BREAKING CHANGE - The fabSpeedDial no longer automatically
opens when hovering over the invisible actions. Add the
`md-hover-full` class to enable this interaction.

Fixes #4259.
---
 .../fabSpeedDial/demoBasicUsage/index.html    |   6 +-
 .../fabSpeedDial/demoMoreOptions/index.html   | 127 ++++++++++--------
 .../fabSpeedDial/demoMoreOptions/script.js    |  22 ++-
 .../fabSpeedDial/demoMoreOptions/style.scss   |  37 ++++-
 src/components/fabSpeedDial/fabSpeedDial.js   |  14 ++
 src/components/fabSpeedDial/fabSpeedDial.scss |  21 ++-
 src/components/fabToolbar/fabToolbar.js       |  34 ++---
 7 files changed, 168 insertions(+), 93 deletions(-)

diff --git a/src/components/fabSpeedDial/demoBasicUsage/index.html b/src/components/fabSpeedDial/demoBasicUsage/index.html
index 1c056239f75..906690dbca7 100644
--- a/src/components/fabSpeedDial/demoBasicUsage/index.html
+++ b/src/components/fabSpeedDial/demoBasicUsage/index.html
@@ -29,7 +29,7 @@
     </div>
 
     <div layout="row" layout-align="space-around">
-      <div layout="column">
+      <div layout="column" layout-align="start center">
         <b>Direction</b>
 
         <md-radio-group ng-model="demo.selectedDirection">
@@ -40,7 +40,7 @@
         </md-radio-group>
       </div>
 
-      <div layout="column">
+      <div layout="column" layout-align="start center">
         <b>Open/Closed</b>
 
         <md-radio-group ng-model="demo.isOpen">
@@ -49,7 +49,7 @@
         </md-radio-group>
       </div>
 
-      <div layout="column">
+      <div layout="column" layout-align="start center">
         <b>Animation Modes</b>
 
         <md-radio-group ng-model="demo.selectedMode">
diff --git a/src/components/fabSpeedDial/demoMoreOptions/index.html b/src/components/fabSpeedDial/demoMoreOptions/index.html
index 79a12fe8534..d942d58ed04 100644
--- a/src/components/fabSpeedDial/demoMoreOptions/index.html
+++ b/src/components/fabSpeedDial/demoMoreOptions/index.html
@@ -1,36 +1,69 @@
 <div layout="column" ng-controller="DemoCtrl as demo">
   <md-content class="md-padding" layout="column">
+
+    <md-toolbar>
+      <h3>
+        <md-button>Test</md-button>
+        <md-button>Test</md-button>
+        <md-button hide-sm>Test</md-button>
+        <md-button hide-sm>Test</md-button>
+        <md-button hide-sm>Test</md-button>
+        <md-button hide-sm>Test</md-button>
+        <md-button hide-sm>Test</md-button>
+      </h3>
+    </md-toolbar>
+
     <p>
-      The speed dial supports many advanced usage scenarios. This demo shows many of them mixed
-      together.
+      The speed dial supports many advanced usage scenarios.
+      <br />
+      This demo shows many of them mixed together.
     </p>
 
-    <div class="lock-size" layout="row" layout-align="center center">
-      <md-fab-speed-dial ng-hide="demo.hidden" md-direction="down" class="md-fling"
-                         md-open="demo.isOpen"
-                         ng-mouseenter="demo.isOpen=true" ng-mouseleave="demo.isOpen=false">
-        <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" aria-label="menu"></md-icon>
+    <md-fab-speed-dial ng-hide="demo.hidden" md-direction="left" md-open="demo.isOpen"
+                       class="md-scale md-fab-top-right" ng-class="{ 'md-hover-full': demo.hover }"
+                       ng-mouseenter="demo.isOpen=true" ng-mouseleave="demo.isOpen=false">
+      <md-fab-trigger>
+        <md-button aria-label="menu" class="md-fab md-warn">
+          <md-tooltip md-direction="top" md-visible="tooltipVisible">Menu</md-tooltip>
+          <md-icon md-svg-src="img/icons/menu.svg" aria-label="menu"></md-icon>
+        </md-button>
+      </md-fab-trigger>
+
+      <md-fab-actions>
+        <div ng-repeat="item in demo.items">
+          <md-button aria-label="{{item.name}}" class="md-fab md-raised md-mini"
+                     ng-click="demo.openDialog($event, item)">
+            <md-tooltip md-direction="{{item.direction}}" md-visible="tooltipVisible"
+                        md-autohide="false">
+              {{item.name}}
+            </md-tooltip>
+
+            <md-icon md-svg-src="{{item.icon}}" aria-label="{{item.name}}"></md-icon>
           </md-button>
-        </md-fab-trigger>
-
-        <md-fab-actions>
-          <div ng-repeat="item in demo.items">
-            <md-button aria-label="{{item.name}}" class="md-fab md-raised md-mini"
-                       ng-click="demo.openDialog($event, item)">
-              <md-tooltip md-direction="{{item.direction}}">{{item.name}}</md-tooltip>
-              <md-icon md-svg-src="{{item.icon}}" aria-label="{{item.name}}"></md-icon>
-            </md-button>
-          </div>
-        </md-fab-actions>
-      </md-fab-speed-dial>
-    </div>
+        </div>
+      </md-fab-actions>
+    </md-fab-speed-dial>
   </md-content>
 
-  <md-content class="md-padding" layout="row">
-    <div flex="50">
+  <md-content class="md-padding" layout="row" layout-sm="column" layout-align="space-around">
+    <div flex-gt-sm="45">
+      <h3>Tooltips</h3>
+
+      <p>
+        Each action item supports a tooltip using the standard approach as can be seen above.
+      </p>
+
+      <h3>ngHide</h3>
+
+      <p>
+        The speed dial also supports hiding using the standard <code>ng-hide</code> attribute. View
+        the source to see how to apply the animation effect.
+
+        <md-checkbox ng-model="demo.hidden">
+          Hide the speed dial.
+        </md-checkbox>
+      </p>
+
       <h3>ngRepeat</h3>
 
       <p>
@@ -43,53 +76,39 @@ <h3>ngRepeat</h3>
         that wraps your items.
       </p>
     </div>
-    <div flex="50">
-      <h3>$mdDialog</h3>
+
+    <div flex-gt-sm="45">
+      <h3>Hovering</h3>
 
       <p>
-        You can also use the buttons to open a dialog. When clicked, the buttons above will open a
-        dialog showing a message which item was clicked.
+        You can also easily setup the speed dial to open on hover using the
+        <code>ng-mouseenter</code> and <code>ng-mouseleave</code> attributes.
       </p>
-    </div>
-  </md-content>
-
-  <md-content class="md-padding" layout="row">
-    <div flex="50">
-      <h3>ngHide</h3>
 
       <p>
-        The speed dial also supports hiding using the standard <code>ng-hide</code> attribute.
+        If you want the user to be able to hover over the empty area where the
+        actions will eventually appear, you must also add the
+        <code>md-hover-full</code> class to the speed dial element.
 
-        <md-checkbox ng-model="demo.hidden">
-          Hide the speed dial.
+        <md-checkbox ng-model="demo.hover">
+          Enable "full hover" mode.
         </md-checkbox>
       </p>
-    </div>
-    <div flex="50">
-      <h3>Tooltips</h3>
 
       <p>
-        Each action item supports a tooltip using the standard approach as can be seen above.
+        Notice that in "full hover" mode, you cannot click on the last "Test" buttons on the toolbar
+        as they are hidden by the speed dial. See the example code and docs for more information.
       </p>
-    </div>
-  </md-content>
-
-  <md-content class="md-padding" layout="row">
-    <div flex="50">
-      <h3>Hovering</h3>
 
-      <p>
-        You can also easily setup the speed dial to open on hover using the
-        <code>ng-mouseenter</code> and <code>ng-mouseleave</code> attributes.
-      </p>
+      <h3>$mdDialog</h3>
 
       <p>
-        See the example code for more information.
+        You can also use the buttons to open a dialog. When clicked, the buttons above will open a
+        dialog showing a message which item was clicked.
       </p>
     </div>
   </md-content>
 
-
   <script type="text/ng-template" id="dialog.html">
     <md-dialog>
       <md-dialog-content>Hello User! You clicked {{dialog.item.name}}.</md-dialog-content>
diff --git a/src/components/fabSpeedDial/demoMoreOptions/script.js b/src/components/fabSpeedDial/demoMoreOptions/script.js
index 8e6eac11510..4e031962e8b 100644
--- a/src/components/fabSpeedDial/demoMoreOptions/script.js
+++ b/src/components/fabSpeedDial/demoMoreOptions/script.js
@@ -2,15 +2,29 @@
   'use strict';
 
   angular.module('fabSpeedDialDemoMoreOptions', ['ngMaterial'])
-    .controller('DemoCtrl', function($mdDialog) {
+    .controller('DemoCtrl', function($scope, $mdDialog, $timeout) {
       var self = this;
 
       self.hidden = false;
+      self.isOpen = false;
+      self.hover = false;
+
+      // On opening, add a delayed property which shows tooltips after the speed dial has opened
+      // so that they have the proper position; if closing, immediately hide the tooltips
+      $scope.$watch('demo.isOpen', function(isOpen) {
+        if (isOpen) {
+          $timeout(function() {
+            $scope.tooltipVisible = self.isOpen;
+          }, 600);
+        } else {
+          $scope.tooltipVisible = self.isOpen;
+        }
+      });
 
       self.items = [
-        {name: "Twitter", icon: "img/icons/twitter.svg", direction: "left" },
-        {name: "Facebook", icon: "img/icons/facebook.svg", direction: "right" },
-        {name: "Google Hangout", icon: "img/icons/hangout.svg", direction: "left" }
+        { name: "Twitter", icon: "img/icons/twitter.svg", direction: "bottom" },
+        { name: "Facebook", icon: "img/icons/facebook.svg", direction: "top" },
+        { name: "Google Hangout", icon: "img/icons/hangout.svg", direction: "bottom" }
       ];
 
       self.openDialog = function($event, item) {
diff --git a/src/components/fabSpeedDial/demoMoreOptions/style.scss b/src/components/fabSpeedDial/demoMoreOptions/style.scss
index 5266a2089a4..05e658c558f 100644
--- a/src/components/fabSpeedDial/demoMoreOptions/style.scss
+++ b/src/components/fabSpeedDial/demoMoreOptions/style.scss
@@ -1,10 +1,13 @@
-.lock-size {
-  min-width: 300px;
-  min-height: 300px;
-  width: 300px;
-  height: 300px;
-  margin-left: auto;
-  margin-right: auto;
+// Line the fab up properly on different screen sizes/layouts
+.md-fab-top-right {
+  top: 16px;
+}
+
+@media only screen and (max-device-width: 600px) {
+  .md-fab-top-right {
+    top: 9px;
+    right: 9px;
+  }
 }
 
 .md-fab.demo-fab.trigger-fab, .md-fab.demo-fab.action-fab {
@@ -23,3 +26,23 @@ md-content div {
     padding: 15px;
   }
 }
+
+
+md-fab-speed-dial {
+  // Add a simple scale transition to the trigger when hiding/showing the speed dial
+  md-fab-trigger {
+    transition: all 0.3s ease-in-out;
+    transform: scale(1);
+  }
+
+  // Note: you MUST use an existing CSS class for the animation to fire properly
+  &.md-scale, &.md-fling {
+    &.ng-hide {
+      display: flex !important;
+
+      md-fab-trigger {
+        transform: scale(0);
+      }
+    }
+  }
+}
diff --git a/src/components/fabSpeedDial/fabSpeedDial.js b/src/components/fabSpeedDial/fabSpeedDial.js
index be7fb69b309..4117cf216d6 100644
--- a/src/components/fabSpeedDial/fabSpeedDial.js
+++ b/src/components/fabSpeedDial/fabSpeedDial.js
@@ -53,6 +53,11 @@
    * These CSS classes use `position: absolute`, so you need to ensure that the container element
    * also uses `position: absolute` or `position: relative` in order for them to work.
    *
+   * Additionally, you may use the standard `ng-mouseenter` and `ng-mouseleave` directives to
+   * open or close the speed dial. However, if you wish to allow users to hover over the empty
+   * space where the actions will appear, you must also add the `md-hover-full` class to the speed
+   * dial element. Without this, the hover effect will only occur on top of the trigger.
+   *
    * @usage
    * <hljs lang="html">
    * <md-fab-speed-dial md-direction="up" class="md-fling">
@@ -182,6 +187,12 @@
       var ctrl = element.controller('mdFabSpeedDial');
       var items = el.querySelectorAll('.md-fab-action-item');
 
+      // Grab our element which stores CSS variables
+      var variablesElement = el.querySelector('.md-css-variables');
+
+      // Setup JS variables based on our CSS variables
+      var startZIndex = parseInt(window.getComputedStyle(variablesElement).zIndex);
+
       // Always reset the items to their natural position/state
       angular.forEach(items, function(item, index) {
         var styles = item.style,
@@ -190,6 +201,9 @@
         styles.opacity = ctrl.isOpen ? 1 : 0;
         styles.transform = styles.webkitTransform = ctrl.isOpen ? 'scale(1)' : 'scale(0)';
         styles.transitionDelay = (ctrl.isOpen ? offsetDelay : (items.length - offsetDelay)) + 'ms';
+
+        // Make the items closest to the trigger have the highest z-index
+        styles.zIndex = (items.length - index) + startZIndex;
       });
     }
 
diff --git a/src/components/fabSpeedDial/fabSpeedDial.scss b/src/components/fabSpeedDial/fabSpeedDial.scss
index 7d5fc643b5e..f20edff6be4 100644
--- a/src/components/fabSpeedDial/fabSpeedDial.scss
+++ b/src/components/fabSpeedDial/fabSpeedDial.scss
@@ -3,8 +3,27 @@ md-fab-speed-dial {
   display: flex;
   align-items: center;
 
-  // Include the top/left/bottom/right fab positions
+  // Include the top/left/bottom/right fab positions and set the z-index for absolute positioning
   @include fab-all-positions();
+  z-index: $z-index-fab;
+
+  // Allow users to enable/disable hovering over the entire speed dial (i.e. the empty space where
+  // items will eventually appear)
+  &:not(.md-hover-full) {
+    // Turn off pointer events when closed
+    pointer-events: none;
+
+    md-fab-trigger, .md-fab-action-item {
+      // Always make the trigger and action items always have pointer events (the tooltip looks
+      // for the first parent with pointer-events, so we must set this for tooltips to work)
+      pointer-events: auto;
+    }
+
+    &.md-is-open {
+      // Turn on pointer events when open
+      pointer-events: auto;
+    }
+  }
 
   .md-css-variables {
     z-index: $z-index-fab;
diff --git a/src/components/fabToolbar/fabToolbar.js b/src/components/fabToolbar/fabToolbar.js
index 49ab47e6fd5..32db9f52304 100644
--- a/src/components/fabToolbar/fabToolbar.js
+++ b/src/components/fabToolbar/fabToolbar.js
@@ -125,8 +125,8 @@
         var width = el.offsetWidth;
         var height = el.offsetHeight;
 
-        // Make a square
-        var scale = width * 2;
+        // Make it twice as big as it should be since we scale from the center
+        var scale = 2 * (width / triggerElement.offsetWidth);
 
         // Set some basic styles no matter what animation we're doing
         backgroundElement.style.backgroundColor = color;
@@ -137,22 +137,9 @@
           // Turn on toolbar pointer events when closed
           toolbarElement.style.pointerEvents = 'initial';
 
-          // Set the width/height to take up the full toolbar width
-          backgroundElement.style.width = scale + 'px';
-          backgroundElement.style.height = scale + 'px';
-
-          // Set the top/left to move up/left (or right) by the scale width/height
-          backgroundElement.style.top = -(scale / 2) + 'px';
-
-          if (element.hasClass('md-right')) {
-            backgroundElement.style.left = -(scale / 2) + 'px';
-            backgroundElement.style.right = null;
-          }
-
-          if (element.hasClass('md-left')) {
-            backgroundElement.style.right = -(scale / 2) + 'px';
-            backgroundElement.style.left = null;
-          }
+          backgroundElement.style.width = triggerElement.offsetWidth + 'px';
+          backgroundElement.style.height = triggerElement.offsetHeight + 'px';
+          backgroundElement.style.transform = 'scale(' + scale + ')';
 
           // Set the next close animation to have the proper delays
           backgroundElement.style.transitionDelay = '0ms';
@@ -166,20 +153,19 @@
           // Turn off toolbar pointer events when closed
           toolbarElement.style.pointerEvents = 'none';
 
-          // Otherwise, set the width/height to the trigger's width/height
-          backgroundElement.style.width = triggerElement.offsetWidth + 'px';
-          backgroundElement.style.height = triggerElement.offsetHeight + 'px';
+          // Scale it back down to the trigger's size
+          backgroundElement.style.transform = 'scale(1)';
 
           // Reset the position
-          backgroundElement.style.top = '0px';
+          backgroundElement.style.top = '0';
 
           if (element.hasClass('md-right')) {
-            backgroundElement.style.left = '0px';
+            backgroundElement.style.left = '0';
             backgroundElement.style.right = null;
           }
 
           if (element.hasClass('md-left')) {
-            backgroundElement.style.right = '0px';
+            backgroundElement.style.right = '0';
             backgroundElement.style.left = null;
           }