Skip to content

Commit 2dc10d1

Browse files
zdrawkuzdrawku
authored
Merge pull request #1107 from IgniteUI/card-samples
refactor(cards): update card samples to showcase refactored cards
2 parents bec496b + 771ceee commit 2dc10d1

29 files changed

+821
-381
lines changed

‎live-editing/configs/CardConfigGenerator.ts‎

Lines changed: 116 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
11
/* tslint:disable:object-literal-sort-keys */
22
import {
3-
IgxAvatarModule, IgxButtonModule, IgxCardModule,
4-
IgxIconModule, IgxRippleModule
3+
IgxAvatarModule,
4+
IgxButtonModule,
5+
IgxCardModule,
6+
IgxChipsModule,
7+
IgxDividerModule,
8+
IgxExpansionPanelModule,
9+
IgxIconModule,
10+
IgxListModule,
11+
IgxRippleModule,
12+
IgxSliderModule
513
} from "igniteui-angular";
14+
615
import { CardSample1Component } from "../../src/app/layouts/card/card-sample-1/card-sample-1.component";
716
import { CardSample2Component } from "../../src/app/layouts/card/card-sample-2/card-sample-2.component";
817
import { CardSample3Component } from "../../src/app/layouts/card/card-sample-3/card-sample-3.component";
18+
import { CardSample4Component } from "../../src/app/layouts/card/card-sample-4/card-sample-4.component";
919
import { CardComponent } from "../../src/app/layouts/card/card.component";
20+
1021
import { AppModuleConfig } from "./core/AppModuleConfig";
1122
import { Config } from "./core/Config";
1223
import { IConfigGenerator } from "./core/IConfigGenerator";
@@ -19,47 +30,136 @@ export class CardConfigGenerator implements IConfigGenerator {
1930
configs.push(new Config({
2031
component: CardComponent,
2132
appModuleConfig: new AppModuleConfig({
22-
imports: [IgxAvatarModule, IgxButtonModule, IgxIconModule,
23-
IgxCardModule, IgxRippleModule, CardComponent],
33+
imports: [
34+
IgxButtonModule,
35+
IgxIconModule,
36+
IgxCardModule,
37+
IgxRippleModule,
38+
CardComponent
39+
],
2440
ngDeclarations: [CardComponent],
25-
ngImports: [IgxAvatarModule, IgxButtonModule, IgxIconModule,
26-
IgxCardModule, IgxRippleModule]
41+
ngImports: [
42+
IgxButtonModule,
43+
IgxIconModule,
44+
IgxCardModule,
45+
IgxRippleModule
46+
]
2747
}),
28-
shortenComponentPathBy: "/layouts/"
48+
additionalFiles: [
49+
"/src/app/layouts/card/card.blueprint.ts"
50+
],
51+
shortenComponentPathBy: "/layouts/card/"
2952
}));
3053

3154
// card sample 1
3255
configs.push(new Config({
3356
component: CardSample1Component,
3457
appModuleConfig: new AppModuleConfig({
35-
imports: [IgxCardModule, CardSample1Component],
58+
imports: [
59+
IgxButtonModule,
60+
IgxIconModule,
61+
IgxCardModule,
62+
IgxDividerModule,
63+
CardSample1Component
64+
],
3665
ngDeclarations: [CardSample1Component],
37-
ngImports: [IgxCardModule]
66+
ngImports: [
67+
IgxButtonModule,
68+
IgxIconModule,
69+
IgxCardModule,
70+
IgxDividerModule
71+
]
3872
}),
39-
shortenComponentPathBy: "/card/"
73+
additionalFiles: [
74+
"/src/app/layouts/card/card.blueprint.ts"
75+
],
76+
shortenComponentPathBy: "/layouts/card/"
4077
}));
4178

4279
// card sample 2
4380
configs.push(new Config({
4481
component: CardSample2Component,
4582
appModuleConfig: new AppModuleConfig({
46-
imports: [IgxAvatarModule, IgxCardModule, CardSample2Component],
83+
imports: [
84+
IgxButtonModule,
85+
IgxIconModule,
86+
IgxCardModule,
87+
IgxDividerModule,
88+
CardSample2Component
89+
],
4790
ngDeclarations: [CardSample2Component],
48-
ngImports: [IgxAvatarModule, IgxCardModule]
91+
ngImports: [
92+
IgxButtonModule,
93+
IgxIconModule,
94+
IgxCardModule,
95+
IgxDividerModule
96+
]
4997
}),
98+
additionalFiles: [
99+
"/src/app/layouts/card/card.blueprint.ts"
100+
],
50101
shortenComponentPathBy: "/layouts/card/"
51102
}));
52103

53104
// card sample 3
54105
configs.push(new Config({
55106
component: CardSample3Component,
56107
appModuleConfig: new AppModuleConfig({
57-
imports: [IgxAvatarModule, IgxButtonModule, IgxIconModule,
58-
IgxCardModule, IgxRippleModule, CardSample3Component],
108+
imports: [
109+
IgxAvatarModule,
110+
IgxButtonModule,
111+
IgxCardModule,
112+
IgxRippleModule,
113+
CardSample3Component
114+
],
59115
ngDeclarations: [CardSample3Component],
60-
ngImports: [IgxAvatarModule, IgxButtonModule, IgxIconModule,
61-
IgxCardModule, IgxRippleModule]
116+
ngImports: [
117+
IgxAvatarModule,
118+
IgxButtonModule,
119+
IgxCardModule,
120+
IgxRippleModule
121+
]
122+
}),
123+
additionalFiles: [
124+
"/src/app/layouts/card/card.blueprint.ts"
125+
],
126+
shortenComponentPathBy: "/layouts/card/"
127+
}));
128+
129+
// card sample 4
130+
configs.push(new Config({
131+
component: CardSample4Component,
132+
appModuleConfig: new AppModuleConfig({
133+
imports: [
134+
IgxAvatarModule,
135+
IgxButtonModule,
136+
IgxIconModule,
137+
IgxCardModule,
138+
IgxDividerModule,
139+
IgxRippleModule,
140+
IgxChipsModule,
141+
IgxSliderModule,
142+
IgxListModule,
143+
IgxExpansionPanelModule,
144+
CardSample4Component
145+
],
146+
ngDeclarations: [CardSample4Component],
147+
ngImports: [
148+
IgxAvatarModule,
149+
IgxButtonModule,
150+
IgxIconModule,
151+
IgxCardModule,
152+
IgxDividerModule,
153+
IgxRippleModule,
154+
IgxChipsModule,
155+
IgxListModule,
156+
IgxExpansionPanelModule,
157+
IgxSliderModule
158+
]
62159
}),
160+
additionalFiles: [
161+
"/src/app/layouts/card/card.blueprint.ts"
162+
],
63163
shortenComponentPathBy: "/layouts/card/"
64164
}));
65165

‎src/app/app-routing.module.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import "rxjs/add/operator/filter";
55
import { HomeComponent } from "./home/home.component";
66
import { DocsLayoutComponent } from "./index/docs-layout.component";
77
import { IndexComponent } from "./index/index.component";
8-
import { CardSample1Component } from "./layouts/card/card-sample-1/card-sample-1.component";
98

109
export const samplesRoutes: Routes = [
1110
{
@@ -85,11 +84,6 @@ export const samplesRoutes: Routes = [
8584
loadChildren: "./grid-crm/grid-crm.module#GridCRMModule",
8685
path: "grid-crm"
8786
},
88-
{
89-
component: CardSample1Component,
90-
data: { displayName: "Card with Header and Content", parentName: "Card" },
91-
path: "card-sample-1"
92-
},
9387
{
9488
loadChildren: "./grid-finjs/grid-finjs.module#GridFinjsModule",
9589
path: "finjs-sample"

‎src/app/app.module.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { AppComponent } from "./app.component";
1111
import { HomeComponent } from "./home/home.component";
1212
import { DocsLayoutComponent } from "./index/docs-layout.component";
1313
import { IndexComponent } from "./index/index.component";
14-
import { CardSampleModule } from "./layouts/card/card-sample-1/card-sample-1.module";
1514

1615
@NgModule({
1716
bootstrap: [AppComponent],
@@ -32,7 +31,6 @@ import { CardSampleModule } from "./layouts/card/card-sample-1/card-sample-1.mod
3231
BrowserModule,
3332
BrowserAnimationsModule,
3433
IgxButtonModule,
35-
CardSampleModule,
3634
FormsModule
3735
]
3836
})

‎src/app/interactions/interactions.module.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
IgxOverlayService, IgxRippleModule, IgxSliderModule, IgxSwitchModule, IgxToggleModule,
88
IgxTooltipModule
99
} from "igniteui-angular";
10-
import { CardSampleModule } from "../layouts/card/card-sample-1/card-sample-1.module";
10+
import { LayoutsModule } from "../layouts/layouts.module";
1111
import { CustomDialogComponent } from "./dialog/custom-dialog/custom-dialog.component";
1212
import { DialogSample1Component } from "./dialog/dialog-sample-1/dialog-sample-1.component";
1313
import { DialogSample2Component } from "./dialog/dialog-sample-2/dialog-sample-2.component";
@@ -92,7 +92,7 @@ import { TooltipSimpleComponent } from "./tooltip/tooltip-simple/tooltip-simple.
9292
IgxSwitchModule,
9393
IgxTooltipModule,
9494
IgxToggleModule,
95-
CardSampleModule
95+
LayoutsModule
9696
],
9797
providers: [IgxOverlayService]
9898
})

‎src/app/layouts/card/card-sample-1/card-sample-1.component.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
<div class="sample-column card-wrapper">
2-
<igx-card>
3-
<igx-card-header>
4-
<h3 class="igx-card-header__title">Brad Stanley</h3>
5-
<h5 class="igx-card-header__subtitle">Audi AG</h5>
6-
</igx-card-header>
7-
<igx-card-content>
8-
<p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
9-
</igx-card-content>
10-
</igx-card>
11-
</div>
2+
<igx-card type="outlined">
3+
<igx-card-header>
4+
<h5 igxCardHeaderTitle>{{card.title}}</h5>
5+
<h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
6+
<igx-card-media width="64px" height="64px">
7+
<img [src]="card.imageUrl">
8+
</igx-card-media>
9+
</igx-card-header>
10+
11+
<igx-divider></igx-divider>
12+
13+
<igx-card-actions layout="justify">
14+
<button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
15+
<igx-icon>{{icon}}</igx-icon>
16+
</button>
17+
</igx-card-actions>
18+
</igx-card>
19+
</div>

‎src/app/layouts/card/card-sample-1/card-sample-1.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.card-wrapper {
22
max-width: 400px;
33
min-width: 250px;
4-
}
4+
}

‎src/app/layouts/card/card-sample-1/card-sample-1.component.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component } from "@angular/core";
2+
import { Card } from "../card.blueprint";
23

34
@Component({
4-
selector: "app-igx-card-simple",
5-
styleUrls: ["./card-sample-1.component.scss"],
6-
templateUrl: "./card-sample-1.component.html"
5+
selector: "app-igx-card-simple",
6+
styleUrls: ["./card-sample-1.component.scss"],
7+
templateUrl: "./card-sample-1.component.html"
78
})
8-
export class CardSample1Component implements OnInit {
9-
constructor() { }
10-
11-
public ngOnInit() {
12-
}
9+
export class CardSample1Component {
10+
public card = new Card({
11+
icons: ["skip_previous", "play_arrow", "skip_next"],
12+
imageUrl: "assets/images/card/media/ROZES-Under-the-Grave.jpg",
13+
subtitle: "Under the Grave (2016)",
14+
title: "Rozes"
15+
});
1316
}

‎src/app/layouts/card/card-sample-1/card-sample-1.module.ts‎

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

‎src/app/layouts/card/card-sample-2/card-sample-2.component.html‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,25 @@
11
<div class="sample-column card-wrapper">
2-
<igx-card>
3-
<igx-card-header class="compact">
4-
<igx-avatar src="assets/images/card/avatars/brad_stanley.jpg" roundShape="true"></igx-avatar>
5-
<div class="igx-card-header__tgroup">
6-
<h3 class="igx-card-header__title--small">Brad Stanley</h3>
7-
<h5 class="igx-card-header__subtitle">Audi AG</h5>
8-
</div>
9-
</igx-card-header>
10-
<div style="overflow: hidden">
11-
<img width="100%" height="100%" src="assets/images/card/media/audi.jpg">
2+
<igx-card type="outlined" [horizontal]="horizontal">
3+
<div igxLayout igxLayoutDir="column" igxFlex igxFlexGrow="1">
4+
<igx-card-header>
5+
<h5 igxCardHeaderTitle>{{card.title}}</h5>
6+
<h5 igxCardHeaderSubtitle>{{card.subtitle}}</h5>
7+
<igx-card-media width="64px" height="64px">
8+
<img [src]="card.imageUrl">
9+
</igx-card-media>
10+
</igx-card-header>
11+
12+
<igx-card-content>
13+
<p>{{card.content}}</p>
14+
</igx-card-content>
1215
</div>
13-
<igx-card-content>
14-
<p class="igx-card-content__text">Brad Stanley (born 17 March 1963 in Titting, Germany) is a German business executive and chairman of the Vorstand (CEO) of Audi AG.</p>
15-
</igx-card-content>
16+
17+
<igx-divider [vertical]="horizontal"></igx-divider>
18+
19+
<igx-card-actions layout="justify">
20+
<button *ngFor="let icon of card.icons;" igxButton="icon" igxRipple igxRippleCentered="true">
21+
<igx-icon>{{icon}}</igx-icon>
22+
</button>
23+
</igx-card-actions>
1624
</igx-card>
17-
</div>
25+
</div>

‎src/app/layouts/card/card-sample-2/card-sample-2.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
.card-wrapper {
22
max-width: 400px;
33
min-width: 250px;
4-
}
4+
}

0 commit comments

Comments
 (0)