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

Commit 5e3a651

Browse files
topherfangioThomasBurleson
topherfangio
authored and
ThomasBurleson
committed
fix(fabSpeedDial): ng-hide, ng-repeat, animation bug
* fixes ability to use ng-hide: the animations were not properly calling the `done()` callback, so the `ng-animate` class was never being removed * you can now use ng-repeat for the speed dial's action items also updated docs to have fewer but more complex examples * the speed dial was not properly initializing it's transforms, so the first time it was opened, it would not animate properly closes #3313. closes #3224. closes #3349. closes #3600.
1 parent 5d2bcbf commit 5e3a651

File tree

10 files changed

+256
-101
lines changed

10 files changed

+256
-101
lines changed

‎src/components/fabActions/fabActions.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,19 @@
2626

2727
require: ['^?mdFabSpeedDial', '^?mdFabToolbar'],
2828

29+
compile: function(element, attributes) {
30+
var children = element.children();
31+
32+
// Support both ng-repat and static content
33+
if (children.attr('ng-repeat')) {
34+
children.addClass('md-fab-action-item');
35+
} else {
36+
// After setting up the listeners, wrap every child in a new div and add a class that we can
37+
// scale/fling independently
38+
children.wrap('<div class="md-fab-action-item">');
39+
}
40+
},
41+
2942
link: function(scope, element, attributes, controllers) {
3043
// Grab whichever parent controller is used
3144
var controller = controllers[0] || controllers[1];
@@ -37,10 +50,6 @@
3750
angular.element(child).on('blur', controller.close);
3851
});
3952
}
40-
41-
// After setting up the listeners, wrap every child in a new div and add a class that we can
42-
// scale/fling independently
43-
element.children().wrap('<div class="md-fab-action-item">');
4453
}
4554
}
4655
}

‎src/components/fabActions/fabActions.spec.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
ddescribe('<md-fab-actions> directive', function() {
2+
3+
beforeEach(module('material.components.fabActions'));
4+
5+
var pageScope, element, controller;
6+
7+
function compileAndLink(template) {
8+
inject(function($compile, $rootScope) {
9+
pageScope = $rootScope.$new();
10+
element = $compile(template)(pageScope);
11+
controller = element.controller('mdFabActions');
12+
13+
pageScope.$apply();
14+
});
15+
}
16+
17+
it('supports static children', inject(function() {
18+
compileAndLink(
19+
'<md-fab-speed-dial>' +
20+
' <md-fab-actions>' +
21+
' <md-button>1</md-button>' +
22+
' <md-button>2</md-button>' +
23+
' <md-button>3</md-button>' +
24+
' </md-fab-actions>' +
25+
'</md-fab-speed-dial>'
26+
);
27+
28+
expect(element.find("md-fab-actions").children().length).toBe(3);
29+
expect(element.find("md-fab-actions").children()).toHaveClass('md-fab-action-item');
30+
}));
31+
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+
}));
49+
50+
});

‎src/components/fabSpeedDial/demoBasicUsage/script.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function() {
22
'use strict';
33

4-
angular.module('fabSpeedDialBasicUsageDemo', ['ngMaterial'])
4+
angular.module('fabSpeedDialDemoBasicUsage', ['ngMaterial'])
55
.controller('DemoCtrl', function() {
66
this.topDirections = ['left', 'up'];
77
this.bottomDirections = ['down', 'right'];

‎src/components/fabSpeedDial/demoMoreOptions/index.html

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<div layout="column" ng-controller="DemoCtrl as demo">
2+
<md-content class="md-padding" layout="column">
3+
<p>
4+
The speed dial supports many advanced usage scenarios. This demo shows many of them mixed
5+
together.
6+
</p>
7+
8+
<div class="lock-size" layout="row" layout-align="center center">
9+
<md-fab-speed-dial ng-hide="demo.hidden" md-direction="down" class="md-fling">
10+
<md-fab-trigger>
11+
<md-button aria-label="menu" class="md-fab md-warn">
12+
<md-tooltip md-direction="top">Menu</md-tooltip>
13+
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
14+
</md-button>
15+
</md-fab-trigger>
16+
17+
<md-fab-actions>
18+
<div ng-repeat="item in demo.items">
19+
<md-button aria-label="{{item.name}}" class="md-fab md-raised md-mini"
20+
ng-click="demo.openDialog($event, item)">
21+
<md-tooltip md-direction="{{item.direction}}">{{item.name}}</md-tooltip>
22+
<md-icon md-svg-src="{{item.icon}}"></md-icon>
23+
</md-button>
24+
</div>
25+
</md-fab-actions>
26+
</md-fab-speed-dial>
27+
</div>
28+
</md-content>
29+
30+
<md-content class="md-padding" layout="row">
31+
<div flex="50">
32+
<h3>ngRepeat</h3>
33+
34+
<p>
35+
You can easily use <code>ng-repeat</code> with the speed dial, but it requires a slightly
36+
different HTML structure in order to support the necessary DOM changes/styling.
37+
</p>
38+
39+
<p>
40+
Simply ensure that your <code>ng-repeat</code> is on a <code>div</code> (or any other tag)
41+
that wraps your items.
42+
</p>
43+
</div>
44+
<div flex="50">
45+
<h3>$mdDialog</h3>
46+
47+
<p>
48+
You can also use the buttons to open a dialog. When clicked, the buttons above will open a
49+
dialog showing a message which item was clicked.
50+
</p>
51+
</div>
52+
</md-content>
53+
54+
<md-content class="md-padding" layout="row">
55+
<div flex="50">
56+
<h3>ngHide</h3>
57+
58+
<p>
59+
The speed dial also supports hiding using the standard <code>ng-hide</code> attribute.
60+
61+
<md-checkbox ng-model="demo.hidden">
62+
Hide the speed dial.
63+
</md-checkbox>
64+
</p>
65+
</div>
66+
<div flex="50">
67+
<h3>Tooltips</h3>
68+
69+
<p>
70+
Each action item supports a tooltip using the standard approach as can be seen above.
71+
</p>
72+
</div>
73+
</md-content>
74+
75+
<script type="text/ng-template" id="dialog.html">
76+
<md-dialog>
77+
<md-dialog-content>Hello User! You clicked {{dialog.item.name}}.</md-dialog-content>
78+
79+
<div class="md-actions">
80+
<md-button aria-label="Close dialog" ng-click="dialog.close()" class="md-primary">
81+
Close Greeting
82+
</md-button>
83+
84+
<md-button aria-label="Submit dialog" ng-click="dialog.submit()" class="md-primary">
85+
Submit
86+
</md-button>
87+
</div>
88+
</md-dialog>
89+
</script>
90+
91+
</div>

‎src/components/fabSpeedDial/demoMoreOptions/script.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
(function() {
2+
'use strict';
3+
4+
angular.module('fabSpeedDialDemoMoreOptions', ['ngMaterial'])
5+
.controller('DemoCtrl', function($mdDialog) {
6+
var self = this;
7+
8+
self.hidden = false;
9+
10+
self.items = [
11+
{name: "Twitter", icon: "img/icons/twitter.svg", direction: "left" },
12+
{name: "Facebook", icon: "img/icons/facebook.svg", direction: "right" },
13+
{name: "Google Hangout", icon: "img/icons/hangout.svg", direction: "left" }
14+
];
15+
16+
self.openDialog = function($event, item) {
17+
// Show the dialog
18+
$mdDialog.show({
19+
clickOutsideToClose: true,
20+
controller: function($mdDialog) {
21+
// Save the clicked item
22+
this.item = item;
23+
24+
// Setup some handlers
25+
this.close = function() {
26+
$mdDialog.cancel();
27+
};
28+
this.submit = function() {
29+
$mdDialog.hide();
30+
};
31+
},
32+
controllerAs: 'dialog',
33+
templateUrl: 'dialog.html',
34+
targetEvent: $event
35+
});
36+
}
37+
});
38+
})();

‎src/components/fabSpeedDial/demoTooltips/style.scss renamed to ‎src/components/fabSpeedDial/demoMoreOptions/style.scss

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
.text-capitalize {
2-
text-transform: capitalize;
3-
}
4-
5-
.md-fab:hover, .md-fab.md-focused {
6-
background-color: #000 !important;
7-
}
8-
9-
p.note {
10-
font-size: 1.2rem;
11-
}
12-
131
.lock-size {
142
min-width: 300px;
153
min-height: 300px;
@@ -28,3 +16,10 @@ p.note {
2816
.md-fab.demo-fab.action-fab {
2917
background-color: #aaa;
3018
}
19+
20+
21+
md-content div {
22+
&[flex="50"] {
23+
padding: 15px;
24+
}
25+
}

‎src/components/fabSpeedDial/demoTooltips/index.html

Lines changed: 0 additions & 59 deletions
This file was deleted.

‎src/components/fabSpeedDial/demoTooltips/script.js

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)