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

fix(fabSpeedDial): support all ng-repeat variants, fix CSS issues #4006

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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