Skip to content

Commit 4c49844

Browse files
SAndreevaSAndreeva
authored
Merge branch '7.3.x' into SAndreeva/pickers-custom-buttons
2 parents d0e44a0 + 52eef14 commit 4c49844

File tree

9 files changed

+265
-20
lines changed

9 files changed

+265
-20
lines changed

‎CHANGELOG.md

+7
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
All notable changes for each version of this project will be documented in this file.
44
## 7.3.1
5+
6+
- `igx-core()` now includes some styles for printing layout.
7+
In order to turn them off, you need to pass an argument and set it to `false`
8+
```
9+
@include igx-core($print-layout: false);
10+
```
11+
512
- `Pager`
613
- **Behavioral Change** - The pager is now hidden when there are no records in the grid.
714

‎projects/igniteui-angular/src/lib/combo/combo.component.ts

+1
Original file line numberDiff line numberDiff line change
@@ -1307,6 +1307,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
13071307
* @hidden @internal
13081308
*/
13091309
public ngOnDestroy() {
1310+
this.destroy$.next();
13101311
this.destroy$.complete();
13111312
this.comboAPI.clear();
13121313
this.selection.clear(this.id);

‎projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss

+3
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,9 @@
128128

129129
%igx-grid-summary--pinned-last {
130130
border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
131+
@media print {
132+
border-right: map-get($cell-pin, 'style') #999;
133+
}
131134
}
132135

133136
%igx-grid-summary__item {

‎projects/igniteui-angular/src/lib/core/styles/print/_grid-print.scss

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
$border-color: #ddd;
2+
$border-pin-color: #999;
3+
$print-background: #f9f9f9;
4+
$print-background: #eee;
5+
6+
@mixin igx-grid-print {
7+
%grid-display {
8+
%form-group-display,
9+
%cbx-display,
10+
%radio-display,
11+
%igx-grid__grouparea,
12+
%tooltip-display,
13+
%aside,
14+
%overlay-display,
15+
%igx-ripple-display,
16+
%igx-slider-display,
17+
%igx-snackbar-display,
18+
%switch-display,
19+
%time-picker-display,
20+
%igx-toast-display,
21+
%igx-tabs,
22+
%igx-navbar-display,
23+
%igx-button--flat,
24+
%igx-button--raised,
25+
%igx-button--fab,
26+
%igx-button--icon,
27+
%igx-button--disabled,
28+
%grid-tbody-scrollbar,
29+
%vhelper-display,
30+
%igx-grid-paginator,
31+
%igx-grid-toolbar__actions,
32+
%grid__cbx-selection,
33+
%igx-drop-area__icon,
34+
%igx-drop-area__text,
35+
%igx-grid__header-indentation,
36+
%igx-grid__grouping-indicator,
37+
%igx-grid__row-indentation,
38+
%igx-grid__hierarchical-expander {
39+
display: none !important;
40+
}
41+
42+
%igx-grid__grouparea,
43+
%igx-grid-paginator,
44+
%igx-grid-toolbar__actions,
45+
%igx-drop-area__icon,
46+
%igx-drop-area__text,
47+
%igx-grid__header-indentation,
48+
%igx-grid__grouping-indicator,
49+
%igx-grid__row-indentation,
50+
%igx-grid__hierarchical-expander,
51+
%igx-expansion-panel__header-icon--end,
52+
%igx-expansion-panel__header-icon--start,
53+
%grid-summaries-patch {
54+
display: none !important;
55+
}
56+
57+
58+
%igx-grid__grouping-indicator {
59+
igx-icon {
60+
display: none !important;
61+
}
62+
}
63+
64+
%igx-grid__filtering-cell {
65+
height: 0 !important;
66+
border-top: none !important;
67+
border-right: none !important;
68+
}
69+
70+
%grid-tfoot,
71+
%igx-grid__grouparea,
72+
%igx-grid__filtering-cell,
73+
%igx-grid__group-row,
74+
%grid-cell-header,
75+
%igx-grid-toolbar,
76+
%grid-thead-title,
77+
%grid-row,
78+
%grid-thead {
79+
border-color: $border-color !important;
80+
}
81+
82+
%grid-display {
83+
igx-icon {
84+
color: #666 !important;
85+
}
86+
}
87+
88+
%grid-thead,
89+
%igx-grid-toolbar,
90+
%igx-grid__group-row,
91+
%grid-tfoot {
92+
background: $print-background !important;
93+
}
94+
95+
%grid-cell-header-title,
96+
%grid-cell-text {
97+
white-space: unset !important;
98+
text-overflow: initial !important;
99+
overflow: visible !important;
100+
}
101+
102+
%grid-cell-display {
103+
igx-icon {
104+
display: none;
105+
}
106+
}
107+
108+
%grid-summaries-patch {
109+
display: none;
110+
}
111+
112+
%grid-cell--pinned-last {
113+
border-right: 2px solid red !important;
114+
}
115+
}
116+
}

‎projects/igniteui-angular/src/lib/core/styles/print/_index.scss

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
@import 'grid-print';
2+
3+
@mixin igx-print-layout {
4+
@media print {
5+
html,
6+
body,
7+
app-root {
8+
min-height: 100vh;
9+
min-width: 100vw;
10+
margin: 0;
11+
display: block;
12+
}
13+
14+
* {
15+
background: transparent !important;
16+
background-color: transparent !important;
17+
color: #000 !important;
18+
box-shadow: none !important;
19+
text-shadow: none !important;
20+
-webkit-print-color-adjust: exact;
21+
}
22+
23+
a[href^='http']::after {
24+
content: '[' attr(href) ']';
25+
color: blue;
26+
}
27+
28+
.igx-no-print,
29+
igx-nav-drawer {
30+
display: none !important;
31+
}
32+
33+
@include igx-grid-print();
34+
35+
%igx-bottom-nav-menu,
36+
%igx-group-display,
37+
%igx-ripple-display,
38+
%igx-slider-display,
39+
%igx-snackbar-display,
40+
%form-group-display,
41+
%cbx-display,
42+
%radio-display,
43+
%tooltip-display,
44+
%igx-toast-display,
45+
%igx-navbar-display,
46+
%vhelper-display,
47+
%igx-button--flat,
48+
%igx-button--raised,
49+
%igx-button--fab,
50+
%igx-button--icon,
51+
%igx-button--disabled,
52+
%igx-tabs__header,
53+
%switch-display,
54+
%grid-tbody-scrollbar,
55+
%grid__cbx-selection,
56+
%circular-display,
57+
%linear-display,
58+
.igx-carousel__indicators,
59+
.igx-carousel__arrow--prev,
60+
.igx-carousel__arrow--next {
61+
display: none !important;
62+
}
63+
}
64+
}

‎projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

+6-1
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
@import '../components/toast/toast-component';
5757
@import '../components/tooltip/tooltip-component';
5858
@import '../components/time-picker/time-picker-component';
59+
@import '../print/index';
5960

6061
/// Includes the base for each theme.
6162

@@ -68,6 +69,10 @@
6869
}
6970
}
7071

71-
@mixin igx-core() {
72+
@mixin igx-core($print-layout:true) {
7273
@include igx-typography();
74+
75+
@if $print-layout == true {
76+
@include igx-print-layout();
77+
}
7378
}

‎projects/igniteui-angular/src/lib/grids/grid-header.component.ts

+5-19
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
2222
import { IgxColumnResizingService } from './grid-column-resizing.service';
2323
import { IgxOverlayService } from '../services/overlay/overlay';
2424
import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
25-
import { OverlaySettings, PositionSettings, VerticalAlignment, HorizontalAlignment } from '../services/overlay/utilities';
26-
import { ConnectedPositioningStrategy } from '../services/overlay/position/connected-positioning-strategy';
25+
import { OverlaySettings, PositionSettings, VerticalAlignment } from '../services/overlay/utilities';
26+
import { AutoPositionStrategy } from '../services/overlay/position/auto-position-strategy';
2727
import { useAnimation } from '@angular/animations';
2828
import { filter, takeUntil } from 'rxjs/operators';
2929
import { Subject } from 'rxjs';
@@ -203,23 +203,9 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
203203
private toggleFilterDropdown() {
204204
if (!this._componentOverlayId) {
205205
const headerTarget = this.elementRef.nativeElement;
206+
const filterIconTarget = headerTarget.querySelector('.' + this.filterIconClassName);
206207

207-
const gridRect = this.grid.nativeElement.getBoundingClientRect();
208-
const headerRect = headerTarget.getBoundingClientRect();
209-
210-
let x = headerRect.left;
211-
let x1 = gridRect.left + gridRect.width;
212-
x += window.pageXOffset;
213-
x1 += window.pageXOffset;
214-
if (Math.abs(x - x1) < 300) {
215-
this._filterMenuOverlaySettings.positionStrategy.settings.horizontalDirection = HorizontalAlignment.Left;
216-
this._filterMenuOverlaySettings.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Right;
217-
} else {
218-
this._filterMenuOverlaySettings.positionStrategy.settings.horizontalDirection = HorizontalAlignment.Right;
219-
this._filterMenuOverlaySettings.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Left;
220-
}
221-
222-
this._filterMenuOverlaySettings.positionStrategy.settings.target = headerTarget;
208+
this._filterMenuOverlaySettings.positionStrategy.settings.target = filterIconTarget;
223209
this._filterMenuOverlaySettings.outlet = this.grid.outlet;
224210

225211
this._componentOverlayId =
@@ -246,7 +232,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
246232
this._filterMenuOverlaySettings = {
247233
closeOnOutsideClick: true,
248234
modal: false,
249-
positionStrategy: new ConnectedPositioningStrategy(this._filterMenuPositionSettings),
235+
positionStrategy: new AutoPositionStrategy(this._filterMenuPositionSettings),
250236
scrollStrategy: new AbsoluteScrollStrategy()
251237
};
252238

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

+27
Original file line numberDiff line numberDiff line change
@@ -3929,6 +3929,33 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
39293929
[ 'Select All', '20', '254' ],
39303930
[ true, true, true ]);
39313931
}));
3932+
3933+
it('Should display the ESF based on the filterIcon within the grid', async() => {
3934+
// Test prerequisites
3935+
grid.width = '800px';
3936+
fix.detectChanges();
3937+
for (const column of grid.columns) {
3938+
column.width = '300px';
3939+
}
3940+
grid.cdr.detectChanges();
3941+
await wait(16);
3942+
3943+
// Scroll a bit to the right, so the ProductName column is not fully visible.
3944+
grid.parentVirtDir.getHorizontalScroll().scrollLeft = 500;
3945+
await wait(100);
3946+
fix.detectChanges();
3947+
GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
3948+
fix.detectChanges();
3949+
3950+
// Verify that the left, top and right borders of the ESF are within the grid.
3951+
const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
3952+
const gridRect = gridNativeElement.getBoundingClientRect();
3953+
const excelMenu = gridNativeElement.querySelector('.igx-excel-filter__menu');
3954+
const excelMenuRect = excelMenu.getBoundingClientRect();
3955+
expect(excelMenuRect.left >= gridRect.left).toBe(true, 'ESF spans outside the grid on the left');
3956+
expect(excelMenuRect.top >= gridRect.top).toBe(true, 'ESF spans outside the grid on the top');
3957+
expect(excelMenuRect.right <= gridRect.right).toBe(true, 'ESF spans outside the grid on the right');
3958+
});
39323959
});
39333960

39343961
const expectedResults = [];

‎src/styles/igniteui-theme.scss

+36
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,39 @@
3838
fill: rgba(white, .38);
3939
}
4040
}
41+
42+
@media print {
43+
html,
44+
body,
45+
app-root {
46+
min-height: 100vh;
47+
min-width: 100vw;
48+
margin: 0;
49+
display: block;
50+
background: transparent !important;
51+
}
52+
53+
.sample-content,
54+
.sample-column,
55+
.wrapper {
56+
margin: 0;
57+
padding: 0;
58+
}
59+
60+
.sample-header,
61+
.sample-description,
62+
.sample-title,
63+
.no-print,
64+
.igx-nav-drawer,
65+
.form-title {
66+
display: none !important;
67+
}
68+
69+
::-webkit-scrollbar {
70+
background-color: #fff !important;
71+
}
72+
73+
::-webkit-scrollbar-thumb {
74+
background-color: #fff !important;
75+
}
76+
}

0 commit comments

Comments
 (0)