Skip to content

Commit 8670536

Browse files
desig9steindesig9stein
committed
refactor(samples): enhance layout and styling for improved usability
1 parent 0a34175 commit 8670536

4 files changed

Lines changed: 105 additions & 92 deletions

File tree

‎src/app/app.component.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
::ng-deep {
44
app-root {
55
--demo-navbar-size: 56px;
6+
--demo-header-height: 72px;
67
--header-row: 1;
78
--content-row: 2;
89
--content-spacing: 1rem;
@@ -19,7 +20,8 @@
1920
grid-row: var(--content-row);
2021
background: var(--ig-gray-50);
2122
overflow-x: clip;
22-
overflow-y: auto;
23+
overflow-y: hidden;
24+
min-width: 0;
2325

2426
height: calc(100dvh - var(--demo-navbar-size));
2527
}
@@ -47,7 +49,7 @@
4749
display: flex;
4850
align-items: center;
4951
justify-content: space-between;
50-
min-height: 56px;
52+
height: var(--demo-header-height);
5153
padding: var(--content-spacing);
5254

5355
> h3 {
@@ -68,8 +70,9 @@
6870
.demos-wrapper {
6971
display: flex;
7072
flex-direction: column;
71-
min-height: calc(100% - (var(--demo-navbar-size) + var(--demos-gap) + (var(--content-spacing) * 2)));
72-
overflow-y: auto;
73+
min-height: calc(100% - (var(--demo-header-height) + (var(--demo-navbar-size) + var(--demos-gap)) + (var(--content-spacing) * 2)));
74+
height: 100%;
75+
overflow-y: auto;
7376
padding: var(--content-spacing);
7477
color: var(--ig-gray-900);
7578
}

‎src/app/grid-external-filtering/grid-external-filtering.sample.html‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
1-
<div class="sample-content">
2-
<div igxFlex igxLayout igxLayoutDir="column">
3-
<div igxFlex igxLayout>
4-
<div igxFlex igxLayout igxLayoutDir="column">
5-
<igx-select #columnSelect value="ID">
6-
<label igxLabel>Column</label>
7-
@for (column of columns; track column) {
8-
<igx-select-item [value]="column.field">
9-
{{column.field}}
10-
</igx-select-item>
11-
}
12-
</igx-select>
13-
<igx-grid-excel-style-filtering style="height: 800px;"
14-
[column]="grid1.getColumnByName(columnSelect.value)">
15-
</igx-grid-excel-style-filtering>
16-
</div>
17-
<div class="efs-grid">
18-
<igx-grid
19-
#grid1
20-
[data]="data"
21-
[allowFiltering]="false"
22-
[moving]="true"
23-
[filterMode]="'excelStyleFilter'"
24-
[allowAdvancedFiltering]="false"
25-
[rowSelection]="selectionMode"
26-
[width]="'100%'"
27-
[height]="'450px'">
28-
<igx-grid-toolbar >
29-
<igx-grid-toolbar-actions>
30-
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
31-
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
32-
<igx-grid-toolbar-exporter [exportCSV]="true" [exportExcel]="true">
33-
<span excelText>Export to Excel 👌</span>
34-
<span csvText>Export to CSV 👍</span>
35-
</igx-grid-toolbar-exporter>
36-
</igx-grid-toolbar-actions>
37-
</igx-grid-toolbar>
38-
@for (c of columns; track c) {
39-
<igx-column
40-
[field]="c.field"
41-
[header]="c.field"
42-
[groupable]="true"
43-
[resizable]="c.resizable"
44-
[width]="c.width"
45-
[sortable]="true"
46-
[filterable]="true"
47-
[editable]="true"
48-
[hidden]="c.hidden"
49-
[minWidth]="c.minWidth"
50-
[maxWidth]="c.maxWidth"
51-
[dataType]="c.type">
52-
</igx-column>
53-
}
54-
</igx-grid>
551

56-
<igx-advanced-filtering-dialog
57-
style="height: 400px;"
58-
[grid]="grid1">
59-
</igx-advanced-filtering-dialog>
60-
</div>
2+
3+
<div class="demo-esf__sample">
4+
<div class="demo-esf__sample-select">
5+
<igx-select #columnSelect value="ID">
6+
<label igxLabel>Column</label>
7+
@for (column of columns; track column) {
8+
<igx-select-item [value]="column.field">
9+
{{column.field}}
10+
</igx-select-item>
11+
}
12+
</igx-select>
6113
</div>
6214

63-
<div class="sample-buttons">
15+
<igx-grid-excel-style-filtering
16+
[column]="grid1.getColumnByName(columnSelect.value)">
17+
</igx-grid-excel-style-filtering>
18+
</div>
19+
<div class="demo-esf__grid-sample">
20+
<div class="demo-esf__grid-sample-actions">
6421
<igx-checkbox [checked]="grid1.allowFiltering" (change)="onAllowFilteringChanged($event)">Allow Filtering</igx-checkbox>
22+
<igx-checkbox [(ngModel)]="grid1.allowAdvancedFiltering">Allow Advanced Filtering</igx-checkbox>
23+
<igx-checkbox #applyChangesCheckbox [checked]="true">Apply Changes</igx-checkbox>
6524
<igx-buttongroup [values]="filterModes" (selected)="selectFilterMode($event)"></igx-buttongroup>
6625
</div>
67-
<div class="sample-buttons">
68-
<igx-checkbox [(ngModel)]="grid1.allowAdvancedFiltering">Allow Advanced Filtering</igx-checkbox>
26+
<div class="demo-esf__grid-sample-actions">
27+
6928
<button igxButton="contained" (click)="openAdvancedFiltering()">Open Advanced Filtering</button>
70-
<button igxButton="contained" (click)="closeAdvancedFiltering()">Close Advanced Filtering</button>
71-
<igx-checkbox #applyChangesCheckbox [checked]="true">Apply Changes</igx-checkbox>
72-
<button igxButton="contained" (click)="clearAdvancedFiltering()">Clear Advanced Filtering</button>
29+
<button igxButton="outlined" (click)="closeAdvancedFiltering()">Close Advanced Filtering</button>
30+
<button igxButton="outlined" (click)="clearAdvancedFiltering()">Clear Advanced Filtering</button>
7331
</div>
32+
<igx-grid
33+
#grid1
34+
[data]="data"
35+
[allowFiltering]="false"
36+
[moving]="true"
37+
[filterMode]="'excelStyleFilter'"
38+
[allowAdvancedFiltering]="false"
39+
[rowSelection]="selectionMode"
40+
[width]="'100%'"
41+
[height]="'300px'">
42+
<igx-grid-toolbar >
43+
<igx-grid-toolbar-actions>
44+
<igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
45+
<igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
46+
<igx-grid-toolbar-exporter [exportCSV]="true" [exportExcel]="true">
47+
<span excelText>Export to Excel 👌</span>
48+
<span csvText>Export to CSV 👍</span>
49+
</igx-grid-toolbar-exporter>
50+
</igx-grid-toolbar-actions>
51+
</igx-grid-toolbar>
52+
@for (c of columns; track c) {
53+
<igx-column
54+
[field]="c.field"
55+
[header]="c.field"
56+
[groupable]="true"
57+
[resizable]="c.resizable"
58+
[width]="c.width"
59+
[sortable]="true"
60+
[filterable]="true"
61+
[editable]="true"
62+
[hidden]="c.hidden"
63+
[minWidth]="c.minWidth"
64+
[maxWidth]="c.maxWidth"
65+
[dataType]="c.type">
66+
</igx-column>
67+
}
68+
</igx-grid>
69+
<igx-advanced-filtering-dialog
70+
style="height: 400px;"
71+
[grid]="grid1">
72+
</igx-advanced-filtering-dialog>
7473
</div>
75-
</div>
74+
75+

‎src/app/grid-external-filtering/grid-external-filtering.sample.scss‎

Lines changed: 30 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,31 @@
1-
2-
3-
.sample-buttons {
4-
margin-top: 24px;
5-
display: flex;
6-
flex-wrap: wrap;
7-
}
8-
9-
igx-checkbox {
10-
margin: 0 10px;
11-
}
12-
13-
[igxButton]+[igxButton] {
14-
margin-left: 8px;
15-
}
16-
17-
.efs-grid {
18-
display: flex;
19-
flex: 1 0 auto;
20-
flex-direction: column;
1+
:host {
2+
display: flex;
3+
flex-grow: 1;
4+
gap: var(--demos-gap);
5+
6+
.demo-esf__sample {
7+
padding: var(--content-spacing);
8+
border: 1px dashed var(--ig-gray-300);
9+
}
10+
11+
.demo-esf__sample-select {}
12+
13+
.demo-esf__grid-sample {
14+
display: flex;
15+
flex-direction: column;
16+
gap: var(--demos-gap);
17+
padding: var(--content-spacing);
18+
border: 1px dashed var(--ig-gray-300);
19+
flex: 1;
20+
}
21+
22+
.demo-esf__grid-sample-actions {
23+
display: flex;
24+
flex-wrap: wrap;
25+
gap: var(--demos-gap);
26+
27+
igx-buttongroup {
28+
min-width: 230px;
29+
}
30+
}
2131
}

‎src/app/grid-external-filtering/grid-external-filtering.sample.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { Component, ViewChild, OnInit, AfterViewInit, ChangeDetectorRef } from '@angular/core';
22
import { FormsModule } from '@angular/forms';
3-
import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode, IChangeCheckboxEventArgs, IgxAdvancedFilteringDialogComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxCSVTextDirective, IgxCheckboxComponent, IgxColumnComponent, IgxExcelTextDirective, IgxFlexDirective, IgxGridComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxLabelDirective, IgxLayoutDirective, IgxSelectComponent, IgxSelectItemComponent, IgxStringFilteringOperand } from 'igniteui-angular';
3+
import { FilterMode, FilteringExpressionsTree, FilteringLogic, GridSelectionMode, IChangeCheckboxEventArgs, IgxAdvancedFilteringDialogComponent, IgxButtonDirective, IgxButtonGroupComponent, IgxCSVTextDirective, IgxCheckboxComponent, IgxColumnComponent, IgxExcelTextDirective, IgxGridComponent, IgxGridExcelStyleFilteringComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxLabelDirective, IgxSelectComponent, IgxSelectItemComponent, IgxStringFilteringOperand } from 'igniteui-angular';
44

55

66
@Component({
77
providers: [],
88
selector: 'app-grid-external-filtering-sample',
99
styleUrls: ['grid-external-filtering.sample.scss'],
1010
templateUrl: 'grid-external-filtering.sample.html',
11-
imports: [IgxFlexDirective, IgxLayoutDirective, IgxButtonGroupComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxAdvancedFilteringDialogComponent, IgxCheckboxComponent, FormsModule, IgxButtonDirective]
11+
imports: [IgxButtonGroupComponent, IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent, IgxGridExcelStyleFilteringComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxAdvancedFilteringDialogComponent, IgxCheckboxComponent, FormsModule, IgxButtonDirective]
1212
})
1313
export class GridExternalFilteringComponent implements OnInit, AfterViewInit {
1414
@ViewChild('grid1', { static: true })

0 commit comments

Comments
 (0)