Skip to content

Commit b2a83c7

Browse files
topherfangiokennethcachia
topherfangio
authored and
kennethcachia
committed
docs(menuBar): Fix menu bar demo after recent toolbar changes.
After updating the `<md-toolbar>` to allow `ng-if`, the toolbar no longer allows the `ng-controller` directive directly on it. Update demo to move `ng-controller` to outer `<div>` and fix the layout. Closes angular#4416.
1 parent c32c6ff commit b2a83c7

File tree

1 file changed

+176
-172
lines changed

1 file changed

+176
-172
lines changed

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

+176-172
Original file line numberDiff line numberDiff line change
@@ -1,177 +1,181 @@
1-
<div>
2-
<md-toolbar class="md-menu-toolbar" layout="row" ng-controller="DemoBasicCtrl as ctrl">
3-
<md-toolbar-filler layout layout-align="center center">
4-
<md-icon md-svg-icon="call:chat"></md-icon>
5-
</md-toolbar-filler>
6-
<div>
7-
<h2 class="md-toolbar-tools">Untitled document</h2>
8-
<md-menu-bar>
9-
<md-menu>
10-
<button ng-click="$mdOpenMenu()">
11-
File
12-
</button>
13-
<md-menu-content>
14-
<md-menu-item>
15-
<md-button ng-click="ctrl.sampleAction('share', $event)">
16-
Share...
17-
</md-button>
18-
</md-menu-item>
19-
<md-menu-divider></md-menu-divider>
20-
<md-menu-item>
21-
<md-menu>
22-
<md-button ng-click="$mdOpenMenu()">New</md-button>
23-
<md-menu-content>
24-
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
25-
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
26-
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
27-
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
28-
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
29-
</md-menu-content>
30-
</md-menu>
31-
</md-menu-item>
32-
<md-menu-item>
33-
<md-button ng-click="ctrl.sampleAction('Open', $event)">
34-
Open...
35-
<span class="md-alt-text"> {{ 'M-O' | keyboardShortcut }}</span>
36-
</md-button>
37-
</md-menu-item>
38-
<md-menu-item>
39-
<md-button disabled="disabled" ng-click="ctrl.sampleAction('Rename', $event)">
40-
Rename
41-
</md-button>
42-
</md-menu-item>
43-
<md-menu-divider></md-menu-divider>
44-
<md-menu-item>
45-
<md-button ng-click="ctrl.sampleAction('Print', $event)">
46-
Print
47-
<span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
48-
</md-button>
49-
</md-menu-item>
50-
</md-menu-content>
51-
</md-menu>
52-
<md-menu>
53-
<button ng-click="$mdOpenMenu()">
54-
Edit
55-
</button>
56-
<md-menu-content>
57-
<md-menu-item class="md-indent">
58-
<md-icon md-svg-icon="undo"></md-icon>
59-
<md-button ng-click="ctrl.sampleAction('undo', $event)">
60-
Undo
61-
<span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span>
62-
</md-button>
63-
</md-menu-item>
64-
<md-menu-item class="md-indent">
65-
<md-icon md-svg-icon="redo"></md-icon>
66-
<md-button ng-click="ctrl.sampleAction('redo', $event)">
67-
Redo
68-
<span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span>
69-
</md-button>
70-
</md-menu-item>
71-
<md-menu-divider></md-menu-divider>
72-
<md-menu-item class="md-indent">
73-
<md-icon md-svg-icon="content-cut"></md-icon>
74-
<md-button ng-click="ctrl.sampleAction('cut', $event)">
75-
Cut
76-
<span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span>
77-
</md-button>
78-
</md-menu-item>
79-
<md-menu-item class="md-indent">
80-
<md-icon md-svg-icon="content-copy"></md-icon>
81-
<md-button ng-click="ctrl.sampleAction('copy', $event)">
82-
Copy
83-
<span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span>
84-
</md-button>
85-
</md-menu-item>
86-
<md-menu-item class="md-indent">
87-
<md-icon md-svg-icon="content-paste"></md-icon>
88-
<md-button ng-click="ctrl.sampleAction('paste', $event)">
89-
Paste
90-
<span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
91-
</md-button>
92-
</md-menu-item>
93-
<md-menu-divider></md-menu-divider>
94-
<md-menu-item class="md-indent">
95-
<md-button ng-click="ctrl.sampleAction('Find and replace', $event)">
96-
Find and replace...
97-
<span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span>
98-
</md-button>
99-
</md-menu-item>
100-
</md-menu-content>
101-
</md-menu>
102-
<md-menu>
103-
<button ng-click="$mdOpenMenu()">
104-
View
105-
</button>
106-
<md-menu-content>
107-
<md-menu-item type="checkbox" ng-model="ctrl.settings.printLayout">Print layout</md-menu-item>
108-
<md-menu-item class="md-indent">
109-
<md-menu>
110-
<md-button ng-click="$mdOpenMenu()">Mode</md-button>
111-
<md-menu-content width="3">
112-
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'presentation'">Presentation</md-menu-item>
113-
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'edit'">Edit</md-menu-item>
114-
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'modifiable'">Modifiable</md-menu-item>
115-
</md-menu-content>
116-
</md-menu>
117-
</md-menu-item>
118-
<md-menu-divider></md-menu-divider>
119-
<md-menu-item type="checkbox" ng-model="ctrl.settings.showRuler">Show ruler</md-menu-item>
120-
<md-menu-item type="checkbox" ng-model="ctrl.settings.showEquationToolbar">Show equation toolbar</md-menu-item>
121-
<md-menu-item type="checkbox" ng-model="ctrl.settings.showSpellingSuggestions">Show spelling suggestions</md-menu-item>
122-
<md-menu-divider></md-menu-divider>
123-
<md-menu-item type="checkbox" ng-model="ctrl.settings.compactControls">Compact controls</md-menu-item>
124-
<md-menu-item type="checkbox" ng-model="ctrl.settings.fullScreen">Full screen</md-menu-item>
125-
</md-menu-content>
126-
</md-menu>
127-
<md-menu>
128-
<button ng-click="$mdOpenMenu()">
129-
Format
130-
</button>
131-
<md-menu-content>
132-
<md-menu-item>
133-
<md-button ng-click="ctrl.sampleAction('bold', $event)">
134-
Bold
135-
<span class="md-alt-text"> {{ 'M-B' | keyboardShortcut }}</span>
136-
</md-button>
137-
</md-menu-item>
138-
<md-menu-item>
139-
<md-button ng-click="ctrl.sampleAction('italic', $event)">
140-
Italic
141-
<span class="md-alt-text">{{ 'M-I' | keyboardShortcut }}</span>
142-
</md-button>
143-
</md-menu-item>
144-
<md-menu-item>
145-
<md-button ng-click="ctrl.sampleAction('underline', $event)">
146-
Underline
147-
<span class="md-alt-text">{{ 'M-U' | keyboardShortcut }}</span>
148-
</md-button>
149-
</md-menu-item>
150-
<md-menu-item>
151-
<md-button ng-click="ctrl.sampleAction('strikethrough', $event)">
152-
Strikethrough
153-
<span class="md-alt-text">{{ 'A-S-5' | keyboardShortcut }}</span>
154-
</md-button>
155-
</md-menu-item>
156-
<md-menu-item>
157-
<md-button ng-click="ctrl.sampleAction('superscript', $event)">
158-
Superscript
159-
<span class="md-alt-text">{{ 'M-.' | keyboardShortcut }}</span>
160-
</md-button>
161-
</md-menu-item>
162-
<md-menu-item>
163-
<md-button ng-click="ctrl.sampleAction('subscript', $event)">
164-
Subscript
165-
<span class="md-alt-text">{{ 'M-,' | keyboardShortcut }}</span>
166-
</md-button>
167-
</md-menu-item>
168-
<md-menu-divider></md-menu-divider>
169-
<md-menu-item><md-button ng-click="ctrl.toggleSetting('clearFormatting')">Clear Formatting</md-button></md-menu-item>
170-
</md-menu-content>
171-
</md-menu>
172-
</md-menu-bar>
1+
<div ng-controller="DemoBasicCtrl as ctrl">
2+
<md-toolbar class="md-menu-toolbar">
3+
<div layout="row">
4+
<md-toolbar-filler layout layout-align="center center">
5+
<md-icon md-svg-icon="call:chat"></md-icon>
6+
</md-toolbar-filler>
7+
8+
<div>
9+
<h2 class="md-toolbar-tools">Untitled document</h2>
10+
<md-menu-bar>
11+
<md-menu>
12+
<button ng-click="$mdOpenMenu()">
13+
File
14+
</button>
15+
<md-menu-content>
16+
<md-menu-item>
17+
<md-button ng-click="ctrl.sampleAction('share', $event)">
18+
Share...
19+
</md-button>
20+
</md-menu-item>
21+
<md-menu-divider></md-menu-divider>
22+
<md-menu-item>
23+
<md-menu>
24+
<md-button ng-click="$mdOpenMenu()">New</md-button>
25+
<md-menu-content>
26+
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Document', $event)">Document</md-button></md-menu-item>
27+
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Spreadsheet', $event)">Spreadsheet</md-button></md-menu-item>
28+
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Presentation', $event)">Presentation</md-button></md-menu-item>
29+
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Form', $event)">Form</md-button></md-menu-item>
30+
<md-menu-item><md-button ng-click="ctrl.sampleAction('New Drawing', $event)">Drawing</md-button></md-menu-item>
31+
</md-menu-content>
32+
</md-menu>
33+
</md-menu-item>
34+
<md-menu-item>
35+
<md-button ng-click="ctrl.sampleAction('Open', $event)">
36+
Open...
37+
<span class="md-alt-text"> {{ 'M-O' | keyboardShortcut }}</span>
38+
</md-button>
39+
</md-menu-item>
40+
<md-menu-item>
41+
<md-button disabled="disabled" ng-click="ctrl.sampleAction('Rename', $event)">
42+
Rename
43+
</md-button>
44+
</md-menu-item>
45+
<md-menu-divider></md-menu-divider>
46+
<md-menu-item>
47+
<md-button ng-click="ctrl.sampleAction('Print', $event)">
48+
Print
49+
<span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
50+
</md-button>
51+
</md-menu-item>
52+
</md-menu-content>
53+
</md-menu>
54+
<md-menu>
55+
<button ng-click="$mdOpenMenu()">
56+
Edit
57+
</button>
58+
<md-menu-content>
59+
<md-menu-item class="md-indent">
60+
<md-icon md-svg-icon="undo"></md-icon>
61+
<md-button ng-click="ctrl.sampleAction('undo', $event)">
62+
Undo
63+
<span class="md-alt-text">{{ 'M-Z' | keyboardShortcut }}</span>
64+
</md-button>
65+
</md-menu-item>
66+
<md-menu-item class="md-indent">
67+
<md-icon md-svg-icon="redo"></md-icon>
68+
<md-button ng-click="ctrl.sampleAction('redo', $event)">
69+
Redo
70+
<span class="md-alt-text">{{ 'M-Y' | keyboardShortcut }}</span>
71+
</md-button>
72+
</md-menu-item>
73+
<md-menu-divider></md-menu-divider>
74+
<md-menu-item class="md-indent">
75+
<md-icon md-svg-icon="content-cut"></md-icon>
76+
<md-button ng-click="ctrl.sampleAction('cut', $event)">
77+
Cut
78+
<span class="md-alt-text">{{ 'M-X' | keyboardShortcut }}</span>
79+
</md-button>
80+
</md-menu-item>
81+
<md-menu-item class="md-indent">
82+
<md-icon md-svg-icon="content-copy"></md-icon>
83+
<md-button ng-click="ctrl.sampleAction('copy', $event)">
84+
Copy
85+
<span class="md-alt-text">{{ 'M-C' | keyboardShortcut }}</span>
86+
</md-button>
87+
</md-menu-item>
88+
<md-menu-item class="md-indent">
89+
<md-icon md-svg-icon="content-paste"></md-icon>
90+
<md-button ng-click="ctrl.sampleAction('paste', $event)">
91+
Paste
92+
<span class="md-alt-text">{{ 'M-P' | keyboardShortcut }}</span>
93+
</md-button>
94+
</md-menu-item>
95+
<md-menu-divider></md-menu-divider>
96+
<md-menu-item class="md-indent">
97+
<md-button ng-click="ctrl.sampleAction('Find and replace', $event)">
98+
Find and replace...
99+
<span class="md-alt-text">{{ 'M-S-H' | keyboardShortcut }}</span>
100+
</md-button>
101+
</md-menu-item>
102+
</md-menu-content>
103+
</md-menu>
104+
<md-menu>
105+
<button ng-click="$mdOpenMenu()">
106+
View
107+
</button>
108+
<md-menu-content>
109+
<md-menu-item type="checkbox" ng-model="ctrl.settings.printLayout">Print layout</md-menu-item>
110+
<md-menu-item class="md-indent">
111+
<md-menu>
112+
<md-button ng-click="$mdOpenMenu()">Mode</md-button>
113+
<md-menu-content width="3">
114+
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'presentation'">Presentation</md-menu-item>
115+
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'edit'">Edit</md-menu-item>
116+
<md-menu-item type="radio" ng-model="ctrl.settings.presentationMode" value="'modifiable'">Modifiable</md-menu-item>
117+
</md-menu-content>
118+
</md-menu>
119+
</md-menu-item>
120+
<md-menu-divider></md-menu-divider>
121+
<md-menu-item type="checkbox" ng-model="ctrl.settings.showRuler">Show ruler</md-menu-item>
122+
<md-menu-item type="checkbox" ng-model="ctrl.settings.showEquationToolbar">Show equation toolbar</md-menu-item>
123+
<md-menu-item type="checkbox" ng-model="ctrl.settings.showSpellingSuggestions">Show spelling suggestions</md-menu-item>
124+
<md-menu-divider></md-menu-divider>
125+
<md-menu-item type="checkbox" ng-model="ctrl.settings.compactControls">Compact controls</md-menu-item>
126+
<md-menu-item type="checkbox" ng-model="ctrl.settings.fullScreen">Full screen</md-menu-item>
127+
</md-menu-content>
128+
</md-menu>
129+
<md-menu>
130+
<button ng-click="$mdOpenMenu()">
131+
Format
132+
</button>
133+
<md-menu-content>
134+
<md-menu-item>
135+
<md-button ng-click="ctrl.sampleAction('bold', $event)">
136+
Bold
137+
<span class="md-alt-text"> {{ 'M-B' | keyboardShortcut }}</span>
138+
</md-button>
139+
</md-menu-item>
140+
<md-menu-item>
141+
<md-button ng-click="ctrl.sampleAction('italic', $event)">
142+
Italic
143+
<span class="md-alt-text">{{ 'M-I' | keyboardShortcut }}</span>
144+
</md-button>
145+
</md-menu-item>
146+
<md-menu-item>
147+
<md-button ng-click="ctrl.sampleAction('underline', $event)">
148+
Underline
149+
<span class="md-alt-text">{{ 'M-U' | keyboardShortcut }}</span>
150+
</md-button>
151+
</md-menu-item>
152+
<md-menu-item>
153+
<md-button ng-click="ctrl.sampleAction('strikethrough', $event)">
154+
Strikethrough
155+
<span class="md-alt-text">{{ 'A-S-5' | keyboardShortcut }}</span>
156+
</md-button>
157+
</md-menu-item>
158+
<md-menu-item>
159+
<md-button ng-click="ctrl.sampleAction('superscript', $event)">
160+
Superscript
161+
<span class="md-alt-text">{{ 'M-.' | keyboardShortcut }}</span>
162+
</md-button>
163+
</md-menu-item>
164+
<md-menu-item>
165+
<md-button ng-click="ctrl.sampleAction('subscript', $event)">
166+
Subscript
167+
<span class="md-alt-text">{{ 'M-,' | keyboardShortcut }}</span>
168+
</md-button>
169+
</md-menu-item>
170+
<md-menu-divider></md-menu-divider>
171+
<md-menu-item><md-button ng-click="ctrl.toggleSetting('clearFormatting')">Clear Formatting</md-button></md-menu-item>
172+
</md-menu-content>
173+
</md-menu>
174+
</md-menu-bar>
175+
</div>
173176
</div>
174177
</md-toolbar>
178+
175179
<div class="page-container">
176180
<div class="page">
177181
<h1>Untitled document</h1>

0 commit comments

Comments
 (0)