From 49349c0e86fba3a7e3d1e0334fb9fecf9684394c Mon Sep 17 00:00:00 2001 From: Topher Fangio Date: Sun, 12 Jul 2015 17:52:51 -0500 Subject: [PATCH] fix(fabSpeedDial): support all ng-repeat variants, fix CSS issue * support data-ng-repeat and x-ng-repeat * change height from `initial` to `auto` to fix issue in Chrome * rename helper function in tests * fix fabActions and fabToolbar comments closes #3632, closes #3370, closes #3796 --- src/components/fabActions/fabActions.js | 12 ++++-- src/components/fabActions/fabActions.spec.js | 40 ++++++++++--------- src/components/fabSpeedDial/fabSpeedDial.scss | 2 +- src/components/fabToolbar/fabToolbar.js | 3 +- src/components/fabToolbar/fabToolbar.scss | 1 + src/components/fabToolbar/fabToolbar.spec.js | 12 +++--- 6 files changed, 39 insertions(+), 31 deletions(-) diff --git a/src/components/fabActions/fabActions.js b/src/components/fabActions/fabActions.js index cdecad778f0..b91a2aee962 100644 --- a/src/components/fabActions/fabActions.js +++ b/src/components/fabActions/fabActions.js @@ -8,7 +8,7 @@ /** * @ngdoc directive * @name mdFabActions - * @module material.components.fabSpeedDial + * @module material.components.fabActions * * @restrict E * @@ -29,8 +29,14 @@ compile: function(element, attributes) { var children = element.children(); - // Support both ng-repat and static content - if (children.attr('ng-repeat')) { + var hasNgRepeat = false; + + angular.forEach(['', 'data-', 'x-'], function(prefix) { + hasNgRepeat = hasNgRepeat || (children.attr(prefix + 'ng-repeat') ? true : false); + }); + + // Support both ng-repeat and static content + if (hasNgRepeat) { children.addClass('md-fab-action-item'); } else { // Wrap every child in a new div and add a class that we can scale/fling independently diff --git a/src/components/fabActions/fabActions.spec.js b/src/components/fabActions/fabActions.spec.js index 575f700b464..ff370d5d176 100644 --- a/src/components/fabActions/fabActions.spec.js +++ b/src/components/fabActions/fabActions.spec.js @@ -4,7 +4,7 @@ describe(' directive', function() { var pageScope, element, controller; - function compileAndLink(template) { + function build(template) { inject(function($compile, $rootScope) { pageScope = $rootScope.$new(); element = $compile(template)(pageScope); @@ -15,7 +15,7 @@ describe(' directive', function() { } it('supports static children', inject(function() { - compileAndLink( + build( '' + ' ' + ' 1' + @@ -29,22 +29,24 @@ describe(' directive', function() { expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item'); })); - it('supports actions created by ng-repeat', inject(function() { - compileAndLink( - '' + - ' ' + - '
{{i}}
' + - ' ' + - '' - ); - - expect(element.find("md-fab-actions").children().length).toBe(3); - expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item'); - - pageScope.$apply('nums=[1,2,3,4]'); - - expect(element.find("md-fab-actions").children().length).toBe(4); - expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item'); - })); + angular.forEach(['ng-repeat', 'data-ng-repeat', 'x-ng-repeat'], function(attr) { + it('supports actions created by ' + attr, inject(function() { + build( + '' + + ' ' + + '
{{i}}
' + + ' ' + + '' + ); + + expect(element.find("md-fab-actions").children().length).toBe(3); + expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item'); + + pageScope.$apply('nums=[1,2,3,4]'); + + expect(element.find("md-fab-actions").children().length).toBe(4); + expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item'); + })); + }); }); diff --git a/src/components/fabSpeedDial/fabSpeedDial.scss b/src/components/fabSpeedDial/fabSpeedDial.scss index b942684e52d..a7b5781b736 100644 --- a/src/components/fabSpeedDial/fabSpeedDial.scss +++ b/src/components/fabSpeedDial/fabSpeedDial.scss @@ -18,7 +18,7 @@ md-fab-speed-dial { display: flex; // Set the height so that the z-index in the JS animation works - height: initial; + height: auto; .md-fab-action-item { visibility: hidden; diff --git a/src/components/fabToolbar/fabToolbar.js b/src/components/fabToolbar/fabToolbar.js index a97e3d60223..622aef8eb99 100644 --- a/src/components/fabToolbar/fabToolbar.js +++ b/src/components/fabToolbar/fabToolbar.js @@ -28,7 +28,7 @@ * @description * * The `` directive is used present a toolbar of elements (usually ``s) - * for quick access to common actions when a floating action button is activated (via hover or + * for quick access to common actions when a floating action button is activated (via click or * keyboard navigation). * * @usage @@ -145,7 +145,6 @@ // If we're open if (ctrl.isOpen) { - // Set the width/height to take up the full toolbar width backgroundElement.style.width = scale + 'px'; backgroundElement.style.height = scale + 'px'; diff --git a/src/components/fabToolbar/fabToolbar.scss b/src/components/fabToolbar/fabToolbar.scss index ae9a67c1b57..fe8137f1e1f 100644 --- a/src/components/fabToolbar/fabToolbar.scss +++ b/src/components/fabToolbar/fabToolbar.scss @@ -79,6 +79,7 @@ md-fab-toolbar { md-toolbar { background-color: transparent !important; + pointer-events: none; z-index: $z-index-fab + 3; .md-toolbar-tools { diff --git a/src/components/fabToolbar/fabToolbar.spec.js b/src/components/fabToolbar/fabToolbar.spec.js index ce7959c22ae..9de8137063c 100644 --- a/src/components/fabToolbar/fabToolbar.spec.js +++ b/src/components/fabToolbar/fabToolbar.spec.js @@ -4,7 +4,7 @@ describe(' directive', function() { var pageScope, element, controller; - function compileAndLink(template) { + function build(template) { inject(function($compile, $rootScope) { pageScope = $rootScope.$new(); element = $compile(template)(pageScope); @@ -15,7 +15,7 @@ describe(' directive', function() { } it('disables tabbing to the trigger (go straight to first element instead)', inject(function() { - compileAndLink( + build( '' ); @@ -24,7 +24,7 @@ describe(' directive', function() { it('opens when the toolbar elements are focused', inject(function() { - compileAndLink( + build( '' + '' ); @@ -34,7 +34,7 @@ describe(' directive', function() { })); it('closes when the toolbar elements are blurred', inject(function() { - compileAndLink( + build( '' ); @@ -46,7 +46,7 @@ describe(' directive', function() { })); it('allows programmatic opening through the md-open attribute', inject(function() { - compileAndLink( + build( '' ); @@ -63,7 +63,7 @@ describe(' directive', function() { })); it('properly finishes the animation', inject(function(mdFabToolbarAnimation) { - compileAndLink( + build( '' + ' ' + ' ' +