Skip to content

Commit 44e41f6

Browse files
rkaraivanovrkaraivanov
committed
Merge branch 'rkaraivanov/multi-column-headers' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/multi-column-headers
2 parents ce86704 + 2a75ea6 commit 44e41f6

File tree

6 files changed

+223
-293
lines changed

6 files changed

+223
-293
lines changed

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

+45-40
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@
425425
}
426426

427427
%grid-thead {
428+
position: relative;
428429
grid-row: 2;
429430
border-bottom: 1px dotted igx-color($palette, 'grays', 400);
430431
z-index: 2;
@@ -558,6 +559,7 @@
558559
}
559560

560561
%grid-cell-display {
562+
position: relative;
561563
display: flex;
562564
flex: 1 1 0%;
563565
align-items: center;
@@ -582,7 +584,9 @@
582584
}
583585

584586
%grid-cell--fixed-width {
587+
position: relative;
585588
flex-grow: 0;
589+
outline-style: none;
586590
}
587591

588592
%grid-cell--selected {
@@ -625,7 +629,7 @@
625629
min-width: 0;
626630
padding: map-get($grid-header-padding, 'comfortable');
627631
border-right: 1px dotted igx-color($palette, 'grays', 400);
628-
overflow: visible;
632+
outline-style: none;
629633
}
630634

631635
%grid-cell-header--cosy {
@@ -640,15 +644,22 @@
640644

641645
%grid-cell-header-title {
642646
@include ellipsis();
643-
display: inline-flex;
644-
align-items: center;
647+
min-width: 3ch;
645648
user-select: none;
646649
cursor: initial;
647650
flex-grow: 1; /* hey IE, the text should take most of the space */
648651
align-self: flex-end;
649652
line-height: map-get($grid-header-height, 'comfortable') / $grid-head-fs;
650653
}
651654

655+
%grid-cell-header-title--cosy {
656+
line-height: map-get($grid-header-height, 'cosy') / $grid-head-fs;
657+
}
658+
659+
%grid-cell-header-title--compact {
660+
line-height: map-get($grid-header-height, 'compact') / $grid-head-fs;
661+
}
662+
652663
%grid-cell-header-icons {
653664
display: inline-flex;
654665
align-items: center;
@@ -670,12 +681,10 @@
670681
}
671682
}
672683

673-
%grid-cell-header-title--cosy,
674684
%grid-cell-header-icons--cosy {
675685
height: map-get($grid-header-height, 'cosy');
676686
}
677687

678-
%grid-cell-header-title--compact,
679688
%grid-cell-header-icons--compact {
680689
height: map-get($grid-header-height, 'compact');
681690
}
@@ -751,22 +760,20 @@
751760

752761

753762
// Column moving
754-
755-
%igx-grid__th-drop-indicator-left {
763+
%igx-grid__th-drop-indicator-left,
764+
%igx-grid__th-drop-indicator-right {
756765
position: absolute;
757766
width: 1px;
758-
top: 0;
759-
left: -1px;
760767
height: 100%;
768+
top: 0;
761769
}
762770

771+
%igx-grid__th-drop-indicator-left {
772+
left: -1px;
773+
}
763774

764775
%igx-grid__th-drop-indicator-right {
765-
position: absolute;
766-
width: 1px;
767-
top: 0;
768776
right: -1px;
769-
height: 100%;
770777
}
771778

772779
%igx-grid__th-drop-indicator--active {
@@ -777,43 +784,42 @@
777784

778785
&::after,
779786
&::before {
780-
content: '';
781787
position: absolute;
788+
content: '';
782789
width: 0;
783790
height: 0;
784791
border-style: solid;
785-
left: -4.5px;
792+
left: -3px;
786793
}
787794

788795
&::before {
789796
bottom: 0;
790-
border-width: 0 5px 5px;
797+
border-width: 0 4px 4px;
791798
border-color: transparent transparent --var($theme, 'drop-indicator-color');
792799
}
793800

794801
&::after {
795802
top: 0;
796-
border-width: 5px 5px 0;
803+
border-width: 4px 4px 0;
797804
border-color: --var($theme, 'drop-indicator-color') transparent transparent;
798805
}
799806
}
800807

801-
%grid__scroll-on-drag-left {
808+
%grid__scroll-on-drag-left,
809+
%grid__scroll-on-drag-right {
802810
position: absolute;
803811
width: 15px;
804812
top: 0;
805-
left: 0;
806813
height: 100%;
807814
z-index: 25;
808815
}
809816

817+
%grid__scroll-on-drag-left {
818+
left: 0;
819+
}
820+
810821
%grid__scroll-on-drag-right {
811-
position: absolute;
812-
width: 15px;
813-
top: 0;
814822
right: 0;
815-
height: 100%;
816-
z-index: 25;
817823
}
818824

819825
%grid__scroll-on-drag-pinned {
@@ -825,18 +831,19 @@
825831
}
826832

827833
%grid__drag-ghost-image {
828-
background-color: --var($theme, 'ghost-header-background');
829-
color: --var($theme, 'ghost-header-text-color');
830834
position: absolute;
831-
z-index: 20;
835+
display: flex;
832836
align-items: center;
837+
background-color: --var($theme, 'ghost-header-background');
838+
color: --var($theme, 'ghost-header-text-color');
833839
height: map-get($grid-header-height, 'comfortable');
834840
min-height: map-get($grid-header-height, 'comfortable');
835841
top: -99999px;
836842
left: -99999px;
837-
overflow: visible;
838-
display: inline-flex;
843+
border: none;
839844
box-shadow: igx-elevation($elevations, 5);
845+
overflow: hidden;
846+
z-index: 20;
840847

841848
%grid-cell-header-title {
842849
min-width: calc(100% - 24px);
@@ -845,6 +852,10 @@
845852
%grid-cell-header-icons {
846853
display: none;
847854
}
855+
856+
%grid-thead-title {
857+
border: none;
858+
}
848859
}
849860

850861
%grid__drag-ghost-image--cosy {
@@ -859,19 +870,14 @@
859870

860871
%grid__drag-ghost-image-icon {
861872
color: --var($theme, 'ghost-header-icon-color');
862-
font-size: rem(24px);
863873
margin-right: rem(12px);
864-
padding-bottom: rem(12px);
865874
}
866875

867876
%grid__drag-ghost-image-icon-group {
868877
color: --var($theme, 'ghost-header-icon-color');
869-
font-size: rem(24px);
870-
margin-right: rem(12px);
871-
padding-top: rem(12px);
872-
padding-left: rem(12px);
878+
padding: --var($grid-header-padding, 'comfortable');
879+
padding-right: 0;
873880
margin-right: rem(8);
874-
width: rem(24px);
875881
}
876882

877883
%igx-grid__drag-col-header {
@@ -883,8 +889,7 @@
883889
}
884890
}
885891

886-
// Groupby section
887-
892+
// Group by section
888893
%igx-grid__group-row {
889894
background-color: --var($theme, 'group-row-background');
890895
display: flex;
@@ -1047,7 +1052,7 @@
10471052
flex-wrap: wrap;
10481053

10491054
&:focus {
1050-
outline: transparent;
1055+
outline-style: none;
10511056
}
10521057
}
10531058

@@ -1122,7 +1127,7 @@
11221127

11231128
&:hover,
11241129
&:focus {
1125-
outline: transparent;
1130+
outline-style: none;
11261131

11271132
%igx-icon-display {
11281133
color: --var($theme, 'expand-icon-hover-color');

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -854,12 +854,12 @@ describe('Column Hiding UI', () => {
854854
});
855855

856856
function getColumnChooserButton() {
857-
const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnChooser');
857+
const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnHiding');
858858
return button ? button.nativeElement : undefined;
859859
}
860860

861861
function getColumnChooserButtonIcon() {
862-
const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnChooser');
862+
const button = fix.debugElement.queryAll(By.css('button')).find((b) => b.nativeElement.name === 'btnColumnHiding');
863863
return button.query(By.css('igx-icon')).nativeElement;
864864
}
865865

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<div class="igx-grid-toolbar__actions">
66

77
<div *ngIf="grid.columnHiding">
8-
<button igxButton="flat" name="btnColumnChooser" igxButton igxRipple
9-
(click)="columnHidingDropdown.toggle()">
8+
<button igxButton="flat" #columnHidingButton name="btnColumnHiding" igxButton igxRipple
9+
(click)="toggleColumnHidingUI()">
1010
<div class="igx-grid-toolbar__button-space">
1111
<igx-icon *ngIf="grid.hiddenColumnsCount > 0">visibility_off</igx-icon>
1212
<igx-icon *ngIf="grid.hiddenColumnsCount === 0">visibility</igx-icon>
@@ -32,13 +32,13 @@
3232
</span>
3333
</button>
3434

35-
<div igxToggle #directive="toggle" class="igx-filtering__options--to-left">
35+
<igx-drop-down #exportDropdown>
3636
<ul class="igx-grid-toolbar__dd-list">
3737
<li class="igx-grid-toolbar__dd-list-items" igxRipple *ngIf="shouldShowExportExcelButton" id="btnExportExcel"
3838
(click)="exportToExcelClicked()">{{ getExportExcelText() }}</li>
3939
<li class="igx-grid-toolbar__dd-list-items" igxRipple *ngIf="shouldShowExportCsvButton" id="btnExportCsv"
4040
(click)="exportToCsvClicked()">{{ getExportCsvText() }}</li>
4141
</ul>
42-
</div>
42+
</igx-drop-down>
4343
</div>
4444
</div>

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

+35-7
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import {
44
HostBinding,
55
Input,
66
Optional,
7-
ViewChild
7+
ViewChild,
8+
ElementRef
89
} from '@angular/core';
910

1011
import { IgxToggleDirective } from '../directives/toggle/toggle.directive';
@@ -13,11 +14,14 @@ import { CsvFileTypes,
1314
IgxCsvExporterOptions,
1415
IgxCsvExporterService,
1516
IgxExcelExporterOptions,
16-
IgxExcelExporterService } from '../services/index';
17+
IgxExcelExporterService,
18+
CloseScrollStrategy} from '../services/index';
1719
import { IgxGridAPIService } from './api.service';
1820
import { IgxGridComponent } from './grid.component';
1921
import { IgxDropDownComponent } from '../drop-down/drop-down.component';
2022
import { IgxColumnHidingComponent } from './column-hiding.component';
23+
import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignment } from '../services/overlay/utilities';
24+
import { ConnectedPositioningStrategy } from '../services/overlay/position';
2125

2226
@Component({
2327
selector: 'igx-grid-toolbar',
@@ -29,15 +33,21 @@ export class IgxGridToolbarComponent {
2933
@Input()
3034
public gridID: string;
3135

32-
@ViewChild(IgxToggleDirective, { read: IgxToggleDirective })
33-
protected toggleDirective: IgxToggleDirective;
34-
3536
@ViewChild('columnHidingDropdown', { read: IgxDropDownComponent })
3637
public columnHidingDropdown: IgxDropDownComponent;
3738

3839
@ViewChild(IgxColumnHidingComponent)
3940
public columnHidingUI: IgxColumnHidingComponent;
4041

42+
@ViewChild('columnHidingButton')
43+
public columnHidingButton;
44+
45+
@ViewChild('exportDropdown', { read: IgxDropDownComponent })
46+
public exportDropdown: IgxDropDownComponent;
47+
48+
@ViewChild('btnExport')
49+
public exportButton;
50+
4151
public get grid(): IgxGridComponent {
4252
return this.gridAPI.get(this.gridID);
4353
}
@@ -60,6 +70,21 @@ export class IgxGridToolbarComponent {
6070
@Optional() public csvExporter: IgxCsvExporterService) {
6171
}
6272

73+
private _positionSettings: PositionSettings = {
74+
horizontalDirection: HorizontalAlignment.Left,
75+
horizontalStartPoint: HorizontalAlignment.Right,
76+
verticalDirection: VerticalAlignment.Bottom,
77+
verticalStartPoint: VerticalAlignment.Bottom
78+
};
79+
80+
private _overlaySettings: OverlaySettings = {
81+
positionStrategy: new ConnectedPositioningStrategy(this._positionSettings),
82+
scrollStrategy: new CloseScrollStrategy(),
83+
modal: false,
84+
closeOnOutsideClick: true
85+
};
86+
87+
6388
public getTitle(): string {
6489
return this.grid != null ? this.grid.toolbarTitle : '';
6590
}
@@ -77,7 +102,9 @@ export class IgxGridToolbarComponent {
77102
}
78103

79104
public exportClicked() {
80-
this.toggleDirective.collapsed = !this.toggleDirective.collapsed;
105+
106+
this._overlaySettings.positionStrategy.settings.target = this.exportButton.nativeElement;
107+
this.exportDropdown.toggle(this._overlaySettings);
81108
}
82109

83110
public exportToExcelClicked() {
@@ -106,6 +133,7 @@ export class IgxGridToolbarComponent {
106133
}
107134

108135
public toggleColumnHidingUI() {
109-
this.columnHidingDropdown.toggle();
136+
this._overlaySettings.positionStrategy.settings.target = this.columnHidingButton.nativeElement;
137+
this.columnHidingDropdown.toggle(this._overlaySettings);
110138
}
111139
}

0 commit comments

Comments
 (0)