Skip to content

Commit 0df4349

Browse files
simeonoffsimeonoff
authored
Merge pull request #8058 from IgniteUI/mpopov/dev-demos-enhancement
feat(dev-demos): improve page header and samples.
2 parents 9c79436 + cfbf346 commit 0df4349

File tree

101 files changed

+5079
-5448
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+5079
-5448
lines changed

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

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

36-
<article>
37-
<div class="sample-column">
38-
<h5>Grid Pinning Action</h5>
39-
<igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'"
40-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
41-
(mouseleave)="onMouseLeave(actionstrip1)" (mouseover)="onMouseOver($event, grid1, actionstrip1)">
42-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
43-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
44-
</igx-column>
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>
4535

46-
<igx-action-strip #actionstrip1 [(displayDensity)]="displayDensity">
47-
<igx-grid-pinning-actions></igx-grid-pinning-actions>
48-
</igx-action-strip>
49-
</igx-grid>
50-
</div>
51-
</article>
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>
5241

53-
<article>
54-
<div class="sample-column">
55-
<h5>Grid Pinning and Editing Actions</h5>
56-
<igx-grid #grid2 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
57-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
58-
(mouseleave)="onMouseLeave(actionstrip2)">
59-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
60-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
61-
<ng-template igxCell let-cell="cell" let-val>
62-
<div class="cell-template" (mouseover)="actionstrip2.show(cell.row)">
63-
<span>{{val}}</span>
64-
</div>
65-
</ng-template>
66-
</igx-column>
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>
6755

68-
<igx-action-strip #actionstrip2 [(displayDensity)]="displayDensity">
69-
<igx-grid-pinning-actions></igx-grid-pinning-actions>
70-
<igx-grid-editing-actions></igx-grid-editing-actions>
71-
</igx-action-strip>
72-
</igx-grid>
73-
</div>
74-
</article>
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>
7562

76-
<article>
77-
<div class="sample-column">
78-
<h5>Actions in menu</h5>
79-
<igx-grid #grid3 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelection]="'multiple'"
80-
[rowEditable]="true" [primaryKey]="'ID'" [(displayDensity)]="displayDensity"
81-
(mouseleave)="onMouseLeave(actionstrip3, $event)"
82-
(mouseover)="onMouseOver($event, grid3, actionstrip3)">
83-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
84-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
85-
</igx-column>
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>
8672

87-
<igx-action-strip #actionstrip3 [(displayDensity)]="displayDensity">
88-
<igx-grid-pinning-actions *igxActionStripMenuItem></igx-grid-pinning-actions>
89-
<igx-grid-editing-actions *igxActionStripMenuItem></igx-grid-editing-actions>
90-
</igx-action-strip>
91-
</igx-grid>
92-
</div>
93-
</article>
94-
</section>
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>
9578
</div>
79+
80+

‎src/app/app.component.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@
5252
</igx-nav-drawer>
5353

5454
<div [style.paddingLeft]="drawerState.miniVariant && !drawerState.pin ? '60px' : null" class="content">
55-
<router-outlet></router-outlet>
55+
<app-page-header [title]="urlString"></app-page-header>
56+
<div class="sample-wrapper">
57+
<router-outlet></router-outlet>
58+
</div>
5659
</div>
5760
</div>

‎src/app/app.component.ts

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit, ViewChild, HostBinding } from '@angular/core';
2-
import { Router, NavigationStart } from '@angular/router';
2+
import { Router, NavigationStart, NavigationEnd } from '@angular/router';
33
import { filter } from 'rxjs/operators';
44
import { IgxNavigationDrawerComponent, IgxIconService } from 'igniteui-angular';
55

@@ -9,6 +9,7 @@ import { IgxNavigationDrawerComponent, IgxIconService } from 'igniteui-angular';
99
styleUrls: ['./app.component.css']
1010
})
1111
export class AppComponent implements OnInit {
12+
public urlString: string;
1213

1314
@ViewChild('navdrawer', { read: IgxNavigationDrawerComponent, static: true })
1415
navdrawer;
@@ -514,6 +515,14 @@ export class AppComponent implements OnInit {
514515
constructor(private router: Router, private iconService: IgxIconService) {
515516
iconService.registerFontSetAlias('fa-solid', 'fa');
516517
iconService.registerFontSetAlias('fa-brands', 'fab');
518+
519+
router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(event => {
520+
for (const component of this.componentLinks) {
521+
if (component.link === router.url) {
522+
this.urlString = component.name;
523+
}
524+
}
525+
});
517526
}
518527

519528
ngOnInit() {
@@ -529,6 +538,5 @@ export class AppComponent implements OnInit {
529538
// register custom SVG icons
530539
this.iconService.addSvgIcon('rain', '../assets/images/card/icons/rain.svg', 'weather-icons');
531540
this.iconService.addSvgIcon('breeze', '../assets/images/card/icons/breeze.svg', 'weather-icons');
532-
533541
}
534542
}

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

0 commit comments

Comments
 (0)