-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'vNext' into dTsvetkov/replace-node-sass-vnext
- Loading branch information
Showing
13 changed files
with
269 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| $__legacy-libsass: true; | ||
| @import '~igniteui-angular/lib/core/styles/themes/index'; | ||
|
|
||
| $legacy-support: true; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <div class="grid-container"> | ||
| <igx-grid igxPreventDocumentScroll #grid [data]="data" height="800px" width="1000px" [autoGenerate]="false" [rowDraggable]="true" | ||
| primaryKey="ID" igxDrop (dropped)="onDropAllowed($event)"> | ||
| <igx-column field="ID" header="ID" width="100px"></igx-column> | ||
| <igx-column field="CompanyName" header="Company Name" width="100px"></igx-column> | ||
| <igx-column field="ContactName" header="Contact Name" width="100px" minWidth="60px" | ||
| maxWidth="230px"></igx-column> | ||
| <igx-column field="ContactTitle" header="Contact Title" width="100px"></igx-column> | ||
| <igx-column field="Address" header="Address" width="100px"></igx-column> | ||
| <igx-column field="City" header="City" width="100px"></igx-column> | ||
| <igx-column field="Region" header="Region" width="100px"></igx-column> | ||
| <igx-column field="PostalCode" header="Postal Code" width="100px"></igx-column> | ||
| <igx-column field="Phone" header="Phone" width="100px"></igx-column> | ||
| <igx-column field="Fax" header="Fax" width="100px"></igx-column> | ||
| </igx-grid> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| .grid-container { | ||
| display: flex; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .grid-container .drop-area { | ||
| height: 500px; | ||
| width: 50%; | ||
| margin: 10px 20px; | ||
| } | ||
|
|
||
| .empty-grid { | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-direction: column; | ||
| text-align: center; | ||
| height: 100%; | ||
| } | ||
|
|
||
| :host ::ng-deep { | ||
| .underlined-class { | ||
| border-bottom: 52px solid #d3d3d3; | ||
| } | ||
| } |
201 changes: 201 additions & 0 deletions
201
src/app/grid/grid-drop-indicator/grid-drop-indicator.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,201 @@ | ||
| import { Component, ViewChild, AfterViewInit, OnDestroy, Renderer2 } from '@angular/core'; | ||
| import { IDragMoveEventArgs, IDropDroppedEventArgs, IgxGridComponent, IRowDragStartEventArgs, Point } from 'igniteui-angular'; | ||
| import { DATA } from '../../data/customers'; | ||
| import { Subject, interval, Observable, Subscription } from 'rxjs'; | ||
| import { takeUntil } from 'rxjs/operators'; | ||
|
|
||
| @Component({ | ||
| selector: 'app-grid-drop-indicator', | ||
| styleUrls: ['grid-drop-indicator.scss'], | ||
| templateUrl: 'grid-drop-indicator.html' | ||
| }) | ||
| export class GridDropIndicatorComponent implements AfterViewInit, OnDestroy { | ||
| @ViewChild('grid', { read: IgxGridComponent, static: true }) | ||
| public grid: IgxGridComponent; | ||
| public data: any[]; | ||
| private destroy$ = new Subject(); | ||
| private intervalSub: Subscription; | ||
| private interval$: Observable<number>; | ||
| private _draggedRow: any; | ||
| private highlightedRow: HTMLElement; | ||
|
|
||
| constructor(private renderer: Renderer2) { | ||
| this.data = DATA; | ||
| } | ||
|
|
||
| public onDropAllowed(args: IDropDroppedEventArgs): void { | ||
| const event = args.originalEvent; | ||
| const currRowIndex = this.getRowIndexAtPoint(this.grid.rowList.toArray(), { | ||
| x: event.clientX, | ||
| y: event.clientY | ||
| }); | ||
| if (currRowIndex === -1) { | ||
| return; | ||
| } | ||
| // remove the row that was dragged and place it onto its new location | ||
| this.grid.deleteRow(this._draggedRow[this.grid.primaryKey]); | ||
| this.data.splice(currRowIndex, 0, this._draggedRow); | ||
| this.clearHighlightElement(); | ||
| } | ||
|
|
||
| public ngOnDestroy() { | ||
| this.destroy$.next(); | ||
| this.destroy$.complete(); | ||
| } | ||
|
|
||
| public ngAfterViewInit() { | ||
| this.grid.rowDragStart | ||
| .pipe(takeUntil(this.destroy$)) | ||
| .subscribe(this.handleRowStart.bind(this)); | ||
| this.grid.rowDragEnd | ||
| .pipe(takeUntil(this.destroy$)) | ||
| .subscribe(() => { | ||
| this.unsubInterval(); | ||
| this.clearHighlightElement(); | ||
| }); | ||
| } | ||
|
|
||
| private getRowIndexAtPoint( | ||
| rowList: any[], | ||
| cursorPosition: Point | ||
| ): number { | ||
| for (const row of rowList) { | ||
| const rowRect = row.nativeElement.getBoundingClientRect(); | ||
| if ( | ||
| cursorPosition.y > rowRect.top + window.scrollY && | ||
| cursorPosition.y < rowRect.bottom + window.scrollY && | ||
| cursorPosition.x > rowRect.left + window.scrollX && | ||
| cursorPosition.x < rowRect.right + window.scrollX | ||
| ) { | ||
| // return the index of the targeted row | ||
| return this.data.indexOf(this.data.find(r => r.ID === row.rowID)); | ||
| } | ||
| } | ||
|
|
||
| return -1; | ||
| } | ||
|
|
||
| /** | ||
| * Unsubs from the autoscroll interval | ||
| */ | ||
| private unsubInterval(): void { | ||
| if (this.intervalSub) { | ||
| this.intervalSub.unsubscribe(); | ||
| this.intervalSub = null; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Handles the grid.onRowDragStart event | ||
| */ | ||
| private handleRowStart(e: IRowDragStartEventArgs): void { | ||
| if (e !== null) { | ||
| this._draggedRow = e.dragData.data; | ||
| } | ||
| const directive = e.dragDirective; | ||
| directive.dragMove | ||
| .pipe(takeUntil(this.grid.rowDragEnd)) | ||
| .subscribe(this.handleDragMove.bind(this)); | ||
| } | ||
|
|
||
| /** | ||
| * Handles the onDragMove event | ||
| */ | ||
| private handleDragMove(event: IDragMoveEventArgs): void { | ||
| this.handleOver(event); | ||
| this.unsubInterval(); | ||
| const dir = this.isPointOnGridEdge(event.pageY); | ||
| if (!dir) { | ||
| return; | ||
| } | ||
| this.scrollGrid(dir); | ||
| if (!this.intervalSub) { | ||
| this.interval$ = interval(500); | ||
| this.intervalSub = this.interval$.subscribe(() => this.scrollGrid(dir)); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Returns if the point is on the upper (-1) or lower (1) edge of a rectangle | ||
| */ | ||
| private isPointOnGridEdge(pageY: number): 1 | -1 { | ||
| const rect: ClientRect = this.grid.nativeElement | ||
| .querySelector('.igx-grid__tbody') | ||
| .getBoundingClientRect(); | ||
| if (pageY >= rect.bottom) { | ||
| return 1; | ||
| } else if (pageY <= rect.top) { | ||
| return -1; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Checks if the grid is scrolled to its upper (-1) or lower (1) edge | ||
| */ | ||
| private isGridScrolledToEdge(dir: 1 | -1): boolean { | ||
| if (this.grid.data[0] === this.grid.rowList.first.data && dir === -1) { | ||
| return true; | ||
| } | ||
| if ( | ||
| this.grid.data[this.grid.data.length - 1] === | ||
| this.grid.rowList.last.data && | ||
| dir === 1 | ||
| ) { | ||
| return true; | ||
| } | ||
| return false; | ||
| } | ||
|
|
||
| /** | ||
| * Attempts to scroll the grid in target direction | ||
| * | ||
| * Returns whether the grid was scrolled | ||
| */ | ||
| private scrollGrid(dir: 1 | -1): void { | ||
| if (!this.isGridScrolledToEdge(dir)) { | ||
| if (dir === 1) { | ||
| this.grid.verticalScrollContainer.scrollNext(); | ||
| } else { | ||
| this.grid.verticalScrollContainer.scrollPrev(); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private handleOver(event: IDragMoveEventArgs) { | ||
| const ghostRect = event.owner.ghostElement.getBoundingClientRect(); | ||
| const rowIndex = this.getRowIndexAtPoint(this.grid.rowList.toArray(), { | ||
| x: ghostRect.x, | ||
| y: ghostRect.y | ||
| }); | ||
| if (rowIndex === -1) { | ||
| return; | ||
| } | ||
| const rowElement = this.grid.rowList.find( | ||
| e => e.rowData.ID === this.grid.data[rowIndex].ID | ||
| ); | ||
| if (rowElement) { | ||
| this.changeHighlightedElement(rowElement.element.nativeElement); | ||
| } | ||
| } | ||
|
|
||
| private clearHighlightElement(): void { | ||
| if (this.highlightedRow !== undefined) { | ||
| this.renderer.removeClass(this.highlightedRow, 'underlined-class'); | ||
| } | ||
| } | ||
| private setHightlightElement(newElement: HTMLElement) { | ||
| this.renderer.addClass(newElement, 'underlined-class'); | ||
| this.highlightedRow = newElement; | ||
| } | ||
|
|
||
| private changeHighlightedElement(newElement: HTMLElement) { | ||
| if (newElement !== undefined) { | ||
| if (newElement !== this.highlightedRow) { | ||
| this.clearHighlightElement(); | ||
| this.setHightlightElement(newElement); | ||
| } else { | ||
| return; | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/app/scheduling/daterangepicker/daterangepicker-mode/daterangepicker-mode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <igx-date-range-picker [value]="range" [mode]="'dropdown'"></igx-date-range-picker> | ||
| <igx-date-range-picker [value]="range" [mode]="'dialog'"></igx-date-range-picker> |