Skip to content

Commit a1f2455

Browse files
PlamenaMitevaPlamenaMiteva
committed
Merge branch 'PMiteva/fix-row-drag-tests' of https://github.com/IgniteUI/igniteui-angular into PMiteva/fix-row-drag-tests
2 parents c615b88 + 8969f5a commit a1f2455

19 files changed

+748
-536
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ All notable changes for each version of this project will be documented in this
44

55
## 9.1.0
66

7+
### Themes
8+
- **Breaking Change** Change the default `$legacy-support` value to false in the `igx-theme` function.
9+
710
### New Features
811

912
- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@
350350
/// // otherwise, it will return the value for key 'icon-color' in the '$avatar-theme';
351351
/// @returns {String} - The value of the key in the passed map, or the name of key concatenated with the key name.
352352
@function --var($map, $key, $fallback: null) {
353-
$igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, true);
353+
$igx-legacy-support: if(global-variable-exists('igx-legacy-support'), $igx-legacy-support, false);
354354

355355
@if map-has-key($map, $key) {
356356
@if $igx-legacy-support == false {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -16,31 +16,18 @@
1616

1717
%grid-excel-filter {
1818
display: block;
19-
}
20-
21-
%grid-excel-filter--inline {
2219
width: 100%;
20+
height: 100%;
2321
flex-grow: 1;
22+
box-shadow: igx-elevation($elevations, 12);
2423
overflow: auto;
24+
}
25+
26+
%grid-excel-filter--inline {
27+
box-shadow: none;
2528

2629
%grid-excel-menu {
27-
display: flex;
28-
flex-direction: column;
2930
width: 100%;
30-
height: 100%;
31-
box-shadow: none;
32-
33-
%grid-excel-main {
34-
display: flex;
35-
flex-direction: column;
36-
flex-grow: 1;
37-
overflow: hidden;
38-
}
39-
40-
%grid-excel-main igx-list {
41-
flex-grow: 1;
42-
overflow: hidden;
43-
}
4431
}
4532
}
4633

@@ -67,10 +54,12 @@
6754
}
6855

6956
%grid-excel-menu {
57+
display: flex;
58+
flex-direction: column;
59+
height: 100%;
7060
width: 320px;
7161
min-width: 320px;
7262
background: --var($theme, 'filtering-row-background');
73-
box-shadow: igx-elevation($elevations, 12);
7463
border-radius: 4px;
7564

7665
@include igx-button-group(igx-button-group-theme(
@@ -227,10 +216,15 @@
227216
}
228217

229218
%grid-excel-main {
230-
display: block;
219+
display: flex;
220+
flex-direction: column;
221+
flex-grow: 1;
222+
overflow: hidden;
231223
padding: 0 rem(16px);
232224

233225
igx-list {
226+
flex-grow: 1;
227+
overflow: hidden;
234228
margin: rem(8px) -#{rem(16px)} 0;
235229
border: 0;
236230
border-top: 1px dashed igx-color($palette, 'grays', 300);

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

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
/// @param {Map} $palette - An igx-palette to be used by the global theme.
5252
/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.
5353
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
54-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
54+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
5555
/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.
5656
/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.
5757
/// @requires {variable} $components
@@ -91,7 +91,7 @@
9191
$palette,
9292
$schema: $light-schema,
9393
$exclude: (),
94-
$legacy-support: true,
94+
$legacy-support: false,
9595
$roundness: null,
9696
$elevation: true,
9797
) {
@@ -412,11 +412,11 @@
412412
/// Creates a global theme that can be used with light backgrounds.
413413
/// @param {Map} $palette - An igx-palette to be used by the global theme.
414414
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
415-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
415+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
416416
@mixin igx-light-theme(
417417
$palette,
418418
$exclude: (),
419-
$legacy-support: true,
419+
$legacy-support: false,
420420
$roundness: null,
421421
$elevation: true,
422422
) {
@@ -447,11 +447,11 @@
447447
/// Creates a global theme that can be used with dark backgrounds.
448448
/// @param {Map} $palette - An igx-palette to be used by the global theme.
449449
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
450-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
450+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
451451
@mixin igx-dark-theme(
452452
$palette,
453453
$exclude: (),
454-
$legacy-support: true,
454+
$legacy-support: false,
455455
$roundness: null,
456456
$elevation: true,
457457
) {
@@ -482,11 +482,11 @@
482482
/// Creates a global fluent theme that can be used with light backgrounds.
483483
/// @param {Map} $palette - An igx-palette to be used by the global theme.
484484
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
485-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
485+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
486486
@mixin igx-fluent-theme(
487487
$palette,
488488
$exclude: (),
489-
$legacy-support: true,
489+
$legacy-support: false,
490490
$roundness: null,
491491
$elevation: true,
492492
) {
@@ -517,11 +517,11 @@
517517
/// Creates a global fluent theme that can be used with dark backgrounds.
518518
/// @param {Map} $palette - An igx-palette to be used by the global theme.
519519
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
520-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
520+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
521521
@mixin igx-fluent-dark-theme(
522522
$palette,
523523
$exclude: (),
524-
$legacy-support: true,
524+
$legacy-support: false,
525525
$roundness: null,
526526
$elevation: true,
527527
) {
@@ -553,11 +553,11 @@
553553
/// Creates a global bootstrap-like theme that can be used with light backgrounds.
554554
/// @param {Map} $palette - An igx-palette to be used by the global theme.
555555
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
556-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
556+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
557557
@mixin igx-bootstrap-theme(
558558
$palette,
559559
$exclude: (),
560-
$legacy-support: true,
560+
$legacy-support: false,
561561
$roundness: null,
562562
$elevation: true,
563563
) {
@@ -615,11 +615,11 @@
615615
/// Creates a global bootstrap-like theme that can be used with dark backgrounds.
616616
/// @param {Map} $palette - An igx-palette to be used by the global theme.
617617
/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
618-
/// @param {Boolean} $legacy-support - Turn off support for IE11, allowing you to use css variables to style components.
618+
/// @param {Boolean} $legacy-support [false] - If set to true, it turns on support for IE11, i.e. css variables are not used in the generated component themes.
619619
@mixin igx-bootstrap-dark-theme(
620620
$palette,
621621
$exclude: (),
622-
$legacy-support: true,
622+
$legacy-support: false,
623623
$roundness: null,
624624
$elevation: true,
625625
) {
@@ -667,4 +667,3 @@
667667
$elevation: $elevation,
668668
);
669669
}
670-

‎projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_toast.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,5 +23,11 @@ $_dark-fluent-toast: extend($_fluent-toast);
2323
/// @type {Map}
2424
/// @requires {function} extend
2525
/// @requires $_bootstrap-toast
26-
$_dark-bootstrap-toast: extend($_bootstrap-toast);
26+
$_dark-bootstrap-toast: extend(
27+
$_bootstrap-toast, (
28+
text-color: (
29+
igx-contrast-color: ('grays', 600)
30+
)
31+
)
32+
);
2733

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-position-strategy.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { AutoPositionStrategy } from '../../../services/overlay/position/auto-position-strategy';
2+
import { ConnectedFit } from '../../../services/overlay/utilities';
3+
4+
/** @hidden */
5+
export class ExcelStylePositionStrategy extends AutoPositionStrategy {
6+
protected shouldFitInViewPort(connectedFit: ConnectedFit) {
7+
return true;
8+
}
9+
10+
protected fitInViewport(element: HTMLElement, connectedFit: ConnectedFit) {
11+
const heightOverflow = connectedFit.contentElementRect.height - connectedFit.viewPortRect.height;
12+
if (heightOverflow > 0) {
13+
element.style.width = 'auto';
14+
element.style.height = `${connectedFit.viewPortRect.height}px`;
15+
} else {
16+
element.style.height = `${Math.max(
17+
connectedFit.viewPortRect.height - connectedFit.targetRect.bottom - 1,
18+
connectedFit.contentElementRect.height)}px`;
19+
}
20+
21+
super.fitInViewport(element, connectedFit);
22+
}
23+
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</igx-icon>
2020
</igx-input-group>
2121

22-
<igx-list #list [displayDensity]="displayDensity" [style.height.px]="listSize" [isLoading]="isLoading">
22+
<igx-list #list [displayDensity]="displayDensity" [isLoading]="isLoading">
2323
<div [style.overflow]="'hidden'" [style.position]="'relative'">
2424
<igx-list-item
2525
*igxFor="let item of data | excelStyleSearchFilter: searchValue; scrollOrientation : 'vertical'; containerSize: containerSize; itemSize: itemSize">

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ import { IgxForOfDirective } from '../../../directives/for-of/for_of.directive';
1616
import { FilterListItem } from './grid.excel-style-filtering.component';
1717
import { IgxListComponent } from '../../../list';
1818

19-
const SEARCH_LIST_HEIGHT = 250;
20-
2119
@Directive({
2220
selector: '[igxExcelStyleLoading]'
2321
})
@@ -134,11 +132,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit {
134132
return itemSize;
135133
}
136134

137-
public get listSize() {
138-
return this.inline ? null : SEARCH_LIST_HEIGHT;
139-
}
140-
141135
public get containerSize() {
142-
return this.inline ? this.list.element.nativeElement.offsetHeight : SEARCH_LIST_HEIGHT;
136+
return this.list.element.nativeElement.offsetHeight;
143137
}
144138
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@
5252
'igx-excel-filter__menu--compact': grid.displayDensity === 'compact'
5353
}"
5454
[id]="overlayComponentId"
55-
(keydown)="onKeyDown($event)">
55+
(keydown)="onKeyDown($event)"
56+
[style.min-height]="minHeight"
57+
[style.max-height]="maxHeight">
5658

5759
<header class="igx-excel-filter__menu-header">
5860
<h4>{{ column.header || column.field }}</h4>
@@ -136,7 +138,7 @@ <h4>{{ column.header || column.field }}</h4>
136138
</footer>
137139
</article>
138140

139-
<igx-drop-down
141+
<igx-drop-down
140142
*ngIf="column"
141143
#subMenu
142144
[maxHeight]="'397px'"

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { takeUntil } from 'rxjs/operators';
3939
import { ISelectionEventArgs, IgxDropDownComponent } from '../../../drop-down';
4040
import { IgxColumnComponent } from '../../columns/column.component';
4141
import { IgxGridBaseDirective } from '../../grid-base.directive';
42+
import { DisplayDensity } from '../../../core/density';
4243

4344
/**
4445
*@hidden
@@ -202,6 +203,36 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy {
202203
scrollStrategy: new AbsoluteScrollStrategy()
203204
};
204205

206+
/**
207+
* @hidden @internal
208+
*/
209+
get minHeight() {
210+
if (!this.inline) {
211+
let minHeight = 600;
212+
switch (this.grid.displayDensity) {
213+
case DisplayDensity.cosy: minHeight = 465; break;
214+
case DisplayDensity.compact: minHeight = 330; break;
215+
default: break;
216+
}
217+
return `${minHeight}px`;
218+
}
219+
}
220+
221+
/**
222+
* @hidden @internal
223+
*/
224+
@HostBinding('style.max-height') get maxHeight() {
225+
if (!this.inline) {
226+
let maxHeight = 730;
227+
switch (this.grid.displayDensity) {
228+
case DisplayDensity.cosy: maxHeight = 565; break;
229+
case DisplayDensity.compact: maxHeight = 405; break;
230+
default: break;
231+
}
232+
return `${maxHeight}px`;
233+
}
234+
}
235+
205236
/**
206237
* @hidden @internal
207238
*/

0 commit comments

Comments
 (0)