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

Commit ee7532c

Browse files
bradrichbradrich
committed
feat(panel): Panel grouping
Panels are now capable of being grouped together by any designation the user sees fit. Grouping allows the user to specify logic for a collection of panels. For instance, all popups in the header can be considered one group with a maximum of one popup open at a time. Dialogs within dialogs are another example of groups. This implementation prevents the panel from storing a ridiculous amount of data in memory or polluting the DOM with several panels. This helps performance and gives the user more flexibility about how to use panels. Fixes #8971 Ping @ErinCoughlan @crisbeto
1 parent 421fed4 commit ee7532c

File tree

6 files changed

+628
-35
lines changed

6 files changed

+628
-35
lines changed

‎src/components/panel/demoBasicUsage/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="demo-md-panel md-padding" ng-controller="BasicDemoCtrl as ctrl">
1+
<div class="md-padding" ng-controller="BasicDemoCtrl as ctrl">
22
<p>
33
A panel can be used to create dialogs, menus, and other overlays.
44
</p>

‎src/components/panel/demoGroups/index.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<div ng-controller="PanelGroupsCtrl as ctrl" ng-cloak>
2+
3+
<md-toolbar class="md-accent">
4+
<div class="md-toolbar-tools">
5+
<md-button
6+
class="md-icon-button"
7+
aria-label="Settings"
8+
ng-click="ctrl.showToolbarMenu($event, ctrl.settings)">
9+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
10+
</md-button>
11+
<h2>Toolbar with grouped panels (Maximum open: 2)</h2>
12+
<span flex></span>
13+
<md-button
14+
class="md-icon-button"
15+
aria-label="Favorite"
16+
ng-click="ctrl.showToolbarMenu($event, ctrl.favorite)">
17+
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
18+
</md-button>
19+
<md-button
20+
class="md-icon-button"
21+
aria-label="More"
22+
ng-click="ctrl.showToolbarMenu($event, ctrl.more)">
23+
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
24+
</md-button>
25+
</div>
26+
</md-toolbar>
27+
28+
<md-content layout-padding>
29+
<p>
30+
Panels can be added to a group. Groups are used to configure specific
31+
behaviors on multiple panels. To add a panel to a group, use the
32+
<code>$mdPanel.newPanelGroup</code> method, or simply add a group name
33+
to the configuration object passed into the <code>$mdPanel.create</code>
34+
method.
35+
</p>
36+
<p>
37+
Grouping allows for methods to be applied to several panels at once, i.e.
38+
closing all panels within the toolbar group, or destroying all panels
39+
within a dialog group. With the <code>maxOpen</code> property, you can
40+
also limit the number of panels allowed open within a specific group. This
41+
can be useful in limiting the number of menu panels allowed open at a
42+
time, etc.
43+
</p>
44+
</md-content>
45+
46+
</div>

‎src/components/panel/demoGroups/script.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
(function() {
2+
'use strict';
3+
4+
angular
5+
.module('panelGroupsDemo', ['ngMaterial'])
6+
.controller('PanelGroupsCtrl', PanelGroupsCtrl)
7+
.controller('PanelMenuCtrl', PanelMenuCtrl);
8+
9+
function PanelGroupsCtrl($mdPanel) {
10+
this.settings = {
11+
name: 'settings',
12+
items: [
13+
'Home',
14+
'About',
15+
'Contact'
16+
]
17+
};
18+
this.favorite = {
19+
name: 'favorite',
20+
items: [
21+
'Add to Favorites'
22+
]
23+
};
24+
this.more = {
25+
name: 'more',
26+
items: [
27+
'Account',
28+
'Sign Out'
29+
]
30+
};
31+
32+
this.showToolbarMenu = function($event, menu) {
33+
var template = '' +
34+
'<div class="menu-panel" md-whiteframe="4">' +
35+
' <div class="menu-content">' +
36+
' <div class="menu-item" ng-repeat="item in ctrl.items">' +
37+
' <button class="md-button">' +
38+
' <span>{{item}}</span>' +
39+
' </button>' +
40+
' </div>' +
41+
' <md-divider></md-divider>' +
42+
' <div class="menu-item">' +
43+
' <button class="md-button" ng-click="ctrl.closeMenu()">' +
44+
' <span>Close Menu</span>' +
45+
' </button>' +
46+
' </div>' +
47+
' </div>' +
48+
'</div>';
49+
50+
var position = $mdPanel.newPanelPosition()
51+
.relativeTo($event.srcElement)
52+
.addPanelPosition(
53+
$mdPanel.xPosition.ALIGN_START,
54+
$mdPanel.yPosition.BELOW
55+
);
56+
57+
$mdPanel.newPanelGroup('toolbar', {
58+
maxOpen: 2
59+
});
60+
61+
var config = {
62+
id: 'toolbar_' + menu.name,
63+
attachTo: angular.element(document.body),
64+
controller: PanelMenuCtrl,
65+
controllerAs: 'ctrl',
66+
template: template,
67+
position: position,
68+
panelClass: 'menu-panel-container',
69+
locals: {
70+
items: menu.items
71+
},
72+
openFrom: $event,
73+
focusOnOpen: false,
74+
zIndex: 100,
75+
propagateContainerEvents: true,
76+
groupName: 'toolbar'
77+
};
78+
79+
$mdPanel.open(config);
80+
}
81+
}
82+
83+
function PanelMenuCtrl(mdPanelRef) {
84+
this.closeMenu = function() {
85+
mdPanelRef && mdPanelRef.close();
86+
}
87+
}
88+
})();

‎src/components/panel/demoGroups/style.global.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.menu-panel-container {
2+
pointer-events: auto;
3+
}
4+
5+
.menu-panel {
6+
width: 256px;
7+
background-color: #fff;
8+
border-radius: 4px;
9+
}
10+
11+
.menu-panel .menu-divider {
12+
width: 100%;
13+
height: 1px;
14+
min-height: 1px;
15+
max-height: 1px;
16+
margin-top: 4px;
17+
margin-bottom: 4px;
18+
background-color: rgba(0, 0, 0, 0.11);
19+
}
20+
21+
.menu-panel .menu-content {
22+
display: flex;
23+
flex-direction: column;
24+
padding: 8px 0;
25+
max-height: 305px;
26+
overflow-y: auto;
27+
min-width: 256px;
28+
}
29+
30+
.menu-panel .menu-item {
31+
display: flex;
32+
flex-direction: row;
33+
min-height: 48px;
34+
height: 48px;
35+
align-content: center;
36+
justify-content: flex-start;
37+
}
38+
.menu-panel .menu-item > * {
39+
width: 100%;
40+
margin: auto 0;
41+
padding-left: 16px;
42+
padding-right: 16px;
43+
}
44+
.menu-panel .menu-item > a.md-button {
45+
padding-top: 5px;
46+
}
47+
.menu-panel .menu-item > .md-button {
48+
display: inline-block;
49+
border-radius: 0;
50+
margin: auto 0;
51+
font-size: 15px;
52+
text-transform: none;
53+
font-weight: 400;
54+
height: 100%;
55+
padding-left: 16px;
56+
padding-right: 16px;
57+
width: 100%;
58+
text-align: left;
59+
}
60+
.menu-panel .menu-item > .md-button::-moz-focus-inner {
61+
padding: 0;
62+
border: 0;
63+
}
64+
.menu-panel .menu-item > .md-button md-icon {
65+
margin: auto 16px auto 0;
66+
}
67+
.menu-panel .menu-item > .md-button p {
68+
display: inline-block;
69+
margin: auto;
70+
}
71+
.menu-panel .menu-item > .md-button span {
72+
margin-top: auto;
73+
margin-bottom: auto;
74+
}
75+
.menu-panel .menu-item > .md-button .md-ripple-container {
76+
border-radius: inherit;
77+
}

0 commit comments

Comments
 (0)