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 · Jul 5, 2015 · 8081404 · 8081404
1 parent 9434120
commit 8081404
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 0 deletions.
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;
+}