Merge branch 'master' into rkaraivanov/multi-column-headers

Author: zdrawku

projects/igniteui-angular/src/lib/grid/column-hiding.spec.ts

@@ -854,12 +854,12 @@ describe('Column Hiding UI', () => {
     });
 
     function getColumnChooserButton() {
-        const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnChooser');
+        const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnHiding');
         return button ? button.nativeElement : undefined;
     }
 
     function getColumnChooserButtonIcon() {
-        const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnChooser');
+        const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnHiding');
         return button.query(By.css('igx-icon')).nativeElement;
     }
 

projects/igniteui-angular/src/lib/grid/grid-toolbar.component.html

@@ -5,8 +5,8 @@
 <div class="igx-grid-toolbar__actions">
 
     <div *ngIf="grid.columnHiding">
-        <button igxButton="flat" name="btnColumnChooser" igxButton igxRipple
-            (click)="columnHidingDropdown.toggle()">
+        <button igxButton="flat" #columnHidingButton name="btnColumnHiding" igxButton igxRipple
+            (click)="toggleColumnHidingUI()">
             <div  class="igx-grid-toolbar__button-space">
                 <igx-icon *ngIf="grid.hiddenColumnsCount > 0">visibility_off</igx-icon>
                 <igx-icon *ngIf="grid.hiddenColumnsCount === 0">visibility</igx-icon>
@@ -32,13 +32,13 @@
             </span>
         </button>
 
-        <div igxToggle #directive="toggle" class="igx-filtering__options--to-left">
+        <igx-drop-down #exportDropdown>
             <ul class="igx-grid-toolbar__dd-list">
                 <li class="igx-grid-toolbar__dd-list-items" igxRipple *ngIf="shouldShowExportExcelButton" id="btnExportExcel"
                 (click)="exportToExcelClicked()">{{ getExportExcelText() }}</li>
                 <li class="igx-grid-toolbar__dd-list-items" igxRipple *ngIf="shouldShowExportCsvButton" id="btnExportCsv"
                 (click)="exportToCsvClicked()">{{ getExportCsvText() }}</li>
             </ul>
-        </div>
+        </igx-drop-down>
     </div>
 </div>

projects/igniteui-angular/src/lib/grid/grid-toolbar.component.ts

@@ -4,7 +4,8 @@ import {
     HostBinding,
     Input,
     Optional,
-    ViewChild
+    ViewChild,
+    ElementRef
 } from '@angular/core';
 
 import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
@@ -13,11 +14,14 @@ import { CsvFileTypes,
          IgxCsvExporterOptions,
          IgxCsvExporterService,
          IgxExcelExporterOptions,
-         IgxExcelExporterService } from '../services/index';
+         IgxExcelExporterService,
+         CloseScrollStrategy} from '../services/index';
 import { IgxGridAPIService } from './api.service';
 import { IgxGridComponent } from './grid.component';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { IgxColumnHidingComponent } from './column-hiding.component';
+import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../services/overlay/utilities';
+import {  ConnectedPositioningStrategy } from '../services/overlay/position';
 
 @Component({
     selector: 'igx-grid-toolbar',
@@ -29,15 +33,21 @@ export class IgxGridToolbarComponent {
     @Input()
     public gridID: string;
 
-    @ViewChild(IgxToggleDirective, { read: IgxToggleDirective })
-    protected toggleDirective: IgxToggleDirective;
-
     @ViewChild('columnHidingDropdown', { read: IgxDropDownComponent })
     public columnHidingDropdown: IgxDropDownComponent;
 
     @ViewChild(IgxColumnHidingComponent)
     public columnHidingUI: IgxColumnHidingComponent;
 
+    @ViewChild('columnHidingButton')
+    public columnHidingButton;
+
+    @ViewChild('exportDropdown', { read: IgxDropDownComponent })
+    public exportDropdown: IgxDropDownComponent;
+
+    @ViewChild('btnExport')
+    public exportButton;
+
     public get grid(): IgxGridComponent {
         return this.gridAPI.get(this.gridID);
     }
@@ -60,6 +70,21 @@ export class IgxGridToolbarComponent {
                 @Optional() public csvExporter: IgxCsvExporterService) {
     }
 
+    private _positionSettings: PositionSettings = {
+        horizontalDirection: HorizontalAlignment.Left,
+        horizontalStartPoint: HorizontalAlignment.Right,
+        verticalDirection: VerticalAlignment.Bottom,
+        verticalStartPoint: VerticalAlignment.Bottom
+    };
+
+    private _overlaySettings: OverlaySettings = {
+        positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
+        scrollStrategy: new CloseScrollStrategy(),
+        modal: false,
+        closeOnOutsideClick: true
+    };
+
+
     public getTitle(): string {
         return this.grid != null ? this.grid.toolbarTitle : '';
     }
@@ -77,7 +102,9 @@ export class IgxGridToolbarComponent {
     }
 
     public exportClicked() {
-        this.toggleDirective.collapsed = !this.toggleDirective.collapsed;
+
+        this._overlaySettings.positionStrategy.settings.target = this.exportButton.nativeElement;
+        this.exportDropdown.toggle(this._overlaySettings);
     }
 
     public exportToExcelClicked() {
@@ -106,6 +133,7 @@ export class IgxGridToolbarComponent {
     }
 
     public toggleColumnHidingUI() {
-        this.columnHidingDropdown.toggle();
+        this._overlaySettings.positionStrategy.settings.target = this.columnHidingButton.nativeElement;
+        this.columnHidingDropdown.toggle(this._overlaySettings);
     }
 }