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

Commit

Permalink
fix(fabSpeedDial): support all ng-repeat variants, fix CSS height
Browse files Browse the repository at this point in the history
 * 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.
  • Loading branch information
topherfangio authored and ThomasBurleson committed Aug 6, 2015
1 parent 5cf7470 commit 17676e6
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 31 deletions.
12 changes: 9 additions & 3 deletions src/components/fabActions/fabActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
/**
* @ngdoc directive
* @name mdFabActions
* @module material.components.fabSpeedDial
* @module material.components.fabActions
*
* @restrict E
*
Expand All @@ -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
Expand Down
40 changes: 21 additions & 19 deletions src/components/fabActions/fabActions.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('<md-fab-actions> directive', function() {

var pageScope, element, controller;

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

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

it('supports actions created by ng-repeat', inject(function() {
compileAndLink(
'<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
' <md-fab-actions>' +
' <div ng-repeat="i in nums"><md-button>{{i}}</md-button></div>' +
' </md-fab-actions>' +
'</md-fab-speed-dial>'
);

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(
'<md-fab-speed-dial ng-init="nums=[1,2,3]">' +
' <md-fab-actions>' +
' <div ' + attr + '="i in nums"><md-button>{{i}}</md-button></div>' +
' </md-fab-actions>' +
'</md-fab-speed-dial>'
);

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');
}));
});

});
2 changes: 1 addition & 1 deletion src/components/fabSpeedDial/fabSpeedDial.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 1 addition & 2 deletions src/components/fabToolbar/fabToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
* @description
*
* The `<md-fab-toolbar>` directive is used present a toolbar of elements (usually `<md-button>`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
Expand Down Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions src/components/fabToolbar/fabToolbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 6 additions & 6 deletions src/components/fabToolbar/fabToolbar.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe('<md-fab-toolbar> directive', function() {

var pageScope, element, controller;

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

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

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


it('opens when the toolbar elements are focused', inject(function() {
compileAndLink(
build(
'<md-fab-toolbar><md-fab-trigger><a></a></md-fab-trigger>' +
'<md-fab-actions><button></button></md-fab-actions></md-fab-toolbar>'
);
Expand All @@ -34,7 +34,7 @@ describe('<md-fab-toolbar> directive', function() {
}));

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

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

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

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

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

0 comments on commit 17676e6

Please sign in to comment.