Skip to content

Commit cfbf346

Browse files
author
MPopov
committed
feat(dev-demos):
1. Remove unused css 2. Simplify the markup of some components 2. Fix some layout issues
1 parent d444be0 commit cfbf346

File tree

9 files changed

+191
-218
lines changed

9 files changed

+191
-218
lines changed

‎src/app/action-strip/action-strip.sample.html

Lines changed: 73 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,80 @@
1-
<section>
2-
<article>
3-
<div class="display-density-actions">
4-
<h4>Display Density</h4>
5-
<igx-buttongroup>
6-
<button igxButton [disabled]="displayDensity === compact"
7-
(click)="setDensity(compact)">Compact</button>
8-
<button igxButton [disabled]="displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
9-
<button igxButton [disabled]="displayDensity === comfortable"
10-
(click)="setDensity(comfortable)">Comfortable</button>
11-
</igx-buttongroup>
12-
</div>
13-
</article>
14-
<article>
15-
<div class="sample-column">
16-
<div class="parent" (mouseenter)="showActions()" (mouseleave)="hideActions()">
17-
<p>
18-
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
19-
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
20-
</p>
21-
<igx-action-strip [(displayDensity)]="displayDensity" class="my-action-strip" #actionstrip
22-
*ngIf="isVisible">
23-
<igx-icon (click)="doSomeAction()">alarm</igx-icon>
24-
</igx-action-strip>
25-
</div>
26-
</div>
27-
<div class="sample-column">
28-
<p>{{result}}</p>
29-
</div>
30-
</article>
1+
<div class="display-density-actions">
2+
<igx-buttongroup>
3+
<button igxButton [disabled]="displayDensity === compact"
4+
(click)="setDensity(compact)">Compact</button>
5+
<button igxButton [disabled]="displayDensity === cosy" (click)="setDensity(cosy)">Cosy</button>
6+
<button igxButton [disabled]="displayDensity === comfortable"
7+
(click)="setDensity(comfortable)">Comfortable</button>
8+
</igx-buttongroup>
9+
</div>
3110

32-
<article>
33-
<div class="sample-column">
34-
<h5>Grid Pinning Action</h5>
35-
<igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'"
36-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
37-
(mouseleave)="onMouseLeave(actionstrip1)" (mouseover)="onMouseOver($event, grid1, actionstrip1)">
38-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
39-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
40-
</igx-column>
11+
<div class="sample-column">
12+
<div class="parent" (mouseenter)="showActions()" (mouseleave)="hideActions()">
13+
<p>
14+
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
15+
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
16+
</p>
17+
<igx-action-strip [(displayDensity)]="displayDensity" class="my-action-strip" #actionstrip
18+
*ngIf="isVisible">
19+
<igx-icon (click)="doSomeAction()">alarm</igx-icon>
20+
</igx-action-strip>
21+
</div>
22+
</div>
23+
<div class="sample-column">
24+
<p>{{result}}</p>
25+
</div>
4126

42-
<igx-action-strip #actionstrip1 [(displayDensity)]="displayDensity">
43-
<igx-grid-pinning-actions></igx-grid-pinning-actions>
44-
</igx-action-strip>
45-
</igx-grid>
46-
</div>
47-
</article>
27+
<div class="sample-column">
28+
<h5>Grid Pinning Action</h5>
29+
<igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'"
30+
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
31+
(mouseleave)="onMouseLeave(actionstrip1)" (mouseover)="onMouseOver($event, grid1, actionstrip1)">
32+
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
33+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
34+
</igx-column>
4835

49-
<article>
50-
<div class="sample-column">
51-
<h5>Grid Pinning and Editing Actions</h5>
52-
<igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
53-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
54-
(mouseleave)="onMouseLeave(actionstrip2)">
55-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
56-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
57-
<ng-template igxCell let-cell="cell" let-val>
58-
<div class="cell-template" (mouseover)="actionstrip2.show(cell.row)">
59-
<span>{{val}}</span>
60-
</div>
61-
</ng-template>
62-
</igx-column>
36+
<igx-action-strip #actionstrip1 [(displayDensity)]="displayDensity">
37+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
38+
</igx-action-strip>
39+
</igx-grid>
40+
</div>
6341

64-
<igx-action-strip #actionstrip2 [(displayDensity)]="displayDensity">
65-
<igx-grid-pinning-actions></igx-grid-pinning-actions>
66-
<igx-grid-editing-actions></igx-grid-editing-actions>
67-
</igx-action-strip>
68-
</igx-grid>
69-
</div>
70-
</article>
42+
<div class="sample-column">
43+
<h5>Grid Pinning and Editing Actions</h5>
44+
<igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
45+
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
46+
(mouseleave)="onMouseLeave(actionstrip2)">
47+
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
48+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
49+
<ng-template igxCell let-cell="cell" let-val>
50+
<div class="cell-template" (mouseover)="actionstrip2.show(cell.row)">
51+
<span>{{val}}</span>
52+
</div>
53+
</ng-template>
54+
</igx-column>
7155

72-
<article>
73-
<div class="sample-column">
74-
<h5>Actions in menu</h5>
75-
<igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
76-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
77-
(mouseleave)="onMouseLeave(actionstrip3, $event)"
78-
(mouseover)="onMouseOver($event, grid3, actionstrip3)">
79-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
80-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
81-
</igx-column>
56+
<igx-action-strip #actionstrip2 [(displayDensity)]="displayDensity">
57+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
58+
<igx-grid-editing-actions></igx-grid-editing-actions>
59+
</igx-action-strip>
60+
</igx-grid>
61+
</div>
62+
63+
<div class="sample-column">
64+
<h5>Actions in menu</h5>
65+
<igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
66+
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
67+
(mouseleave)="onMouseLeave(actionstrip3, $event)"
68+
(mouseover)="onMouseOver($event, grid3, actionstrip3)">
69+
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
70+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
71+
</igx-column>
72+
73+
<igx-action-strip #actionstrip3 [(displayDensity)]="displayDensity">
74+
<igx-grid-pinning-actions *igxActionStripMenuItem></igx-grid-pinning-actions>
75+
<igx-grid-editing-actions *igxActionStripMenuItem></igx-grid-editing-actions>
76+
</igx-action-strip>
77+
</igx-grid>
78+
</div>
8279

83-
<igx-action-strip #actionstrip3 [(displayDensity)]="displayDensity">
84-
<igx-grid-pinning-actions *igxActionStripMenuItem></igx-grid-pinning-actions>
85-
<igx-grid-editing-actions *igxActionStripMenuItem></igx-grid-editing-actions>
86-
</igx-action-strip>
87-
</igx-grid>
88-
</div>
89-
</article>
90-
</section>
9180

‎src/app/autocomplete/autocomplete.sample.css

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,39 @@
1-
.logo {
2-
margin-right: 10px;
1+
.sample-form {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: center;
5+
flex-wrap: wrap;
6+
max-width: 400px;
7+
margin: 0 auto;
8+
padding: 16px;
9+
background: var(--igx-grays-50);
10+
border-radius: 4px;
11+
}
12+
13+
igx-input-group {
14+
flex: 1;
15+
margin: 8px;
316
}
417

5-
.box {
18+
.dd-item {
619
display: flex;
7-
margin-bottom: 20px;
20+
align-items: center;
821
}
922

10-
.group {
11-
flex-grow: 1;
23+
.dd-item > span {
24+
text-overflow: ellipsis;
25+
overflow: hidden;
1226
}
1327

14-
.submit {
15-
display: flex;
16-
justify-content: center;
17-
}
28+
.dd-icon {
29+
margin-right: 16px;
30+
}
31+
32+
button {
33+
margin: 16px 8px !important;
34+
}
35+
36+
igx-switch {
37+
margin: 16px 0;
38+
align-self: center;
39+
}

‎src/app/autocomplete/autocomplete.sample.html

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,32 @@
1-
<section class="sample-content">
2-
<article class="sample-column">
3-
<form class="input-sample" action="/" method="POST" [formGroup]="travel">
4-
<div class="box">
5-
<igx-input-group class="group">
6-
<igx-prefix><igx-icon fontSet="material">language</igx-icon></igx-prefix>
7-
<input formControlName="country" igxInput type="text" required
8-
[igxAutocomplete]='countryPanel'/>
9-
<label igxLabel>Country</label>
10-
</igx-input-group>
11-
<igx-drop-down #countryPanel maxHeight="400px">
12-
<igx-drop-down-item-group *ngFor="let continent of worldInfo | groupContains: travel.value.country" [label]="continent.name">
13-
<igx-drop-down-item *ngFor="let country of continent.countries | contains: travel.value.country" [value]="country">
14-
{{ country }}
15-
</igx-drop-down-item>
16-
</igx-drop-down-item-group>
17-
</igx-drop-down>
1+
<form action="/" class="sample-form" method="POST" [formGroup]="travel">
2+
<igx-input-group type="box">
3+
<igx-prefix><igx-icon fontSet="material">language</igx-icon></igx-prefix>
4+
<input placeholder="Country" formControlName="country" igxInput type="text" required
5+
[igxAutocomplete]='countryPanel'/>
6+
</igx-input-group>
7+
<igx-drop-down #countryPanel maxHeight="400px">
8+
<igx-drop-down-item-group *ngFor="let continent of worldInfo | groupContains: travel.value.country" [label]="continent.name">
9+
<igx-drop-down-item *ngFor="let country of continent.countries | contains: travel.value.country" [value]="country">
10+
{{ country }}
11+
</igx-drop-down-item>
12+
</igx-drop-down-item-group>
13+
</igx-drop-down>
14+
<igx-input-group type="box">
15+
<igx-prefix><igx-icon fontSet="material">insert_emoticon</igx-icon></igx-prefix>
16+
<input placeholder="Attraction" igxInput formControlName="attraction" type="text" required
17+
[igxAutocomplete]='attractionsPanel'/>
18+
</igx-input-group>
19+
<igx-drop-down #attractionsPanel [width]="attractionsWidth" maxHeight="300px">
20+
<igx-drop-down-item *ngFor="let attraction of attractions | contains: travel.value.attraction" [value]="attraction.name">
21+
<div class="dd-item">
22+
<igx-icon class="dd-icon" fontSet="material">{{attraction.image}}</igx-icon>
23+
<span>{{attraction.name}}</span>
1824
</div>
19-
<div class="box">
20-
<igx-input-group class="group">
21-
<igx-prefix><igx-icon fontSet="material">insert_emoticon</igx-icon></igx-prefix>
22-
<input igxInput formControlName="attraction" type="text" required
23-
[igxAutocomplete]='attractionsPanel'/>
24-
<label igxLabel>Attraction</label>
25-
</igx-input-group>
26-
<igx-drop-down #attractionsPanel [width]="attractionsWidth" maxHeight="300px">
27-
<igx-drop-down-item *ngFor="let attraction of attractions | contains: travel.value.attraction" [value]="attraction.name">
28-
<igx-icon class="logo" fontSet="material">{{attraction.image}}</igx-icon>
29-
{{attraction.name}}
30-
</igx-drop-down-item>
31-
</igx-drop-down>
32-
</div>
33-
<igx-dialog #alert leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>
34-
<div class="submit">
35-
<button igxButton (click)="onSearch()" [disabled]="!travel.valid">Search</button>
36-
</div>
37-
</form>
38-
<igx-switch (change)="changeDefaultWidth($event)">Attractions Custom Width</igx-switch>
39-
</article>
40-
</section>
25+
</igx-drop-down-item>
26+
</igx-drop-down>
27+
<igx-dialog #alert leftButtonLabel="OK" (onLeftButtonSelect)="alert.close()"></igx-dialog>
28+
29+
<button igxButton="raised" (click)="onSearch()" [disabled]="!travel.valid">Search</button>
30+
31+
<igx-switch (change)="changeDefaultWidth($event)">Attractions Custom Width</igx-switch>
32+
</form>

‎src/app/badge/badge.sample.html

Lines changed: 48 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,49 @@
1-
<div class="sample-content">
2-
<!--Avatars w/ badges-->
3-
<section class="sample-column">
4-
<h4 class="sample-title">In conjunction with the
5-
<i class="light">Badge Component</i>
6-
</h4>
7-
<article class="avatars-wrapper">
8-
9-
<div class="avatar-sample">
10-
<igx-avatar icon="face" roundShape="true"></igx-avatar>
11-
<igx-badge class="badge-theme" icon="check"></igx-badge>
12-
</div>
13-
14-
<div class="avatar-sample">
15-
<igx-avatar icon="face" size="medium"></igx-avatar>
16-
<igx-badge value="8"></igx-badge>
17-
</div>
18-
19-
<div class="avatar-sample">
20-
<igx-avatar icon="face" size="large" roundShape="true"></igx-avatar>
21-
<igx-badge type="error" icon="close"></igx-badge>
22-
</div>
23-
24-
<div class="avatar-sample">
25-
<igx-avatar initials="AZ"></igx-avatar>
26-
<igx-badge type="warning" icon="plus_one"></igx-badge>
27-
</div>
28-
29-
<div class="avatar-sample">
30-
<igx-avatar initials="AZ" roundShape="true" size="medium"></igx-avatar>
31-
<igx-badge type="success" value="72"></igx-badge>
32-
</div>
33-
34-
<div class="avatar-sample">
35-
<igx-avatar initials="AZ" size="large"></igx-avatar>
36-
<igx-badge type="info" icon="star"></igx-badge>
37-
</div>
38-
39-
<div class="avatar-sample">
40-
<igx-avatar src="assets/images/avatar/22.jpg" roundShape="true"></igx-avatar>
41-
<igx-badge type="error" value="212"></igx-badge>
42-
</div>
43-
44-
<div class="avatar-sample">
45-
<igx-avatar src="assets/images/avatar/14.jpg" size="medium"></igx-avatar>
46-
<igx-badge type="warning" icon="perm_identity"></igx-badge>
47-
</div>
48-
49-
<div class="avatar-sample">
50-
<igx-avatar src="assets/images/avatar/8.jpg" roundShape="true" size="large"></igx-avatar>
51-
<igx-badge type="success" icon="chat_bubble"></igx-badge>
52-
</div>
53-
</article>
54-
</section>
1+
<h4 class="sample-title">In conjunction with the
2+
<i class="light">Badge Component</i>
3+
</h4>
4+
<div class="avatars-wrapper">
5+
<div class="avatar-sample">
6+
<igx-avatar icon="face" roundShape="true"></igx-avatar>
7+
<igx-badge class="badge-theme" icon="check"></igx-badge>
8+
</div>
9+
10+
<div class="avatar-sample">
11+
<igx-avatar icon="face" size="medium"></igx-avatar>
12+
<igx-badge value="8"></igx-badge>
13+
</div>
14+
15+
<div class="avatar-sample">
16+
<igx-avatar icon="face" size="large" roundShape="true"></igx-avatar>
17+
<igx-badge type="error" icon="close"></igx-badge>
18+
</div>
19+
20+
<div class="avatar-sample">
21+
<igx-avatar initials="AZ"></igx-avatar>
22+
<igx-badge type="warning" icon="plus_one"></igx-badge>
23+
</div>
24+
25+
<div class="avatar-sample">
26+
<igx-avatar initials="AZ" roundShape="true" size="medium"></igx-avatar>
27+
<igx-badge type="success" value="72"></igx-badge>
28+
</div>
29+
30+
<div class="avatar-sample">
31+
<igx-avatar initials="AZ" size="large"></igx-avatar>
32+
<igx-badge type="info" icon="star"></igx-badge>
33+
</div>
34+
35+
<div class="avatar-sample">
36+
<igx-avatar src="assets/images/avatar/22.jpg" roundShape="true"></igx-avatar>
37+
<igx-badge type="error" value="212"></igx-badge>
38+
</div>
39+
40+
<div class="avatar-sample">
41+
<igx-avatar src="assets/images/avatar/14.jpg" size="medium"></igx-avatar>
42+
<igx-badge type="warning" icon="perm_identity"></igx-badge>
43+
</div>
44+
45+
<div class="avatar-sample">
46+
<igx-avatar src="assets/images/avatar/8.jpg" roundShape="true" size="large"></igx-avatar>
47+
<igx-badge type="success" icon="chat_bubble"></igx-badge>
48+
</div>
5549
</div>

0 commit comments

Comments
 (0)