chore(*): Add a chip drop indicator between the chips for rows.

MKirova · MKirova · commit aefc3e98da35 · 2021-12-16T15:30:29.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -561,6 +561,10 @@
             @extend %igx-grid__tr-pivot--filter-container !optional
         }
 
+        @include e(tr-pivot, $m: 'chip_drop_indicator') {
+            @extend %igx-grid__tr-pivot--chip_drop_indicator !optional
+        }
+
         @include e(tr-pivot, $m: 'drop-row-area') {
             @extend %igx-grid__tr-pivot--drop-row-area !optional
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -2910,7 +2910,7 @@
             width: auto;
 
             > * {
-                margin-#{$right}: rem(8px);
+                margin-#{$right}: rem(4px);
             }
 
             &:last-child {
@@ -2941,6 +2941,11 @@
         flex-direction: column;
     }
 
+    %igx-grid__tr-pivot--chip_drop_indicator {
+        width: 2px;
+        background: var-get($theme, 'resize-line-color');
+    }
+
     %igx-grid__tr-pivot--drop-row-area {
         flex-grow: 1;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -26,7 +26,7 @@
                 </igx-chips-area>
             </div>
             <div class='igx-grid__tr-pivot--drop-row-area' (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
-            (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop (dropped)="onDimDrop($event, rowArea, 0)">
+                (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop (dropped)="onDimDrop($event, rowArea, 0)">
             </div>
         </div>
 
@@ -97,21 +97,27 @@
             <!-- Row area -->
             <igx-chips-area #rowArea droppable='true'>
                 <ng-container *ngIf="grid.showPivotConfigurationUI">
-                    <span igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
+                    <span igxDrop (dropped)="onDimDrop($event, rowArea, 0)" 
                         *ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI"
                         class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
-                    <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
-                        [displayDensity]="grid.displayDensity" [removable]="true" (remove)="rowRemoved($event)"
-                        (dragLeave)="onDimDragLeave($event)" (dragDrop)="onDimDrop($event, rowArea, 0)"
-                        (dragOver)="onDimDragOver($event, 0)" (moveStart)='onDimDragStart($event, rowArea)'
-                        (moveEnd)='onDimDragEnd()' (click)="onChipSort($event, row, 0)">
-                        <igx-icon igxPrefix>table_rows</igx-icon>
-                        <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
-                            (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
-                        {{ row.memberName}}
-                        <igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'
-                                : 'arrow_downward' }}</igx-icon>
-                    </igx-chip>
+                    <ng-container *ngFor="let row of grid.rowDimensions; let last = last;">
+                        <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator" [style.height.px]='getAreaHeight(rowArea)'></span>
+                        <igx-chip [draggable]="true" [id]="row.memberName" [displayDensity]="grid.displayDensity"
+                            [removable]="true" (remove)="rowRemoved($event)" (dragLeave)="onDimDragLeave($event)"
+                            (dragDrop)="onDimDrop($event, rowArea, 0)" (dragOver)="onDimDragOver($event, 0)"
+                            (moveStart)='onDimDragStart($event, rowArea)' (moveEnd)='onDimDragEnd()'
+                            (click)="onChipSort($event, row, 0)">
+                            <igx-icon igxPrefix>table_rows</igx-icon>
+                            <igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)'
+                                (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
+                            {{ row.memberName}}
+                            <igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward'
+                                    : 'arrow_downward' }}</igx-icon>
+                        </igx-chip>
+                        <ng-container *ngIf='last'>
+                            <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator" [style.height.px]='getAreaHeight(rowArea)'></span>
+                        </ng-container>
+                    </ng-container>
                     <igx-chip igxDrop (dragDrop)="onDimDrop($event, rowArea, 0)" #notifyChip [hidden]='true'>
                         Drop here to use as row
                     </igx-chip>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts
@@ -10,6 +10,7 @@ import {
 } from '@angular/core';
 import { first } from 'rxjs/operators';
 import { IBaseChipEventArgs, IgxChipComponent } from '../../chips/chip.component';
+import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
 import { GridColumnDataType } from '../../data-operations/data-util';
 import { SortingDirection } from '../../data-operations/sorting-strategy';
 import { ISelectionEventArgs } from '../../drop-down/drop-down.common';
@@ -39,8 +40,6 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
 
     public value: IPivotValue;
     private _dropPos = DropPosition.AfterDropTarget;
-    private _dropLeftIndicatorClass = 'igx-pivot-grid__drop-indicator--left';
-    private _dropRightIndicatorClass = 'igx-pivot-grid__drop-indicator--right';
     private valueData: Map<string, IPivotAggregator[]>;
     private _subMenuPositionSettings: PositionSettings = {
         verticalStartPoint: VerticalAlignment.Bottom,
@@ -86,6 +85,11 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         }
     }
 
+    public getAreaHeight(area: IgxChipsAreaComponent) {
+        const chips =  area.chipsList;
+        return chips && chips.length > 0 ? chips.first.nativeElement.clientHeight : 0;
+    }
+
     public getAggregateList(val: IPivotValue): IPivotAggregator[] {
         if (!val.aggregateList) {
             let defaultAggr = this.getAggregatorsForValue(val);
@@ -216,23 +220,17 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
 
         this._dropPos = event.originalEvent.offsetX > pos ? DropPosition.AfterDropTarget : DropPosition.BeforeDropTarget;
         if (this._dropPos === DropPosition.AfterDropTarget) {
-            event.owner.nativeElement.style.borderRight = '1px solid red';
-            event.owner.nativeElement.style.borderLeft = '';
-            this.renderer.removeClass(event.owner.nativeElement, this._dropLeftIndicatorClass);
-            this.renderer.addClass(event.owner.nativeElement, this._dropRightIndicatorClass);
+            event.owner.nativeElement.previousElementSibling.style.visibility = 'hidden';
+            event.owner.nativeElement.nextElementSibling.style.visibility = '';
         } else {
-            event.owner.nativeElement.style.borderRight = '';
-            event.owner.nativeElement.style.borderLeft = '1px solid red';
-            this.renderer.addClass(event.owner.nativeElement, this._dropLeftIndicatorClass);
-            this.renderer.removeClass(event.owner.nativeElement, this._dropRightIndicatorClass);
+            event.owner.nativeElement.nextElementSibling.style.visibility = 'hidden';
+            event.owner.nativeElement.previousElementSibling.style.visibility = '';
         }
     }
 
     public onDimDragLeave(event) {
-        this.renderer.removeClass(event.owner.nativeElement, this._dropLeftIndicatorClass);
-        this.renderer.removeClass(event.owner.nativeElement, this._dropRightIndicatorClass);
-        event.owner.nativeElement.style.borderLeft = '';
-        event.owner.nativeElement.style.borderRight = '';
+        event.owner.nativeElement.previousElementSibling.style.visibility = 'hidden';
+        event.owner.nativeElement.nextElementSibling.style.visibility = 'hidden';
         this._dropPos = DropPosition.AfterDropTarget;
     }
 
@@ -250,16 +248,14 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
             const targetElem = event.detail.originalEvent.target;
             const targetOwner = event.detail.owner.element.nativeElement.parentElement;
             if (targetOwner !== lastElem && targetElem.getBoundingClientRect().x >= lastElem.getBoundingClientRect().x) {
-                this.renderer.addClass(area.chipsList.last.nativeElement, this._dropRightIndicatorClass);
-                // TODO- remove once classes are added.
-                area.chipsList.last.nativeElement.style.borderRight = '1px solid red';
+                area.chipsList.last.nativeElement.nextElementSibling.style.visibility = '';
             }
         }
     }
     public onAreaDragLeave(event, area) {
         area.chipsList.toArray().forEach(element => {
-            this.renderer.removeClass(element.nativeElement, this._dropRightIndicatorClass);
-            element.nativeElement.style.borderRight = '';
+            event.owner.nativeElement.previousElementSibling.style.visibility = 'hidden';
+            event.owner.nativeElement.nextElementSibling.style.visibility = 'hidden';
         });
     }
 

Original file line number	Diff line number	Diff line change
`@@ -561,6 +561,10 @@`
`561`	`561`	`@extend %igx-grid__tr-pivot--filter-container !optional`
`562`	`562`	`}`
`563`	`563`
	`564`	`+ @include e(tr-pivot, $m: 'chip_drop_indicator') {`
	`565`	`+ @extend %igx-grid__tr-pivot--chip_drop_indicator !optional`
	`566`	`+ }`
	`567`	`+`
`564`	`568`	`@include e(tr-pivot, $m: 'drop-row-area') {`
`565`	`569`	`@extend %igx-grid__tr-pivot--drop-row-area !optional`
`566`	`570`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2910,7 +2910,7 @@`
`2910`	`2910`	`width: auto;`
`2911`	`2911`
`2912`	`2912`	`> * {`
`2913`		`- margin-#{$right}: rem(8px);`
	`2913`	`+ margin-#{$right}: rem(4px);`
`2914`	`2914`	`}`
`2915`	`2915`
`2916`	`2916`	`&:last-child {`
`@@ -2941,6 +2941,11 @@`
`2941`	`2941`	`flex-direction: column;`
`2942`	`2942`	`}`
`2943`	`2943`
	`2944`	`+ %igx-grid__tr-pivot--chip_drop_indicator {`
	`2945`	`+ width: 2px;`
	`2946`	`+ background: var-get($theme, 'resize-line-color');`
	`2947`	`+ }`
	`2948`	`+`
`2944`	`2949`	`%igx-grid__tr-pivot--drop-row-area {`
`2945`	`2950`	`flex-grow: 1;`
`2946`	`2951`	`}`