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

Commit c70076d

Browse files
nshahannshahan
authored
Add Material Icon examples (#31)
* Update dependency to angular: 4.0.0-alpha+1 * Migrate examples use of Glyph to Material Icon. * Fix disabled style in Material Button example.
1 parent 1fc2ec5 commit c70076d

18 files changed

+166
-76
lines changed

‎lib/app_component.dart

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import 'package:angular/angular.dart';
55
import 'package:angular_components/angular_components.dart';
66

77
import 'src/demo_app/demo_app.dart';
8-
import 'src/glyph_demo/glyph_demo.dart';
98
import 'src/material_button_demo/material_button_demo.dart';
109
import 'src/material_checkbox_demo/material_checkbox_demo.dart';
1110
import 'src/material_chips_demo/material_chips_demo.dart';
1211
import 'src/material_dialog_demo/material_dialog_demo.dart';
1312
import 'src/material_expansionpanel_demo/material_expansionpanel_demo.dart';
13+
import 'src/material_icon_demo/material_icon_demo.dart';
1414
import 'src/material_input_demo/material_input_demo.dart';
1515
import 'src/material_list_demo/material_list_demo.dart';
1616
import 'src/material_popup_demo/material_popup_demo.dart';
@@ -32,12 +32,12 @@ import 'src/scorecard_demo/scorecard_demo.dart';
3232
styleUrls: const ['app_component.css'],
3333
directives: const [
3434
DemoAppComponent,
35-
GlyphDemoComponent,
3635
MaterialButtonDemoComponent,
3736
MaterialCheckboxDemoComponent,
3837
MaterialChipsDemoComponent,
3938
MaterialDialogDemoComponent,
4039
MaterialExpansionpanelDemoComponent,
40+
MaterialIconDemoComponent,
4141
MaterialInputDemoComponent,
4242
MaterialListDemoComponent,
4343
MaterialPopupDemoComponent,

‎lib/app_component.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<p>Examples:</p>
77
<nav>
88
<ul>
9-
<li><a href="#Glyphs">Glyphs</a></li>
9+
<li><a href="#Icons">Icons</a></li>
1010
<li><a href="#Buttons">Buttons</a></li>
1111
<li><a href="#Input">Input Boxes</a></li>
1212
<li><a href="#Checkboxes">Checkboxes</a></li>
@@ -42,23 +42,23 @@ <h2>Demo App</h2>
4242
<demo-app></demo-app>
4343
<hr>
4444

45-
<a name="Glyphs"></a>
46-
<h2>Glyphs</h2>
45+
<a name="Icons"></a>
46+
<h2>Icons</h2>
4747
<ul class="source-links">
4848
<li>
49-
<a href="https://github.com/dart-lang/angular_components/tree/master/lib/src/components/glyph"
49+
<a href="https://github.com/dart-lang/angular_components/tree/master/lib/src/components/material_icon"
5050
target="_blank">
5151
Component Source
5252
</a>
5353
</li>
5454
<li>
55-
<a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/glyph_demo"
55+
<a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/material_icon_demo"
5656
target="_blank">
5757
Example Source
5858
</a>
5959
</li>
6060
</ul>
61-
<glyph-demo></glyph-demo>
61+
<material_icon-demo></material_icon-demo>
6262
<hr>
6363

6464
<a name="Buttons"></a>

‎lib/src/glyph_demo/glyph_demo.dart

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

‎lib/src/glyph_demo/glyph_demo.html

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

‎lib/src/material_button_demo/material_button_demo.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
* BSD-style license that can be found in the LICENSE file.
55
*/
66

7-
.red:not([raised]) {
7+
.red:not([raised]):not([disabled]) {
88
color: #f44336;
99
}
1010

11-
.red[raised] {
11+
.red[raised]:not([disabled]) {
1212
background-color: #f44336;
1313
color: white;
1414
}

‎lib/src/material_button_demo/material_button_demo.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import 'package:angular_components/angular_components.dart';
1212
directives: const [
1313
MaterialButtonComponent,
1414
MaterialFabComponent,
15-
GlyphComponent
15+
MaterialIconComponent,
1616
],
1717
)
1818
class MaterialButtonDemoComponent {

‎lib/src/material_button_demo/material_button_demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ <h3>Without min-width and margin</h3>
3232
<section class="margin">
3333
<h3>With Icon</h3>
3434
<material-button icon>
35-
<glyph icon="check"></glyph>
35+
<material-icon icon="check"></material-icon>
3636
</material-button>
3737
</section>
3838

@@ -43,9 +43,9 @@ <h3>
4343
<strong>B</strong>utton
4444
</h3>
4545
<material-fab raised>
46-
<glyph icon="add"></glyph>
46+
<material-icon icon="add"></material-icon>
4747
</material-fab>
4848
<material-fab mini raised>
49-
<glyph icon="check"></glyph>
49+
<material-icon icon="check"></material-icon>
5050
</material-fab>
5151
</section>

‎lib/src/material_dialog_demo/material_dialog_demo.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ import 'package:angular_components/angular_components.dart';
1313
CORE_DIRECTIVES,
1414
AutoDismissDirective,
1515
AutoFocusDirective,
16-
GlyphComponent,
1716
MaterialButtonComponent,
1817
MaterialDialogComponent,
18+
MaterialIconComponent,
1919
ModalComponent,
2020
])
2121
class MaterialDialogDemoComponent {

‎lib/src/material_dialog_demo/material_dialog_demo.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ <h3>Info dialogs</h3>
226226

227227
<div header>
228228
<material-button icon autoFocus (trigger)="showInfoDialog = false">
229-
<glyph icon="close"></glyph>
229+
<material-icon icon="close"></material-icon>
230230
</material-button>
231231

232232
<h3>Information</h3>
@@ -258,7 +258,7 @@ <h3>Information</h3>
258258

259259
<div header>
260260
<material-button icon autoFocus (trigger)="showAutoDismissDialog = false">
261-
<glyph icon="close"></glyph>
261+
<material-icon icon="close"></material-icon>
262262
</material-button>
263263

264264
<h3>Auto Dismiss</h3>
@@ -285,7 +285,7 @@ <h3>Custom dialogs</h3>
285285
<material-button icon
286286
autoFocus
287287
(trigger)="showCustomColorsDialog = false">
288-
<glyph icon="close"></glyph>
288+
<material-icon icon="close"></material-icon>
289289
</material-button>
290290

291291
<h3>Information</h3>

‎lib/src/material_icon_demo/material_icon_demo.dart

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
2+
// for details. All rights reserved. Use of this source code is governed by a
3+
// BSD-style license that can be found in the LICENSE file.
4+
5+
import 'package:angular/angular.dart';
6+
import 'package:angular_components/angular_components.dart';
7+
8+
@Component(
9+
selector: 'material_icon-demo',
10+
templateUrl: 'material_icon_demo.html',
11+
directives: const [
12+
MaterialButtonComponent,
13+
MaterialIconComponent,
14+
MaterialInputComponent,
15+
],
16+
exports: const [done, doneAll, doneOutline],
17+
)
18+
class MaterialIconDemoComponent {
19+
var iconModel = done;
20+
var iconColor = 'blue';
21+
var iconName = 'alarm';
22+
}
23+
24+
const done = const Icon('done');
25+
const doneAll = const Icon('done_all');
26+
const doneOutline = const Icon('done_outline');

‎lib/src/material_icon_demo/material_icon_demo.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!--
2+
Copyright (c) 2017, the Dart project authors. Please see the AUTHORS file
3+
for details. All rights reserved. Use of this source code is governed by a
4+
BSD-style license that can be found in the LICENSE file.
5+
-->
6+
<h3>Basic Usage</h3>
7+
8+
<material-icon icon="favorite"></material-icon>
9+
<material-icon icon="business"></material-icon>
10+
<material-icon icon="thumb_up"></material-icon>
11+
<material-icon icon="bluetooth_connected"></material-icon>
12+
<material-icon icon="insert_photo"></material-icon>
13+
<material-icon icon="more_horiz"></material-icon>
14+
15+
<p>
16+
See <a href="https://www.google.com/design/icons/" target="_blank">available icons</a>.
17+
</p>
18+
19+
<h4>Using a string identifier</h4>
20+
<div>
21+
<material-icon [icon]="iconName"></material-icon>
22+
</div>
23+
<div>
24+
<material-input #iconNameInput label="Enter an icon identifier"></material-input>
25+
<material-button raised (trigger)="iconName = iconNameInput.inputText">Apply</material-button>
26+
</div>
27+
<div>
28+
Current icon identifier: {{iconName}}
29+
</div>
30+
31+
<h4>Using an icon model</h4>
32+
<material-icon [icon]="iconModel"></material-icon>
33+
<div>
34+
<material-button raised (trigger)="iconModel = done">done</material-button>
35+
<material-button raised (trigger)="iconModel = doneAll">done_all</material-button>
36+
<material-button raised (trigger)="iconModel = doneOutline">done_outline</material-button>
37+
</div>
38+
39+
<h3>Styling</h3>
40+
<h4>Color</h4>
41+
<p>Set the color of the icon using the css color property.</p>
42+
<material-icon [style.color]="iconColor" icon="pets"></material-icon>
43+
<div>
44+
<material-input #iconColorInput label="Enter a new color here"></material-input>
45+
<material-button raised (trigger)="iconColor = iconColorInput.inputText">Apply</material-button>
46+
</div>
47+
48+
<h4>Size</h4>
49+
<p>Set the size of the icon using the size attribute.</p>
50+
<material-icon size="x-small" icon="bug_report"></material-icon>
51+
<material-icon size="small" icon="bug_report"></material-icon>
52+
<material-icon size="medium" icon="bug_report"></material-icon>
53+
<material-icon size="large" icon="bug_report"></material-icon>
54+
<material-icon size="x-large" icon="bug_report"></material-icon>
55+
<material-icon icon="bug_report"></material-icon>
56+
57+
<p>
58+
x-small 12px <material-icon size="x-small" icon="bug_report" baseline></material-icon><br/>
59+
small 13px <material-icon size="small" icon="bug_report" baseline></material-icon><br/>
60+
medium 16px <material-icon size="medium" icon="bug_report" baseline></material-icon><br/>
61+
large 18px <material-icon size="large" icon="bug_report" baseline></material-icon><br/>
62+
x-large 20px <material-icon size="x-large" icon="bug_report" baseline></material-icon><br/>
63+
Default (unspecified) 24px <material-icon icon="bug_report" baseline></material-icon>
64+
</p>
65+
66+
<h4>Baseline</h4>
67+
<p>Use the baseline attribute to align an icon with surrounding text.</p>
68+
<p>
69+
This
70+
<material-icon icon="flight_land"></material-icon>
71+
is <b>not</b> aligned with surrounding text.
72+
</p>
73+
<p>
74+
This
75+
<material-icon icon="flight_land" baseline></material-icon>
76+
is aligned with surrounding text.
77+
</p>
78+
79+
<h4>Light</h4>
80+
<p>Use the light attribute to reduce the opacity of the icon.</p>
81+
<p>
82+
Light <material-icon icon="settings" baseline light></material-icon>
83+
</p>
84+
<p>
85+
Not light <material-icon icon="settings" baseline></material-icon>
86+
</p>

‎lib/src/material_list_demo/material_list_demo.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import 'package:angular_components/angular_components.dart';
1111
templateUrl: 'material_list_demo.html',
1212
directives: const [
1313
CORE_DIRECTIVES,
14-
GlyphComponent,
14+
MaterialIconComponent,
1515
MaterialListComponent,
1616
MaterialListItemComponent,
1717
],

‎lib/src/material_list_demo/material_list_demo.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,8 @@ <h3>Primary and Secondary Item Content</h3>
9696
</span>
9797
</material-list-item>
9898
<material-list-item>
99-
<glyph icon="today" class="material-list-item-primary"
100-
aria-hidden="true"></glyph>
99+
<material-icon icon="today" class="material-list-item-primary"
100+
aria-hidden="true"></material-icon>
101101
Item with primary icon
102102
</material-list-item>
103103
<material-list-item>
@@ -130,8 +130,8 @@ <h3>Grouping and Dividers</h3>
130130
</material-list-item>
131131
</div>
132132
<material-list-item>
133-
<glyph icon="today" class="material-list-item-primary"
134-
aria-hidden="true"></glyph>
133+
<material-icon icon="today" class="material-list-item-primary"
134+
aria-hidden="true"></material-icon>
135135
Item with primary icon
136136
</material-list-item>
137137
<material-list-item>

‎lib/src/material_select_demo/material_select_demo.dart

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -229,9 +229,13 @@ class Language implements HasUIDisplayName {
229229

230230
@Component(
231231
selector: 'example-renderer',
232-
template: '<glyph icon="language"></glyph>{{disPlayName}}',
233-
styles: const ['glyph { vertical-align: middle; margin-right: 8px; }'],
234-
directives: const [GlyphComponent])
232+
template: '<material-icon icon="language"></material-icon>{{disPlayName}}',
233+
styles: const [
234+
'material-icon { vertical-align: middle; margin-right: 8px; }'
235+
],
236+
directives: const [
237+
MaterialIconComponent
238+
])
235239
class ExampleRendererComponent implements RendersValue {
236240
String disPlayName = '';
237241

‎lib/src/material_tooltip_demo/material_tooltip_demo.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import 'package:angular_components/angular_components.dart';
1212
directives: const [
1313
ClickableTooltipTargetDirective,
1414
DarkThemeDirective,
15-
GlyphComponent,
15+
MaterialIconComponent,
1616
MaterialButtonComponent,
1717
MaterialIconTooltipComponent,
1818
MaterialInkTooltipComponent,

0 commit comments

Comments
 (0)