Skip to content

Commit 7fc8c04

Browse files
simeonoffsimeonoff
authored
Merge pull request #8013 from IgniteUI/didimmova/refactor-dev-demos
refactor(demos): add refactored dev demos
2 parents 243a0d5 + 561839c commit 7fc8c04

File tree

143 files changed

+5703
-6110
lines changed

Some content is hidden

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

143 files changed

+5703
-6110
lines changed

‎projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -141,22 +141,24 @@
141141
}
142142

143143
/// Generates CSS class names for all colors from
144-
/// the color palette for a given property, with
144+
/// for a given property and color palette, with
145145
/// optional prefix and suffix attached to the class name.
146146
/// @access private
147147
/// @param {string} $prop - The CSS property to assign the palette color to.
148148
/// @param {string} $prefix - A prefix to be attached to the class name.
149149
/// @param {string} $suffix - A suffix to be attached to the class name.
150+
/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.
150151
/// @example scss Generate background classes with colors from the palette.
151152
/// // Will generate class names like
152153
/// // .my-primary-500-bg { ... };
153154
/// @include gen-color-classes(
154155
/// $prop: 'background-color',
155-
/// $prefix: 'my', $suffix: 'bg'
156+
/// $prefix: 'my',
157+
/// $suffix: 'bg'
156158
/// );
157159
/// @requires {mixin} gen-color-class
158-
@mixin gen-color-classes($prop, $prefix, $suffix) {
159-
@each $palette-name, $sub-palette in $default-palette {
160+
@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {
161+
@each $palette-name, $sub-palette in $palette {
160162
@each $variant, $color in $sub-palette {
161163
@if type-of($color) != 'map' {
162164
@include gen-color-class($palette-name, $variant, $prefix, $suffix) {
@@ -211,12 +213,13 @@
211213
}
212214

213215
/// Generates CSS class names for all colors from
214-
/// the color palette for a given property, with
216+
/// for a given property and color palette, with
215217
/// optional prefix and suffix attached to the class name.
216218
/// @access private
217219
/// @param {string} $prop - The CSS property to assign the palette color to.
218220
/// @param {string} $prefix [igx] - A prefix to be attached to the class name.
219221
/// @param {string} $suffix [null] - A suffix to be attached to the class name.
222+
/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.
220223
/// @example scss Generate background classes with colors from the palette.
221224
/// // Will generate class names like
222225
/// // .igx-primary-500-bg { ... };
@@ -225,8 +228,8 @@
225228
/// $suffix: 'bg'
226229
/// );
227230
/// @requires {mixin} gen-color-classes
228-
@mixin igx-color-classes($prop, $suffix: null, $prefix: 'igx') {
229-
@include gen-color-classes($prop, $prefix, $suffix);
231+
@mixin igx-color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {
232+
@include gen-color-classes($prop, $prefix, $suffix, $palette);
230233
}
231234

232235
/// Parses a map of key value pairs

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

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

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

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

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

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

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

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

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1+
@import '../../styles/igniteui-theme.scss';
2+
3+
.display-density-actions {
4+
max-width: 600px;
5+
margin: 16px;
6+
7+
h4 {
8+
margin: 20px 0;
9+
}
10+
}
11+
112
.parent {
213
display: flex;
314
align-items: center;
415
justify-content: center;
516
padding: 16px;
617
width: 400px;
718
height: 200px;
8-
background-color: #f9f9f9;
919
position: relative;
20+
background-color: var(--igx-grays-200);
1021
}
1122

1223
.my-action-strip {
@@ -22,7 +33,7 @@
2233
display: flex;
2334
align-items: center;
2435
justify-content: flex-start;
25-
width:100%;
36+
width: 100%;
2637
height: 100%;
2738
}
2839

‎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/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
IgxIconModule, IgxGridModule, IgxExcelExporterService, IgxCsvExporterService, IgxOverlayService,
88
IgxDragDropModule, IgxDividerModule, IgxTreeGridModule, IgxHierarchicalGridModule, IgxInputGroupModule,
99
IgxIconService, DisplayDensityToken, DisplayDensity,
10-
IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxActionStripModule, GridBaseAPIService
10+
IgxDateTimeEditorModule, IgxDateRangePickerModule, IgxButtonModule, IgxButtonGroupModule, IgxActionStripModule, GridBaseAPIService
1111
} from 'igniteui-angular';
1212
import { IgxColumnHidingModule } from 'igniteui-angular';
1313
import { SharedModule } from './shared/shared.module';

‎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+
}

0 commit comments

Comments
 (0)