Skip to content

Commit 925cc8e

Browse files
author
MPopov
committed
feat(dev-demos): improve page header and samples.
1 parent 9be65f7 commit 925cc8e

File tree

95 files changed

+5067
-5401
lines changed

Some content is hidden

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

95 files changed

+5067
-5401
lines changed

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

Lines changed: 84 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,91 @@
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>
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>
1625
</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>
26+
</div>
27+
<div class="sample-column">
28+
<p>{{result}}</p>
29+
</div>
30+
</article>
3531

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>
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>
4541

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>
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>
5248

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>
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>
6763

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>
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>
7571

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>
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>
82+
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>
8691

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>
95-
</div>

‎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: 14 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,18 @@ 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(
520+
filter(event => event instanceof NavigationEnd)
521+
).subscribe(event => {
522+
for(let component of this.componentLinks) {
523+
console.log(component.link);
524+
console.log(router.url);
525+
if(component.link === router.url) {
526+
this.urlString = component.name
527+
}
528+
}
529+
});
517530
}
518531

519532
ngOnInit() {
@@ -529,6 +542,5 @@ export class AppComponent implements OnInit {
529542
// register custom SVG icons
530543
this.iconService.addSvgIcon('rain', '../assets/images/card/icons/rain.svg', 'weather-icons');
531544
this.iconService.addSvgIcon('breeze', '../assets/images/card/icons/breeze.svg', 'weather-icons');
532-
533545
}
534546
}

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

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
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}}
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 }}
3215
</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>
16+
</igx-drop-down-item-group>
17+
</igx-drop-down>
18+
</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>

0 commit comments

Comments
 (0)