Skip to content

Commit 3e0d06e

Browse files
mmalerbammalerba
committed
update dev-app
1 parent e6800e6 commit 3e0d06e

14 files changed

+293
-293
lines changed

‎src/dev-app/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ ng_module(
4747
"//src/dev-app/input",
4848
"//src/dev-app/input-modality",
4949
"//src/dev-app/layout",
50+
"//src/dev-app/legacy-card",
5051
"//src/dev-app/legacy-input",
5152
"//src/dev-app/legacy-paginator",
5253
"//src/dev-app/legacy-select",
@@ -56,7 +57,6 @@ ng_module(
5657
"//src/dev-app/live-announcer",
5758
"//src/dev-app/mdc-autocomplete",
5859
"//src/dev-app/mdc-button",
59-
"//src/dev-app/mdc-card",
6060
"//src/dev-app/mdc-checkbox",
6161
"//src/dev-app/mdc-chips",
6262
"//src/dev-app/mdc-dialog",

‎src/dev-app/card/BUILD.bazel

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@ ng_module(
1010
":card_demo_scss",
1111
],
1212
deps = [
13-
"//src/material/divider",
14-
"//src/material/legacy-button",
15-
"//src/material/legacy-card",
16-
"//src/material/legacy-progress-bar",
13+
"//src/material/button",
14+
"//src/material/card",
15+
"//src/material/checkbox",
1716
],
1817
)
1918

‎src/dev-app/card/card-demo.html

Lines changed: 82 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,63 @@
11
<div class="demo-card-container">
2-
<mat-card>
3-
Hello
2+
<mat-checkbox (change)="toggleAppearance()">Use outlined cards</mat-checkbox>
3+
4+
<!-- TODO(jelbourn): re-add dividers and footers with progress bars once the MDC versions exist -->
5+
<mat-card [appearance]="appearance">
6+
Card with only text content
47
</mat-card>
58

6-
<mat-card>
7-
<mat-card-subtitle>Subtitle</mat-card-subtitle>
8-
<mat-card-title>Card with title and footer</mat-card-title>
9+
<mat-card [appearance]="appearance">
10+
<mat-card-content>
11+
Card with only <code>&lt;mat-card-content&gt;</code> and text content.
12+
</mat-card-content>
13+
</mat-card>
14+
15+
<mat-card [appearance]="appearance">
16+
<mat-card-header>
17+
<mat-card-subtitle>Subtitle</mat-card-subtitle>
18+
<mat-card-title>Card with title and footer</mat-card-title>
19+
</mat-card-header>
920
<mat-card-content>
1021
<p>This is supporting text.</p>
1122
<p>{{longText}}</p>
1223
</mat-card-content>
1324
<mat-card-actions>
14-
<button mat-button>LIKE</button>
15-
<button mat-button>SHARE</button>
25+
<button mat-button>Like</button>
26+
<button mat-button>Share</button>
1627
</mat-card-actions>
17-
<mat-card-footer>
18-
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
19-
</mat-card-footer>
2028
</mat-card>
2129

22-
<mat-card>
23-
<mat-card-subtitle>Subtitle</mat-card-subtitle>
24-
<mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
30+
<mat-card [appearance]="appearance">
31+
<mat-card-header>
32+
<mat-card-subtitle>Subtitle</mat-card-subtitle>
33+
<mat-card-title>Card with title, footer, and inset-divider</mat-card-title>
34+
</mat-card-header>
2535
<mat-card-content>
2636
<p>This is supporting text.</p>
2737
<p>{{longText}}</p>
2838
</mat-card-content>
29-
<mat-divider [inset]="true"></mat-divider>
3039
<mat-card-actions>
31-
<button mat-button>LIKE</button>
32-
<button mat-button>SHARE</button>
40+
<button mat-button>Like</button>
41+
<button mat-button>Share</button>
3342
</mat-card-actions>
34-
<mat-card-footer>
35-
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
36-
</mat-card-footer>
43+
3744
</mat-card>
3845

39-
<mat-card>
46+
<mat-card [appearance]="appearance">
4047
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
41-
<mat-card-title>Content Title</mat-card-title>
48+
<mat-card-header>
49+
<mat-card-title>Content Title</mat-card-title>
50+
</mat-card-header>
4251
<mat-card-content>
4352
<p>Here is some content</p>
4453
</mat-card-content>
4554
<mat-card-actions align="end">
46-
<button mat-button>LIKE</button>
47-
<button mat-button>SHARE</button>
55+
<button mat-button>Like</button>
56+
<button mat-button>Share</button>
4857
</mat-card-actions>
4958
</mat-card>
5059

51-
<mat-card>
60+
<mat-card [appearance]="appearance">
5261
<mat-card-header>
5362
<img mat-card-avatar>
5463
<mat-card-title>Header title</mat-card-title>
@@ -60,8 +69,10 @@
6069
</mat-card-content>
6170
</mat-card>
6271

63-
<mat-card class="demo-card-blue mat-card-flat">
64-
<mat-card-title>Easily customizable</mat-card-title>
72+
<mat-card class="demo-card-blue mat-card-flat" [appearance]="appearance">
73+
<mat-card-header>
74+
<mat-card-title>Easily customizable</mat-card-title>
75+
</mat-card-header>
6576
<mat-card-actions>
6677
<button mat-button>First</button>
6778
<button mat-button>Second</button>
@@ -71,47 +82,68 @@
7182
<hr>
7283
<h2>Cards with media area</h2>
7384

74-
<mat-card>
75-
<mat-card-title-group>
76-
<mat-card-title>Card</mat-card-title>
77-
<mat-card-subtitle>Small</mat-card-subtitle>
78-
<img mat-card-sm-image>
79-
</mat-card-title-group>
85+
<mat-card [appearance]="appearance">
86+
<mat-card-header>
87+
<mat-card-title-group>
88+
<mat-card-title>Card</mat-card-title>
89+
<mat-card-subtitle>Small</mat-card-subtitle>
90+
<img mat-card-sm-image>
91+
</mat-card-title-group>
92+
</mat-card-header>
8093
<mat-card-content>
8194
{{longText}}
8295
</mat-card-content>
8396
</mat-card>
8497

85-
<mat-card>
86-
<mat-card-title-group>
87-
<mat-card-title>Card</mat-card-title>
88-
<mat-card-subtitle>Medium</mat-card-subtitle>
89-
<img mat-card-md-image>
90-
</mat-card-title-group>
98+
<mat-card [appearance]="appearance">
99+
<mat-card-header>
100+
<mat-card-title-group>
101+
<mat-card-title>Card</mat-card-title>
102+
<mat-card-subtitle>Medium</mat-card-subtitle>
103+
<img mat-card-md-image>
104+
</mat-card-title-group>
105+
</mat-card-header>
91106
<mat-card-content>
92107
{{longText}}
93108
</mat-card-content>
94109
</mat-card>
95110

96-
<mat-card>
97-
<mat-card-title-group>
98-
<mat-card-title>Card</mat-card-title>
99-
<mat-card-subtitle>Large</mat-card-subtitle>
100-
<img mat-card-lg-image>
101-
</mat-card-title-group>
111+
<mat-card [appearance]="appearance">
112+
<mat-card-header>
113+
<mat-card-title-group>
114+
<mat-card-title>Card</mat-card-title>
115+
<mat-card-subtitle>Large</mat-card-subtitle>
116+
<img mat-card-lg-image>
117+
</mat-card-title-group>
118+
</mat-card-header>
102119
<mat-card-content>
103120
{{longText}}
104121
</mat-card-content>
105122
</mat-card>
106123

107-
<mat-card>
108-
<mat-card-title-group>
109-
<mat-card-title>Card</mat-card-title>
110-
<mat-card-subtitle>Extra large</mat-card-subtitle>
111-
<img mat-card-xl-image>
112-
</mat-card-title-group>
124+
<mat-card [appearance]="appearance">
125+
<mat-card-header>
126+
<mat-card-title-group>
127+
<mat-card-title>Card</mat-card-title>
128+
<mat-card-subtitle>Extra large</mat-card-subtitle>
129+
<img mat-card-xl-image>
130+
</mat-card-title-group>
131+
</mat-card-header>
113132
<mat-card-content>
114133
{{longText}}
115134
</mat-card-content>
116135
</mat-card>
136+
137+
<!-- Used to test header without an avatar. -->
138+
<mat-card [appearance]="appearance">
139+
<mat-card-header>
140+
<mat-card-title>Header title</mat-card-title>
141+
<mat-card-subtitle>Header subtitle</mat-card-subtitle>
142+
</mat-card-header>
143+
<img mat-card-image src="https://material.angularjs.org/latest/img/washedout.png">
144+
<mat-card-content>
145+
<p>Here is some content</p>
146+
</mat-card-content>
147+
</mat-card>
148+
117149
</div>

‎src/dev-app/card/card-demo.scss

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,17 @@
22
display: flex;
33
flex-flow: column nowrap;
44

5-
.mat-card {
5+
.mat-mdc-card {
66
margin: 0 16px 16px 0;
77
width: 350px;
88
}
99

10+
// Use a gray background instead of real images for that "mock" feel.
1011
img {
1112
background-color: gray;
1213
}
13-
}
14-
15-
.demo-card-blue {
16-
background-color: #b0becc;
1714

18-
.mat-card-actions {
19-
display: flex;
20-
flex-direction: column;
15+
.mdc-button {
16+
text-transform: uppercase;
2117
}
2218
}

‎src/dev-app/card/card-demo.ts

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,30 +6,29 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {Component} from '@angular/core';
10-
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
11-
import {MatLegacyCardModule} from '@angular/material/legacy-card';
12-
import {MatDividerModule} from '@angular/material/divider';
13-
import {MatLegacyProgressBarModule} from '@angular/material/legacy-progress-bar';
9+
import {Component, ViewEncapsulation} from '@angular/core';
10+
import {MatCardAppearance, MatCardModule} from '@angular/material/card';
11+
import {FormsModule} from '@angular/forms';
12+
import {MatButtonModule} from '@angular/material/button';
13+
import {MatCheckboxModule} from '@angular/material/checkbox';
1414

1515
@Component({
1616
selector: 'card-demo',
1717
templateUrl: 'card-demo.html',
1818
styleUrls: ['card-demo.css'],
19+
encapsulation: ViewEncapsulation.None,
1920
standalone: true,
20-
imports: [
21-
MatLegacyButtonModule,
22-
MatLegacyCardModule,
23-
MatDividerModule,
24-
MatLegacyProgressBarModule,
25-
],
21+
imports: [MatCardModule, MatButtonModule, MatCheckboxModule, FormsModule],
2622
})
2723
export class CardDemo {
28-
longText =
29-
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor ' +
30-
'incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ' +
31-
'exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor' +
32-
' in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur' +
33-
' sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id ' +
34-
'est laborum.';
24+
appearance: MatCardAppearance = 'raised';
25+
longText = `Once upon a midnight dreary, while I pondered, weak and weary,
26+
Over many a quaint and curious volume of forgotten lore—
27+
While I nodded, nearly napping, suddenly there came a tapping,
28+
As of some one gently rapping, rapping at my chamber door.
29+
“’Tis some visitor,” I muttered, “tapping at my chamber door—
30+
Only this and nothing more.”`;
31+
toggleAppearance() {
32+
this.appearance = this.appearance == 'raised' ? 'outlined' : 'raised';
33+
}
3534
}

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export class DevAppLayout {
105105
{name: 'YouTube Player', route: '/youtube-player'},
106106
{name: 'MDC Autocomplete', route: '/mdc-autocomplete'},
107107
{name: 'MDC Button', route: '/mdc-button'},
108-
{name: 'MDC Card', route: '/mdc-card'},
109108
{name: 'MDC Checkbox', route: '/mdc-checkbox'},
110109
{name: 'MDC Chips', route: '/mdc-chips'},
111110
{name: 'MDC Dialog', route: '/mdc-dialog'},
@@ -118,6 +117,7 @@ export class DevAppLayout {
118117
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
119118
{name: 'MDC Slider', route: '/mdc-slider'},
120119
{name: 'MDC Snack Bar', route: '/mdc-snack-bar'},
120+
{name: 'Legacy Card', route: '/legacy-card'},
121121
{name: 'Legacy Select', route: '/legacy-select'},
122122
{name: 'Legacy Tooltip', route: '/legacy-tooltip'},
123123
{name: 'Legacy Table', route: '/legacy-table'},

‎src/dev-app/legacy-card/BUILD.bazel

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "legacy-card",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"legacy-card-demo.html",
10+
":legacy_card_demo_scss",
11+
],
12+
deps = [
13+
"//src/material/divider",
14+
"//src/material/legacy-button",
15+
"//src/material/legacy-card",
16+
"//src/material/legacy-progress-bar",
17+
],
18+
)
19+
20+
sass_binary(
21+
name = "legacy_card_demo_scss",
22+
src = "legacy-card-demo.scss",
23+
)

0 commit comments

Comments
 (0)