diff --git a/src/components/fabSpeedDial/demoBasicUsage/index.html b/src/components/fabSpeedDial/demoBasicUsage/index.html index 847127dc52e..c7aa761cf9a 100644 --- a/src/components/fabSpeedDial/demoBasicUsage/index.html +++ b/src/components/fabSpeedDial/demoBasicUsage/index.html @@ -1,4 +1,4 @@ -
+

You may supply a direction of left, up, down, or @@ -21,7 +21,7 @@ - + diff --git a/src/components/fabSpeedDial/demoBasicUsage/script.js b/src/components/fabSpeedDial/demoBasicUsage/script.js index fc45d80b85c..516392c1788 100644 --- 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 new file mode 100644 index 00000000000..76d8a98ae7b --- /dev/null +++ b/src/components/fabSpeedDial/demoModal/index.html @@ -0,0 +1,42 @@ +

+ +

+ You can also use the buttons to open a dialog. +

+ +
+ + + + Menu + + + + + + + Open dialog + + + + +
+ + + +
diff --git a/src/components/fabSpeedDial/demoModal/script.js b/src/components/fabSpeedDial/demoModal/script.js new file mode 100644 index 00000000000..b3da36b86ff --- /dev/null +++ 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 new file mode 100644 index 00000000000..b6790ce5dbf --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/components/fabSpeedDial/demoTooltips/index.html b/src/components/fabSpeedDial/demoTooltips/index.html new file mode 100644 index 00000000000..83242720275 --- /dev/null +++ b/src/components/fabSpeedDial/demoTooltips/index.html @@ -0,0 +1,35 @@ +
+ +

+ You may add tooltips to both the trigger and actions. +

+ +
+ + + + Menu + + + + + + + Twitter + + + + + Facebook + + + + + Google Hangout + + + + +
+ +
diff --git a/src/components/fabSpeedDial/demoTooltips/script.js b/src/components/fabSpeedDial/demoTooltips/script.js new file mode 100644 index 00000000000..e69de29bb2d diff --git a/src/components/fabSpeedDial/demoTooltips/style.scss b/src/components/fabSpeedDial/demoTooltips/style.scss new file mode 100644 index 00000000000..b7bdd49aa1d --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/components/fabSpeedDial/fabSpeedDial.js b/src/components/fabSpeedDial/fabSpeedDial.js index 47fc2ac47fa..61c4751e152 100644 --- 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 index a7507002906..d234eb0ef6a 100644 --- 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 index 27cf8058542..3545a5cd9ff 100644 --- a/src/components/fabSpeedDial/fabSpeedDial.spec.js +++ b/src/components/fabSpeedDial/fabSpeedDial.spec.js @@ -38,6 +38,7 @@ describe(' directive', function() { ); element.find('button').triggerHandler('focus'); + pageScope.$digest(); expect(controller.isOpen).toBe(true); })); @@ -47,6 +48,7 @@ describe(' directive', function() { ); element.find('button').triggerHandler('focus'); + pageScope.$digest(); expect(controller.isOpen).toBe(true); })); @@ -56,9 +58,11 @@ describe(' 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); }));