Skip to content

Commit e4db525

Browse files
mddragnevmddragnev
authored
Merge branch 'master' into mdragnev/fix-15538
2 parents 4efc1f3 + 1fb2e40 commit e4db525

File tree

10 files changed

+300
-245
lines changed

10 files changed

+300
-245
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,6 @@
114114
$not-material-theme: $variant != 'material';
115115

116116
$card-heading-padding: rem(16px, 16px);
117-
$card-content-padding: rem(16px);
118-
$card-actions-padding: rem(8px);
119117

120118
$card-tgroup-margin: 0 em(16px);
121119

@@ -159,7 +157,7 @@
159157
%igx-card-header {
160158
display: flex;
161159
flex-flow: row wrap;
162-
align-content: flex-start;
160+
align-items: center;
163161
width: 100%;
164162
padding: $card-heading-padding;
165163
color: var-get($theme, 'header-text-color');
@@ -168,10 +166,6 @@
168166
display: block;
169167
padding: 0;
170168
}
171-
172-
@if $variant == 'fluent' {
173-
padding: rem(16px) rem(8px);
174-
}
175169
}
176170

177171
%igx-card-header--vertical {
@@ -195,7 +189,6 @@
195189
}
196190

197191
%igx-card-header-thumbnail {
198-
align-self: flex-start;
199192
margin-inline-end: rem(16px);
200193

201194
@if $variant == 'indigo' {
@@ -235,7 +228,7 @@
235228
%igx-card-content {
236229
display: block;
237230
width: 100%;
238-
padding: $card-content-padding;
231+
padding: rem(16px);
239232
color: var-get($theme, 'content-text-color');
240233
overflow: auto;
241234
}
@@ -259,6 +252,14 @@
259252
}
260253

261254
%igx-card-actions {
255+
$card-actions-padding: map.get((
256+
'material': rem(8px) rem(16px),
257+
'fluent': rem(8px) rem(16px),
258+
'bootstrap': rem(16px),
259+
'indigo': rem(16px),
260+
), $variant);
261+
262+
262263
display: flex;
263264
flex-flow: row wrap;
264265
justify-content: space-between;
@@ -283,29 +284,26 @@
283284

284285
@if $variant == 'bootstrap' {
285286
%igx-card-content {
286-
@if $variant == 'bootstrap' {
287-
padding-block: rem(16px) rem(24px);
288-
padding-inline: rem(24px);
289-
}
290-
}
291-
292-
%igx-card-actions {
293-
padding: rem(16px);
287+
padding-block-end: rem(24px);
294288
}
295289
}
296290

297291
@if $variant == 'indigo' {
298-
%igx-card-content,
299-
%igx-card-actions {
300-
padding: rem(16px);
292+
%igx-card-content {
293+
padding-block-end: rem(8px);
294+
}
295+
296+
%igx-card-content:last-child {
297+
padding-block-end: rem(16px);
301298
}
302299

303-
%igx-card-content + %igx-card-actions {
304-
padding-block-start: rem(8px);
300+
%igx-card-header {
301+
padding-block-end: 0;
305302
}
306303

307-
%igx-card-header + %igx-card-content {
308-
padding-block-start: 0;
304+
%igx-card-header:last-child,
305+
%igx-card-header:first-child {
306+
padding-block-end: rem(16px);
309307
}
310308
}
311309

‎projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -378,19 +378,21 @@
378378
}
379379

380380
igx-avatar,
381-
igx-circular-bar,
382381
igx-icon {
383382
--component-size: var(--chip-size);
384383
}
385384

385+
igx-circular-bar {
386+
--diameter: #{sizable(rem(14px), rem(18px), rem(24px))};
387+
}
388+
386389
@if $variant == 'indigo' {
387390
igx-icon {
388391
--size: #{sizable(rem(14px), rem(14px), rem(16px))}
389392
}
390393
}
391394

392-
igx-avatar,
393-
igx-circular-bar {
395+
igx-avatar {
394396
max-height: 100%;
395397
width: sizable(rem(14px), rem(18px), rem(24px));
396398
max-width: sizable(rem(14px), rem(18px), rem(24px));

‎projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -486,18 +486,31 @@
486486
--ig-body-2-text-transform: unset;
487487

488488
padding-inline: rem(32px);
489-
489+
490490
color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
491491
border: rem(1px) dashed color($color: 'gray', $variant: if($theme-variant == 'light', 600, 300));
492492
background: transparent;
493493
}
494494
}
495-
495+
496496
%filter-tree__expression-item-keyboard-ghost {
497497
.igx-chip__item {
498498
box-shadow: var(--ghost-shadow);
499499
background: var(--ghost-background);
500+
color: var(--focus-text-color);
500501
}
502+
503+
.igx-chip:hover {
504+
.igx-chip__item {
505+
box-shadow: var(--ghost-shadow);
506+
background: var(--ghost-background);
507+
color: var(--focus-text-color);
508+
509+
@if $variant == 'indigo' {
510+
border-color: var(--border-color);
511+
}
512+
}
513+
}
501514
}
502515

503516
%filter-tree__expression-column {

‎projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -288,9 +288,7 @@
288288
}
289289

290290
igx-circular-bar {
291-
--circular-bar: #{sizable(#{map.get($circular-bar-size, 'compact')}, #{map.get($circular-bar-size, 'cosy')}, #{map.get($circular-bar-size, 'comfortable')})};
292-
width: var(--circular-bar);
293-
height: var(--circular-bar);
291+
--diameter: #{sizable(#{map.get($circular-bar-size, 'compact')}, #{map.get($circular-bar-size, 'cosy')}, #{map.get($circular-bar-size, 'comfortable')})};
294292
}
295293
}
296294

‎projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -934,4 +934,71 @@ export class QueryBuilderFunctions {
934934

935935
return [dropGhost, prevElement, nextElement, newChipContents];
936936
}
937+
938+
public static verifyGhostPositionOnMouseDrag(fix: ComponentFixture<any>, draggedChip: any, X: number, Y: number, moveDown: boolean) {
939+
const ghostPositionVisits: boolean[] = [false, false, false, false, false, false, false, false];
940+
const draggedChipCenter = QueryBuilderFunctions.getElementCenter(draggedChip.chipArea.nativeElement);
941+
const dragDir = draggedChip.dragDirective;
942+
943+
//pickup chip
944+
dragDir.onPointerDown({ pointerId: 1, pageX: draggedChipCenter.X, pageY: draggedChipCenter.Y });
945+
fix.detectChanges();
946+
947+
//trigger ghost
948+
QueryBuilderFunctions.dragMove(dragDir, draggedChipCenter.X + 10, draggedChipCenter.Y + 10);
949+
fix.detectChanges();
950+
951+
spyOn(dragDir.ghostElement, 'dispatchEvent').and.callThrough();
952+
953+
let target = moveDown ? 350 : 0;
954+
let shift = moveDown ? 1 : -1
955+
//Drag ghost up or down and check if drop ghost is rendered in the expected positions
956+
for (let i = moveDown ? 0 : 350; moveDown ? i <= target : i >= target; i += shift) {
957+
Y += moveDown ? 1 : -1;
958+
959+
QueryBuilderFunctions.dragMove(dragDir, X, Y);
960+
tick();
961+
fix.detectChanges();
962+
963+
const [dropGhost, prevElement, nextElement] = QueryBuilderFunctions.getDropGhostAndItsSiblings(fix);
964+
965+
if (i < 40 && !ghostPositionVisits[0]) {
966+
if (i <= 42) tick(50);
967+
if (!dropGhost) ghostPositionVisits[0] = true;
968+
}
969+
970+
if (i > 35 && i < 122 && !ghostPositionVisits[1]) {
971+
if (dropGhost && !prevElement && nextElement == 'OrderName Equals foo') ghostPositionVisits[1] = true;
972+
}
973+
974+
if (i > 120 && i < 165 && !ghostPositionVisits[2]) {
975+
if (dropGhost && prevElement == 'OrderName Equals foo' && nextElement === 'or OrderName Ends With a OrderDate Today') ghostPositionVisits[2] = true;
976+
}
977+
978+
if (i > 166 && i < 201 && !ghostPositionVisits[3]) {
979+
if (dropGhost && !prevElement && nextElement == 'OrderName Ends With a') ghostPositionVisits[3] = true;
980+
}
981+
982+
if (i > 202 && i < 241 && !ghostPositionVisits[4]) {
983+
if (dropGhost && prevElement == 'OrderName Ends With a' && nextElement === 'OrderDate Today') ghostPositionVisits[4] = true;
984+
}
985+
986+
if (i > 240 && i < 273 && !ghostPositionVisits[5]) {
987+
if (dropGhost && prevElement == 'OrderDate Today' && !nextElement) ghostPositionVisits[5] = true;
988+
}
989+
990+
if (i > 256 && i < 316 && !ghostPositionVisits[6]) {
991+
if (X > 400 || (dropGhost && prevElement == 'or OrderName Ends With a OrderDate Today' && !nextElement)) ghostPositionVisits[6] = true;
992+
}
993+
994+
if (i > 320 && !ghostPositionVisits[7]) {
995+
if (i >= 340) tick(50);
996+
if (!dropGhost) ghostPositionVisits[7] = true;
997+
}
998+
}
999+
1000+
//When dragged to the end, check results
1001+
expect(ghostPositionVisits).not.toContain(false,
1002+
`Ghost was not rendered on position(s) ${ghostPositionVisits.reduce((arr, e, ix) => ((e == false) && arr.push(ix), arr), []).toString()}`);
1003+
}
9371004
}

‎projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts‎

Lines changed: 19 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -172,17 +172,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
172172
@Input()
173173
public set fields(fields: FieldType[]) {
174174
this._fields = fields;
175-
175+
176+
this._fields = this._fields?.map(f => ({...f, filters: this.getFilters(f), pipeArgs: this.getPipeArgs(f) }));
177+
176178
if (!this._fields && this.isAdvancedFiltering()) {
177179
this._fields = this.entities[0].fields;
178180
}
179-
180-
if (this._fields) {
181-
this._fields.forEach(field => {
182-
this.setFilters(field);
183-
this.setFormat(field);
184-
});
185-
}
186181
}
187182

188183
/**
@@ -1182,7 +1177,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
11821177
if (!this.selectedField) {
11831178
this.fieldSelect.input.nativeElement.focus();
11841179
} else if (this.selectedField.filters.condition(this.selectedCondition)?.isUnary) {
1185-
this.conditionSelect.input.nativeElement.focus();
1180+
this.conditionSelect?.input.nativeElement.focus();
11861181
} else {
11871182
const input = this.searchValueInput?.nativeElement || this.picker?.getEditElement();
11881183
input?.focus();
@@ -1485,16 +1480,19 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
14851480
return ctx;
14861481
}
14871482

1488-
private setFormat(field: FieldType) {
1489-
if (!field.pipeArgs) {
1490-
field.pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
1483+
private getPipeArgs(field: FieldType) {
1484+
let pipeArgs = {...field.pipeArgs};
1485+
if (!pipeArgs) {
1486+
pipeArgs = { digitsInfo: DEFAULT_PIPE_DIGITS_INFO };
14911487
}
14921488

1493-
if (!field.pipeArgs.format) {
1494-
field.pipeArgs.format = field.dataType === DataType.Time ?
1489+
if (!pipeArgs.format) {
1490+
pipeArgs.format = field.dataType === DataType.Time ?
14951491
DEFAULT_PIPE_TIME_FORMAT : field.dataType === DataType.DateTime ?
14961492
DEFAULT_PIPE_DATE_TIME_FORMAT : DEFAULT_PIPE_DATE_FORMAT;
14971493
}
1494+
1495+
return pipeArgs;
14981496
}
14991497

15001498
private selectDefaultCondition() {
@@ -1503,30 +1501,24 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
15031501
}
15041502
}
15051503

1506-
private setFilters(field: FieldType) {
1504+
private getFilters(field: FieldType) {
15071505
if (!field.filters) {
15081506
switch (field.dataType) {
15091507
case DataType.Boolean:
1510-
field.filters = IgxBooleanFilteringOperand.instance();
1511-
break;
1508+
return IgxBooleanFilteringOperand.instance();
15121509
case DataType.Number:
15131510
case DataType.Currency:
15141511
case DataType.Percent:
1515-
field.filters = IgxNumberFilteringOperand.instance();
1516-
break;
1512+
return IgxNumberFilteringOperand.instance();
15171513
case DataType.Date:
1518-
field.filters = IgxDateFilteringOperand.instance();
1519-
break;
1514+
return IgxDateFilteringOperand.instance();
15201515
case DataType.Time:
1521-
field.filters = IgxTimeFilteringOperand.instance();
1522-
break;
1516+
return IgxTimeFilteringOperand.instance();
15231517
case DataType.DateTime:
1524-
field.filters = IgxDateTimeFilteringOperand.instance();
1525-
break;
1518+
return IgxDateTimeFilteringOperand.instance();
15261519
case DataType.String:
15271520
default:
1528-
field.filters = IgxStringFilteringOperand.instance();
1529-
break;
1521+
return IgxStringFilteringOperand.instance();
15301522
}
15311523
}
15321524
}

0 commit comments

Comments
 (0)