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

Commit a169f6f

Browse files
bradrichkara
bradrich
authored and
kara
committed
feat(panel): Panel provider (#10215)
Fixes #10006. Fixes #10162.
1 parent 085c5fd commit a169f6f

File tree

5 files changed

+644
-36
lines changed

5 files changed

+644
-36
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div ng-controller="PanelProviderCtrl as ctrl" ng-cloak>
2+
3+
<md-content layout-padding>
4+
5+
<div layout="row" layout-align="space-between center" flex>
6+
<md-button
7+
class="md-fab md-primary"
8+
aria-label="Navigation"
9+
ng-click="ctrl.showMenu($event, ctrl.navigation)">
10+
<md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
11+
</md-button>
12+
<md-button
13+
class="md-fab md-accent"
14+
aria-label="Favorites"
15+
ng-click="ctrl.showMenu($event, ctrl.favorites)">
16+
<md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
17+
</md-button>
18+
<md-button
19+
class="md-fab md-background"
20+
aria-label="More"
21+
ng-click="ctrl.showMenu($event, ctrl.more)">
22+
<md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
23+
</md-button>
24+
</div>
25+
26+
<p>
27+
Configuration preset for upcoming panel elements can be created at the
28+
<code>.config</code> level of your Angular application. To create a
29+
preset configuration object, use the <code>$mdPanelProvider</code>
30+
dependency within a <code>.config</code> method and call
31+
<code>$mdPanelProvider.definePreset</code> with the preset name and an
32+
object containing the options needed for the configuration of a panel.
33+
This object will be stored for you so that the next time you need to
34+
<code>create</code> or <code>open</code> a panel, you can include the
35+
preset name in the method request, <code>$mdPanel.create('name', {...})</code>,
36+
to have the preset configuration options be added to the panel.
37+
</p>
38+
<p>
39+
The configuration object takes all of the options found within the
40+
<code>$mdPanel.create</code> method; however, it will not accept any
41+
options that depend on user interaction, panel positioning, or panel
42+
animation.
43+
</p>
44+
<p>
45+
This will help you reduce the necessary lines of configuration code that
46+
are required to create a panel when you are wanting to have multiple
47+
panels that are largely the same.
48+
</p>
49+
50+
</md-content>
51+
52+
</div>

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
(function() {
2+
'use strict';
3+
4+
angular
5+
.module('panelProviderDemo', ['ngMaterial'])
6+
.config(PanelProviderConfig)
7+
.controller('PanelProviderCtrl', PanelProviderCtrl)
8+
.controller('PanelMenuCtrl', PanelMenuCtrl);
9+
10+
/**
11+
* Configuration method that is used to define a preset for the upcoming panel
12+
* element. Each parameter in the preset is an available parameter in the
13+
* `$mdPanel.create` and `$mdPanel.open` methods. When the parameters are
14+
* defined here, they overwrite the default parameters for any panel that the
15+
* preset is requested for.
16+
* @param {!MdPanelProvider} $mdPanelProvider Provider method of the MdPanel
17+
* API.
18+
*/
19+
function PanelProviderConfig($mdPanelProvider) {
20+
$mdPanelProvider.definePreset('demoPreset', {
21+
attachTo: angular.element(document.body),
22+
controller: PanelMenuCtrl,
23+
controllerAs: 'ctrl',
24+
template: '' +
25+
'<div class="menu-panel" md-whiteframe="4">' +
26+
' <div class="menu-content">' +
27+
' <div class="menu-item" ng-repeat="item in ctrl.items">' +
28+
' <button class="md-button">' +
29+
' <span>{{item}}</span>' +
30+
' </button>' +
31+
' </div>' +
32+
' <md-divider></md-divider>' +
33+
' <div class="menu-item">' +
34+
' <button class="md-button" ng-click="ctrl.closeMenu()">' +
35+
' <span>Close Menu</span>' +
36+
' </button>' +
37+
' </div>' +
38+
' </div>' +
39+
'</div>',
40+
panelClass: 'menu-panel-container',
41+
focusOnOpen: false,
42+
zIndex: 100,
43+
propagateContainerEvents: true,
44+
groupName: 'menus'
45+
});
46+
}
47+
48+
function PanelProviderCtrl($mdPanel) {
49+
this.navigation = {
50+
name: 'navigation',
51+
items: [
52+
'Home',
53+
'About',
54+
'Contact'
55+
]
56+
};
57+
this.favorites = {
58+
name: 'favorites',
59+
items: [
60+
'Add to Favorites'
61+
]
62+
};
63+
this.more = {
64+
name: 'more',
65+
items: [
66+
'Account',
67+
'Sign Out'
68+
]
69+
};
70+
71+
$mdPanel.newPanelGroup('menus', {
72+
maxOpen: 2
73+
});
74+
75+
this.showMenu = function($event, menu) {
76+
/**
77+
* The request to open the panel has two arguments passed into it. The
78+
* first is a preset name passed in as a string. This will request a
79+
* cached preset and apply its configuration parameters. The second is an
80+
* object containing parameters that can only be filled through a
81+
* controller. These parameters represent configuration needs associated
82+
* with user interaction, panel position, panel animation, and other
83+
* miscellaneous needs.
84+
*/
85+
$mdPanel.open('demoPreset', {
86+
id: 'menu_' + menu.name,
87+
position: $mdPanel.newPanelPosition()
88+
.relativeTo($event.srcElement)
89+
.addPanelPosition(
90+
$mdPanel.xPosition.ALIGN_START,
91+
$mdPanel.yPosition.BELOW
92+
),
93+
locals: {
94+
items: menu.items
95+
},
96+
openFrom: $event
97+
});
98+
};
99+
}
100+
101+
function PanelMenuCtrl(mdPanelRef) {
102+
this.closeMenu = function() {
103+
mdPanelRef && mdPanelRef.close();
104+
};
105+
}
106+
})();

‎src/components/panel/demoPanelProvider/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)