Skip to content

Commit 95d04e2

Browse files
simeonoffsimeonoff
authored
Merge pull request #1984 from IgniteUI/sivanova/icon-refactoring
refactor(icon): improve icon samples
2 parents 58d493f + 26614e5 commit 95d04e2

24 files changed

+162
-299
lines changed

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

+21-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,10 @@ import {
1818
} from "./circular-progressbar/circular-styling-sample/circular-styling-sample.component";
1919
import { dataDisplayRoutesData } from "./data-display-routes-data";
2020
import { IconSample1Component } from "./icon/icon-sample-1/icon-sample-1.component";
21-
import { IconSample2Component } from "./icon/icon-sample2/icon-sample2.component";
21+
import { IconSample2Component } from "./icon/icon-sample-2/icon-sample-2.component";
22+
import { IconSample3Component } from "./icon/icon-sample-3/icon-sample-3.component";
23+
import { IconSample4Component } from "./icon/icon-sample-4/icon-sample-4.component";
24+
import { IconSample5Component } from "./icon/icon-sample-5/icon-sample-5.component";
2225
import { IconStylingSample } from "./icon/icon-styling-sample/icon-styling-sample.component";
2326
import { SvgIconSampleComponent } from "./icon/svg-icon-sample/svg-icon-sample.component";
2427
import { IgxForComponent } from "./igxFor/igxFor.component";
@@ -92,7 +95,23 @@ export const dataDisplayRoutes: Routes = [
9295
},
9396
{
9497
component: IconSample2Component,
95-
path: "icon-sample2"
98+
data: dataDisplayRoutesData["icon-sample-2"],
99+
path: "icon-sample-2"
100+
},
101+
{
102+
component: IconSample3Component,
103+
data: dataDisplayRoutesData["icon-sample-3"],
104+
path: "icon-sample-3"
105+
},
106+
{
107+
component: IconSample4Component,
108+
data: dataDisplayRoutesData["icon-sample-4"],
109+
path: "icon-sample-4"
110+
},
111+
{
112+
component: IconSample5Component,
113+
data: dataDisplayRoutesData["icon-sample-5"],
114+
path: "icon-sample-5"
96115
},
97116
{
98117
component: SvgIconSampleComponent,

‎src/app/data-display/data-display.module.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,10 @@ import {
2626
} from "./circular-progressbar/circular-styling-sample/circular-styling-sample.component";
2727
import { DataDisplayRoutingModule } from "./data-display-routing.module";
2828
import { IconSample1Component } from "./icon/icon-sample-1/icon-sample-1.component";
29-
import { IconSample2Component } from "./icon/icon-sample2/icon-sample2.component";
29+
import { IconSample2Component } from "./icon/icon-sample-2/icon-sample-2.component";
30+
import { IconSample3Component } from "./icon/icon-sample-3/icon-sample-3.component";
31+
import { IconSample4Component } from "./icon/icon-sample-4/icon-sample-4.component";
32+
import { IconSample5Component } from "./icon/icon-sample-5/icon-sample-5.component";
3033
import { IconStylingSample } from "./icon/icon-styling-sample/icon-styling-sample.component";
3134
import { SvgIconSampleComponent } from "./icon/svg-icon-sample/svg-icon-sample.component";
3235
import { IgxForComponent } from "./igxFor/igxFor.component";
@@ -69,6 +72,9 @@ import { TextHighlightStyleComponent } from "./text-highlight/text-highlight-sty
6972
CircularProgressbarComponent,
7073
IconSample1Component,
7174
IconSample2Component,
75+
IconSample3Component,
76+
IconSample4Component,
77+
IconSample5Component,
7278
IconStylingSample,
7379
SvgIconSampleComponent,
7480
IgxForComponent,

‎src/app/data-display/icon/icon-sample-1/icon-sample-1.component.html

+16-80
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,21 @@
1-
<div class="sample-content">
2-
<section class="sample-column">
3-
<article class="icons-wrapper">
4-
<div class="icon-sample">
5-
<igx-icon color="rgb(52, 0, 104)" >sentiment_very_satisfied</igx-icon>
6-
</div>
1+
<div class="wrapper">
2+
<div class="icon-sample">
3+
<igx-icon>sentiment_very_satisfied</igx-icon>
4+
</div>
75

8-
<div class="icon-sample">
9-
<igx-icon color="black" >home</igx-icon>
10-
</div>
6+
<div class="icon-sample">
7+
<igx-icon>home</igx-icon>
8+
</div>
119

12-
<div class="icon-sample">
13-
<igx-icon color="#0375be" >airplanemode_active</igx-icon>
14-
</div>
10+
<div class="icon-sample">
11+
<igx-icon>airplanemode_active</igx-icon>
12+
</div>
1513

16-
<div class="icon-sample">
17-
<igx-icon color="#e41c77" >favorite</igx-icon>
18-
</div>
14+
<div class="icon-sample">
15+
<igx-icon>favorite</igx-icon>
16+
</div>
1917

20-
<div class="icon-sample">
18+
<div class="icon-sample">
2119
<igx-icon [isActive]="false">search</igx-icon>
22-
</div>
23-
24-
<div class="icon-sample">
25-
<igx-icon color="rgb(52, 0, 104)" >notifications</igx-icon>
26-
</div>
27-
28-
<div class="icon-sample">
29-
<igx-icon color="black" >account_balance</igx-icon>
30-
</div>
31-
32-
<div class="icon-sample">
33-
<igx-icon color="#0375be" >phone_iphone</igx-icon>
34-
</div>
35-
36-
<div class="icon-sample">
37-
<igx-icon color="#e41c77" >pin_drop</igx-icon>
38-
</div>
39-
<div class="icon-sample">
40-
<igx-icon [isActive]="false">volume_off</igx-icon>
41-
</div>
42-
43-
<div class="icon-sample">
44-
<igx-icon color="rgb(52, 0, 104)" >person</igx-icon>
45-
</div>
46-
47-
<div class="icon-sample">
48-
<igx-icon color="black" >wifi</igx-icon>
49-
</div>
50-
51-
<div class="icon-sample">
52-
<igx-icon color="#0375be" >laptop_mac</igx-icon>
53-
</div>
54-
55-
<div class="icon-sample">
56-
<igx-icon color="#e41c77" >whatshot</igx-icon>
57-
</div>
58-
59-
<div class="icon-sample">
60-
<igx-icon [isActive]="false">cloud</igx-icon>
61-
</div>
62-
63-
<div class="icon-sample">
64-
<igx-icon color="rgb(52, 0, 104)" >school</igx-icon>
65-
</div>
66-
67-
<div class="icon-sample">
68-
<igx-icon color="black" >bluetooth</igx-icon>
69-
</div>
70-
71-
<div class="icon-sample">
72-
<igx-icon color="#0375be" >headset</igx-icon>
73-
</div>
74-
75-
<div class="icon-sample">
76-
<igx-icon color="#e41c77" >undo</igx-icon>
77-
</div>
78-
79-
<div class="icon-sample">
80-
<igx-icon [isActive]="false">keyboard_voice</igx-icon>
81-
</div>
82-
83-
</article>
84-
</section>
85-
</div>
20+
</div>
21+
</div>

‎src/app/data-display/icon/icon-sample-1/icon-sample-1.component.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
.icons-wrapper {
1+
.wrapper {
22
display: flex;
33
flex-flow: row wrap;
4+
margin: 16px 0;
45
}
6+
57
.icon-sample {
68
display: flex;
79
flex: 1 0 20%;
810
width: 44px;
911
height: 44px;
1012
justify-content: center;
1113
align-items: center;
12-
margin-bottom: 36px;
13-
}
14+
}

‎src/app/data-display/icon/icon-sample-1/icon-sample-1.component.ts

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
import { Component, OnInit } from "@angular/core";
1+
import { Component } from "@angular/core";
22

33
@Component({
44
selector: "app-icon-sample-1",
55
styleUrls: ["./icon-sample-1.component.scss"],
66
templateUrl: "./icon-sample-1.component.html"
77
})
8-
export class IconSample1Component implements OnInit {
9-
10-
constructor() { }
11-
12-
public ngOnInit() { }
13-
14-
}
8+
export class IconSample1Component { }

‎src/app/data-display/icon/icon-sample-2/icon-sample-2.component.html

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<div class="wrapper">
2+
<div class="icon-sample">
3+
<igx-icon>phone_iphone</igx-icon>
4+
</div>
5+
<div class="icon-sample">
6+
<igx-icon class="custom-size">phone_iphone</igx-icon>
7+
</div>
8+
</div>

‎src/app/data-display/icon/icon-sample2/icon-sample2.component.scss renamed to ‎src/app/data-display/icon/icon-sample-2/icon-sample-2.component.scss

+6-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
width: 56px;
44
height: 56px;
55
}
6-
.icons-wrapper {
6+
7+
.wrapper {
78
display: flex;
89
flex-flow: row wrap;
10+
margin: 16px 8px;
911
}
12+
1013
.icon-sample {
1114
display: flex;
1215
flex: 1 0 20%;
1316
height: 44px;
14-
justify-content: center;
1517
align-items: center;
16-
}
18+
max-width: 80px;
19+
}

‎src/app/data-display/icon/icon-sample-2/icon-sample-2.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-icon-sample-2",
5+
styleUrls: ["./icon-sample-2.component.scss"],
6+
templateUrl: "./icon-sample-2.component.html"
7+
})
8+
export class IconSample2Component { }

‎src/app/data-display/icon/icon-sample-3/icon-sample-3.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<igx-icon color="#e41c77">home</igx-icon>

‎src/app/data-display/icon/icon-sample-3/icon-sample-3.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.igx-icon {
2+
margin: 8px;
3+
}

‎src/app/data-display/icon/icon-sample-3/icon-sample-3.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-icon-sample-3",
5+
styleUrls: ["./icon-sample-3.component.scss"],
6+
templateUrl: "./icon-sample-3.component.html"
7+
})
8+
export class IconSample3Component { }

‎src/app/data-display/icon/icon-sample-4/icon-sample-4.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<igx-icon [isActive]="false">volume_off</igx-icon>

‎src/app/data-display/icon/icon-sample-4/icon-sample-4.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.igx-icon {
2+
margin: 8px;
3+
}

‎src/app/data-display/icon/icon-sample-4/icon-sample-4.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-icon-sample-4",
5+
styleUrls: ["./icon-sample-4.component.scss"],
6+
templateUrl: "./icon-sample-4.component.html"
7+
})
8+
export class IconSample4Component { }

‎src/app/data-display/icon/icon-sample-5/icon-sample-5.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<igx-icon>bluetooth</igx-icon>

‎src/app/data-display/icon/icon-sample-5/icon-sample-5.component.scss

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.igx-icon {
2+
margin: 8px;
3+
}

‎src/app/data-display/icon/icon-sample-5/icon-sample-5.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from "@angular/core";
2+
3+
@Component({
4+
selector: "app-icon-sample-5",
5+
styleUrls: ["./icon-sample-5.component.scss"],
6+
templateUrl: "./icon-sample-5.component.html"
7+
})
8+
export class IconSample5Component { }

‎src/app/data-display/icon/icon-sample2/icon-sample2.component.html

-13
This file was deleted.

‎src/app/data-display/icon/icon-sample2/icon-sample2.component.ts

-15
This file was deleted.

0 commit comments

Comments
 (0)