Skip to content

Commit 89f9f69

Browse files
mddragnevmddragnev
committed
Merge branch 'pivot-grid-master' of https://github.com/IgniteUI/igniteui-angular into dkamburov/pivot-sample-display-density
2 parents b813a52 + 8fa5274 commit 89f9f69

File tree

12 files changed

+162
-75
lines changed

12 files changed

+162
-75
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -727,6 +727,22 @@
727727
}
728728
}
729729

730+
@include e(tr-pivot) {
731+
@extend %igx-grid__tr-pivot !optional
732+
}
733+
734+
@include e(tr-pivot, $m: 'row-area') {
735+
@extend %igx-grid__tr-pivot--row-area !optional
736+
}
737+
738+
@include e(tr-pivot, $m: 'filter') {
739+
@extend %igx-grid__tr-pivot--filter !optional
740+
}
741+
742+
@include e(tr-pivot-group) {
743+
@extend %igx-grid__tr-pivot-group !optional
744+
}
745+
730746
@include excel-filtering-partial();
731747
@include advanced-filtering-partial();
732748
@include group-by-area();

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

Lines changed: 68 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -630,16 +630,20 @@
630630
color: var-get($theme, 'pinned-border-color')
631631
);
632632

633+
$padding-comfortable: rem(24px);
634+
$padding-cosy: rem(16px);
635+
$padding-compact: rem(12px);
636+
633637
$grid-header-padding: (
634-
comfortable: 0 rem(24px),
635-
cosy: 0 rem(16px),
636-
compact: 0 rem(12px)
638+
comfortable: 0 $padding-comfortable,
639+
cosy: 0 $padding-cosy,
640+
compact: 0 $padding-compact
637641
);
638642

639643
$grid-cbx-padding: (
640-
comfortable: rem(24px),
641-
cosy: rem(16px),
642-
compact: rem(12px)
644+
comfortable: $padding-comfortable,
645+
cosy: $padding-cosy,
646+
compact: $padding-compact
643647
);
644648

645649
$cbx-padding: map.get($grid-cbx-padding, 'comfortable');
@@ -1196,7 +1200,7 @@
11961200
}
11971201

11981202
%igx-grid__tr--header {
1199-
display: flex;
1203+
display: flex;
12001204
align-items: center;
12011205
}
12021206

@@ -2865,5 +2869,62 @@
28652869
border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
28662870
}
28672871
}
2872+
2873+
// Pivot grid
2874+
%grid-thead--pivot {
2875+
flex-direction: column;
2876+
}
2877+
2878+
%igx-grid__tr-pivot {
2879+
display: flex;
2880+
align-items: center;
2881+
background: inherit;
2882+
z-index: 3;
2883+
2884+
&:not(&--row-area) {
2885+
height: map.get($grid-header-height, 'comfortable');
2886+
}
2887+
2888+
padding: map.get($grid-header-padding, 'comfortable');
2889+
background-clip: border-box !important;
2890+
2891+
border-#{$left}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2892+
border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2893+
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2894+
2895+
igx-chips-area {
2896+
> * {
2897+
margin-#{$right}: rem(8px);
2898+
}
2899+
2900+
&:last-child {
2901+
margin-#{$right}: 0;
2902+
}
2903+
}
2904+
}
2905+
2906+
%igx-grid__tr-pivot--row-area {
2907+
align-items: flex-end;
2908+
padding-bottom: $padding-comfortable;
2909+
border-#{$left}: 0;
2910+
border-bottom: 0;
2911+
}
2912+
2913+
%igx-grid__tr-pivot--filter {
2914+
height: map.get($grid-header-height, 'comfortable');
2915+
border-left: 0;
2916+
border-right: 0;
2917+
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
2918+
}
2919+
2920+
%igx-grid-thead__wrapper--pivot {
2921+
border-bottom: 0;
2922+
}
2923+
2924+
%igx-grid__tr-pivot-group {
2925+
flex: 1;
2926+
}
2927+
// Pivot grid END
28682928
}
28692929

2930+

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
}
2525
}
2626

27+
@include e(wrapper, $m: 'pivot') {
28+
@extend %igx-grid-thead__wrapper--pivot !optional;
29+
}
30+
2731
@include e(title) {
2832
@extend %grid-cell-display !optional;
2933
@extend %grid-cell-header !optional;
@@ -69,6 +73,10 @@
6973
@extend %grid-thead-title--cosy !optional;
7074
}
7175
}
76+
77+
@include m(pivot) {
78+
@extend %grid-thead--pivot !optional;
79+
}
7280
}
7381

7482
@include b(igx-grid-th) {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ng-content select="igx-grid-toolbar"></ng-content>
33

44
<!-- Grid table head row area -->
5-
<igx-pivot-header-row class="igx-grid-thead" tabindex="0" style='flex-direction: column;'
5+
<igx-pivot-header-row class="igx-grid-thead igx-grid-thead--pivot" tabindex="0"
66
[grid]="this"
77
[hasMRL]="hasColumnLayouts"
88
[density]="displayDensity"
@@ -117,8 +117,7 @@
117117
<ng-template #headerTemplate let-column>
118118
<div class="igx-grid__tr--header">
119119
<igx-icon [attr.draggable]="false"
120-
(click)="toggleColumn(column)"
121-
style='cursor: pointer;'>
120+
(click)="toggleColumn(column)">
122121
{{columnGroupStates.get(column.field) ? 'expand_more' : 'expand_less'}}</igx-icon>
123122
{{column.header}}
124123
</div>
@@ -133,4 +132,4 @@
133132
<igx-excel-style-search></igx-excel-style-search>
134133
</igx-excel-style-filter-operations>
135134
</igx-grid-excel-style-filtering>
136-
</div>
135+
</div>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html

Lines changed: 41 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
1-
<div class="igx-grid-thead__wrapper" role="row" [style.width.px]="width">
1+
<div class="igx-grid-thead__wrapper igx-grid-thead__wrapper--pivot" role="row" [style.width.px]="width">
22
<div class="igx-grid__tr" role="row" [style.width.px]="width">
3-
<div #pivotFilterContainer class="igx-grid__tr-action" [style.min-width.px]="grid.pivotRowWidths"
3+
<div #pivotFilterContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1"
44
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
5-
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()"
6-
style='display: flex; align-items: flex-end;'>
7-
<div *ngIf="grid.filterDimensions.length === 0">
8-
<span class='igx-pivot__emptyChipArea'>Drop Filter Fields here.</span>
9-
</div>
5+
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
6+
7+
<span *ngIf="grid.filterDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Filter Fields here.</span>
8+
109
<!-- Filter area -->
11-
<igx-chips-area #filterArea droppable='true' style="width:fit-content; height: 100%;">
10+
<igx-chips-area #filterArea droppable='true'>
1211
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
1312
[removable]="true" (remove)="filterRemoved($event)"
1413
(dragOver)="onDimDragOver($event, 2)"
@@ -21,14 +20,14 @@
2120
</igx-chips-area>
2221
</div>
2322

24-
<div>
25-
<div #pivotColumnContainer (dropped)="onDimDrop($event, colArea, 1)" igxDrop
23+
<div class="igx-grid__tr-pivot-group">
24+
<div #pivotColumnContainer class="igx-grid__tr-pivot" (dropped)="onDimDrop($event, colArea, 1)" igxDrop
2625
(igxDragEnter)="onAreaDragEnter($event, colArea, 1)" (igxDragLeave)="onAreaDragLeave($event, colArea)">
27-
<div *ngIf="grid.columnDimensions.length === 0">
28-
<span class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
29-
</div>
26+
27+
<span *ngIf="grid.columnDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Column Fields here.</span>
28+
3029
<!-- Columns area -->
31-
<igx-chips-area #colArea droppable='true' style="width:fit-content; height: 100%;">
30+
<igx-chips-area #colArea droppable='true'>
3231
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="true" [id]="col.memberName"
3332
[removable]="true" (remove)="columnRemoved($event)"
3433
(dragOver)="onDimDragOver($event, 1)"
@@ -44,16 +43,16 @@
4443
</igx-chip>
4544
</igx-chips-area>
4645
</div>
47-
<div #pivotValueContainer [style.min-width.px]="grid.unpinnedWidth" (pointerdown)="$event.preventDefault()"
46+
47+
<div #pivotValueContainer class="igx-grid__tr-pivot" (pointerdown)="$event.preventDefault()"
4848
(dropped)="onValueDrop($event, valueArea)" igxDrop
4949
(igxDragEnter)="onAreaDragEnter($event, valueArea)"
5050
(igxDragLeave)="onAreaDragLeave($event, valueArea)">
5151

52-
<div *ngIf="grid.values.length === 0">
53-
<span class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
54-
</div>
52+
<span *ngIf="grid.values.length === 0" class='igx-pivot__emptyChipArea'>Drop Value Fields here.</span>
53+
5554
<!-- Value area -->
56-
<igx-chips-area #valueArea droppable='true' style="width:fit-content; height: 100%;">
55+
<igx-chips-area #valueArea droppable='true'>
5756
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.member"
5857
[removable]="true" (remove)="valueRemoved($event)"
5958
(dragLeave)="onDimDragLeave($event)"
@@ -71,36 +70,33 @@
7170
</div>
7271
</div>
7372
</div>
73+
7474
<div role="rowgroup" class="igx-grid-thead__wrapper" [style.width.px]="width"
7575
[attr.aria-activedescendant]="activeDescendant" [class.igx-grid__tr--mrl]="hasMRL">
76+
7677
<!-- Column headers area -->
7778
<div class="igx-grid__tr" role="row" [style.width.px]="width">
79+
<div #pivotContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--row-area" [style.min-width.px]="grid.pivotRowWidths"
80+
(igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
81+
igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()">
7882

79-
<ng-container>
80-
<div #pivotContainer class="igx-grid__tr-action" [style.min-width.px]="grid.pivotRowWidths"
81-
(igxDragEnter)="onAreaDragEnter($event, rowArea, 0)" (igxDragLeave)="onAreaDragLeave($event, rowArea)"
82-
igxDrop (dropped)="onDimDrop($event, rowArea, 0)" (pointerdown)="$event.preventDefault()"
83-
style='display: flex; align-items: flex-end; z-index: 4; background: inherit;'>
84-
85-
<div *ngIf="grid.rowDimensions.length === 0">
86-
<span class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
87-
</div>
88-
<!-- Row area -->
89-
<igx-chips-area #rowArea droppable='true' style="width:fit-content; height: 100%;">
90-
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
91-
[removable]="true" (remove)="rowRemoved($event)"
92-
(dragLeave)="onDimDragLeave($event)"
93-
(dragDrop)="onDimDrop($event, rowArea, 0)"
94-
(dragOver)="onDimDragOver($event, 0)"
95-
(click)="onChipSort($event, row, 0)">
96-
<igx-icon igxPrefix>table_rows</igx-icon>
97-
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
98-
{{ row.memberName}}
99-
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
100-
</igx-chip>
101-
</igx-chips-area>
102-
</div>
103-
</ng-container>
83+
<span *ngIf="grid.rowDimensions.length === 0" class='igx-pivot__emptyChipArea'>Drop Row Fields here.</span>
84+
85+
<!-- Row area -->
86+
<igx-chips-area #rowArea droppable='true'>
87+
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
88+
[removable]="true" (remove)="rowRemoved($event)"
89+
(dragLeave)="onDimDragLeave($event)"
90+
(dragDrop)="onDimDrop($event, rowArea, 0)"
91+
(dragOver)="onDimDragOver($event, 0)"
92+
(click)="onChipSort($event, row, 0)">
93+
<igx-icon igxPrefix>table_rows</igx-icon>
94+
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, row)'>filter_list</igx-icon>
95+
{{ row.memberName}}
96+
<igx-icon *ngIf="row.sortDirection" igxSuffix> {{ row.sortDirection < 2 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
97+
</igx-chip>
98+
</igx-chips-area>
99+
</div>
104100

105101
<!-- Pinned columns collection from the start -->
106102
<ng-container *ngIf="pinnedColumnCollection.length && grid.isPinningToStart">
@@ -139,6 +135,7 @@
139135
</ng-container>
140136
</div>
141137
</div>
138+
142139
<!-- Header thumb area -->
143140
<div class="igx-grid-thead__thumb" [hidden]="!grid.hasVerticalScroll()" [style.width.px]="grid.scrollSize">
144141
</div>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row.component.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,16 +99,14 @@
9999

100100
<ng-template #headerTemplate let-column>
101101
<div class="igx-grid__tr--header">
102-
<igx-icon [attr.draggable]="false"
103-
(click)="grid.toggleRow(getRowDimensionKey(column))"
104-
style='cursor: pointer;'>
102+
<igx-icon [attr.draggable]="false" (click)="grid.toggleRow(getRowDimensionKey(column))">
105103
{{ getExpandState(column) ? 'expand_more' : 'expand_less'}}</igx-icon>
106104
{{column.header}}
107105
</div>
108106
</ng-template>
109107

110108
<ng-template #headerTemplateGray let-column>
111-
<div class="igx-grid__tr--header" style='color:gray'>
109+
<div class="igx-grid__tr--header">
112110
{{column.header}}
113111
</div>
114112
</ng-template>

‎src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.html

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<div class="sample-column">
2-
<igx-pivot-grid #grid1 [data]="origData" [pivotConfiguration]="pivotConfigHierarchy">
3-
</igx-pivot-grid>
4-
</div>
1+
<igx-pivot-grid
2+
#grid1
3+
[data]="origData"
4+
[pivotConfiguration]="pivotConfigHierarchy">
5+
</igx-pivot-grid>
6+

‎src/app/pivot-grid-hierarchy/pivot-grid-hierarchy.sample.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
:host {
2+
display: block;
3+
height: 100%;
4+
}
5+
16
:host ::ng-deep {
27
.upFont {
38
color: green;

‎src/app/pivot-grid-noop/pivot-grid-noop.sample.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.sample-column {
2-
max-width: 900px;
1+
:host {
2+
display: block;
33
}

‎src/app/pivot-grid-noop/pivot-grid-noop.sample.html

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<div class="sample-column">
2-
<igx-pivot-grid #grid1 [data]="mockRemoteData" [width]= '"1200px"' [pivotConfiguration]="pivotConfigHierarchy">
3-
</igx-pivot-grid>
4-
</div>
1+
<igx-pivot-grid
2+
#grid1
3+
[data]="mockRemoteData"
4+
[pivotConfiguration]="pivotConfigHierarchy">
5+
</igx-pivot-grid>

0 commit comments

Comments
 (0)