Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 17676e6

Browse files
topherfangioThomasBurleson
authored andcommitted
fix(fabSpeedDial): support all ng-repeat variants, fix CSS height
* 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. closes #4006.
1 parent 5cf7470 commit 17676e6

File tree

6 files changed

+39
-31
lines changed

6 files changed

+39
-31
lines changed

src/components/fabActions/fabActions.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
/**
99
* @ngdoc directive
1010
* @name mdFabActions
11-
* @module material.components.fabSpeedDial
11+
* @module material.components.fabActions
1212
*
1313
* @restrict E
1414
*
@@ -29,8 +29,14 @@
2929
compile: function(element, attributes) {
3030
var children = element.children();
3131

32-
// Support both ng-repat and static content
33-
if (children.attr('ng-repeat')) {
32+
var hasNgRepeat = false;
33+
34+
angular.forEach(['', 'data-', 'x-'], function(prefix) {
35+
hasNgRepeat = hasNgRepeat || (children.attr(prefix + 'ng-repeat') ? true : false);
36+
});
37+
38+
// Support both ng-repeat and static content
39+
if (hasNgRepeat) {
3440
children.addClass('md-fab-action-item');
3541
} else {
3642
// Wrap every child in a new div and add a class that we can scale/fling independently

src/components/fabActions/fabActions.spec.js

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ describe('<md-fab-actions> directive', function() {
44

55
var pageScope, element, controller;
66

7-
function compileAndLink(template) {
7+
function build(template) {
88
inject(function($compile, $rootScope) {
99
pageScope = $rootScope.$new();
1010
element = $compile(template)(pageScope);
@@ -15,7 +15,7 @@ describe('<md-fab-actions> directive', function() {
1515
}
1616

1717
it('supports static children', inject(function() {
18-
compileAndLink(
18+
build(
1919
'<md-fab-speed-dial>' +
2020
' <md-fab-actions>' +
2121
' <md-button>1</md-button>' +
@@ -29,22 +29,24 @@ describe('<md-fab-actions> directive', function() {
2929
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
3030
}));
3131

32-
it('supports actions created by ng-repeat', inject(function() {
33-
compileAndLink(
34-
'<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
35-
' <md-fab-actions>' +
36-
' <div ng-repeat="i in nums"><md-button>{{i}}</md-button></div>' +
37-
' </md-fab-actions>' +
38-
'</md-fab-speed-dial>'
39-
);
40-
41-
expect(element.find("md-fab-actions").children().length).toBe(3);
42-
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
43-
44-
pageScope.$apply('nums=[1,2,3,4]');
45-
46-
expect(element.find("md-fab-actions").children().length).toBe(4);
47-
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
48-
}));
32+
angular.forEach(['ng-repeat', 'data-ng-repeat', 'x-ng-repeat'], function(attr) {
33+
it('supports actions created by ' + attr, inject(function() {
34+
build(
35+
'<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
36+
' <md-fab-actions>' +
37+
' <div ' + attr + '="i in nums"><md-button>{{i}}</md-button></div>' +
38+
' </md-fab-actions>' +
39+
'</md-fab-speed-dial>'
40+
);
41+
42+
expect(element.find("md-fab-actions").children().length).toBe(3);
43+
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
44+
45+
pageScope.$apply('nums=[1,2,3,4]');
46+
47+
expect(element.find("md-fab-actions").children().length).toBe(4);
48+
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
49+
}));
50+
});
4951

5052
});

src/components/fabSpeedDial/fabSpeedDial.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ md-fab-speed-dial {
1818
display: flex;
1919

2020
// Set the height so that the z-index in the JS animation works
21-
height: initial;
21+
height: auto;
2222

2323
.md-fab-action-item {
2424
visibility: hidden;

src/components/fabToolbar/fabToolbar.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
* @description
2929
*
3030
* The `<md-fab-toolbar>` directive is used present a toolbar of elements (usually `<md-button>`s)
31-
* for quick access to common actions when a floating action button is activated (via hover or
31+
* for quick access to common actions when a floating action button is activated (via click or
3232
* keyboard navigation).
3333
*
3434
* @usage
@@ -145,7 +145,6 @@
145145

146146
// If we're open
147147
if (ctrl.isOpen) {
148-
149148
// Set the width/height to take up the full toolbar width
150149
backgroundElement.style.width = scale + 'px';
151150
backgroundElement.style.height = scale + 'px';

src/components/fabToolbar/fabToolbar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ md-fab-toolbar {
7979

8080
md-toolbar {
8181
background-color: transparent !important;
82+
pointer-events: none;
8283
z-index: $z-index-fab + 3;
8384

8485
.md-toolbar-tools {

src/components/fabToolbar/fabToolbar.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ describe('<md-fab-toolbar> directive', function() {
44

55
var pageScope, element, controller;
66

7-
function compileAndLink(template) {
7+
function build(template) {
88
inject(function($compile, $rootScope) {
99
pageScope = $rootScope.$new();
1010
element = $compile(template)(pageScope);
@@ -15,7 +15,7 @@ describe('<md-fab-toolbar> directive', function() {
1515
}
1616

1717
it('disables tabbing to the trigger (go straight to first element instead)', inject(function() {
18-
compileAndLink(
18+
build(
1919
'<md-fab-toolbar><md-fab-trigger><button></button></md-fab-trigger></md-fab-toolbar>'
2020
);
2121

@@ -24,7 +24,7 @@ describe('<md-fab-toolbar> directive', function() {
2424

2525

2626
it('opens when the toolbar elements are focused', inject(function() {
27-
compileAndLink(
27+
build(
2828
'<md-fab-toolbar><md-fab-trigger><a></a></md-fab-trigger>' +
2929
'<md-fab-actions><button></button></md-fab-actions></md-fab-toolbar>'
3030
);
@@ -34,7 +34,7 @@ describe('<md-fab-toolbar> directive', function() {
3434
}));
3535

3636
it('closes when the toolbar elements are blurred', inject(function() {
37-
compileAndLink(
37+
build(
3838
'<md-fab-toolbar><md-fab-actions><button></button></md-fab-actions></md-fab-toolbar>'
3939
);
4040

@@ -46,7 +46,7 @@ describe('<md-fab-toolbar> directive', function() {
4646
}));
4747

4848
it('allows programmatic opening through the md-open attribute', inject(function() {
49-
compileAndLink(
49+
build(
5050
'<md-fab-toolbar md-open="isOpen"></md-fab-toolbar>'
5151
);
5252

@@ -63,7 +63,7 @@ describe('<md-fab-toolbar> directive', function() {
6363
}));
6464

6565
it('properly finishes the animation', inject(function(mdFabToolbarAnimation) {
66-
compileAndLink(
66+
build(
6767
'<md-fab-toolbar md-open="isOpen">' +
6868
' <md-fab-trigger><button></button></md-fab-trigger>' +
6969
' <md-fab-actions><button></button></md-fab-actions>' +

0 commit comments

Comments
 (0)