Skip to content

Commit 610db3d

Browse files
desig9steindesig9stein
committed
fix(doc-manager): Add density styles
1 parent fd28565 commit 610db3d

File tree

5 files changed

+115
-44
lines changed

5 files changed

+115
-44
lines changed

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

Lines changed: 45 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -548,10 +548,43 @@
548548
}
549549
}
550550

551+
// Pivot start
552+
@include e(tr-pivot) {
553+
@extend %igx-grid__tr-pivot !optional
554+
}
555+
556+
@include e(tr-pivot, $m: 'row-area') {
557+
@extend %igx-grid__tr-pivot--row-area !optional
558+
}
559+
560+
@include e(tr-pivot, $m: 'filter') {
561+
@extend %igx-grid__tr-pivot--filter !optional
562+
}
563+
564+
@include e(tr-pivot-group) {
565+
@extend %igx-grid__tr-pivot-group !optional
566+
}
567+
568+
@include e(tr-pivot-toggle-icons) {
569+
@extend %igx-grid__tr-pivot-toggle-icons !optional;
570+
}
571+
// pivot end
551572

552573
@include m(cosy) {
553574
@extend %grid-display !optional;
554575

576+
@include e(tr-pivot) {
577+
@extend %igx-grid__tr-pivot--cosy !optional
578+
}
579+
580+
@include e(tr-pivot, $m: 'row-area') {
581+
@extend %igx-grid__tr-pivot--row-area--cosy !optional
582+
}
583+
584+
@include e(tr-pivot, $m: 'filter') {
585+
@extend %igx-grid__tr-pivot--filter--cosy !optional
586+
}
587+
555588
@include e(drag-indicator) {
556589
@extend %igx-grid__drag-indicator--cosy !optional;
557590
}
@@ -641,6 +674,18 @@
641674
@include m(compact) {
642675
@extend %grid-display !optional;
643676

677+
@include e(tr-pivot) {
678+
@extend %igx-grid__tr-pivot--compact !optional
679+
}
680+
681+
@include e(tr-pivot, $m: 'row-area') {
682+
@extend %igx-grid__tr-pivot--row-area--compact !optional
683+
}
684+
685+
@include e(tr-pivot, $m: 'filter') {
686+
@extend %igx-grid__tr-pivot--filter--compact !optional
687+
}
688+
644689
@include e(drag-indicator) {
645690
@extend %igx-grid__drag-indicator--compact !optional;
646691
}
@@ -727,22 +772,6 @@
727772
}
728773
}
729774

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-
746775
@include excel-filtering-partial();
747776
@include advanced-filtering-partial();
748777
@include group-by-area();

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

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -640,6 +640,12 @@
640640
compact: 0 $padding-compact
641641
);
642642

643+
$pivot-row-aria-padding: (
644+
comfortable: $padding-comfortable,
645+
cosy: $padding-cosy,
646+
compact: $padding-compact
647+
);
648+
643649
$grid-cbx-padding: (
644650
comfortable: $padding-comfortable,
645651
cosy: $padding-cosy,
@@ -2879,20 +2885,29 @@
28792885
display: flex;
28802886
align-items: center;
28812887
background: inherit;
2888+
overflow: hidden;
28822889
z-index: 3;
2890+
height: map.get($grid-header-height, 'comfortable');
28832891

2884-
&:not(&--row-area) {
2885-
height: map.get($grid-header-height, 'comfortable');
2892+
&--cosy {
2893+
height: map.get($grid-header-height, 'cosy');
2894+
padding: map.get($grid-header-padding, 'cosy');
2895+
}
2896+
2897+
&--compact {
2898+
height: map.get($grid-header-height, 'compact');
2899+
padding: map.get($grid-header-padding, 'compact');
28862900
}
28872901

28882902
padding: map.get($grid-header-padding, 'comfortable');
28892903
background-clip: border-box !important;
2890-
28912904
border-#{$left}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
28922905
border-#{$right}: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
28932906
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
28942907

28952908
igx-chips-area {
2909+
flex-wrap: nowrap;
2910+
28962911
> * {
28972912
margin-#{$right}: rem(8px);
28982913
}
@@ -2904,14 +2919,33 @@
29042919
}
29052920

29062921
%igx-grid__tr-pivot--row-area {
2922+
height: auto !important;
29072923
align-items: flex-end;
2908-
padding-bottom: $padding-comfortable;
2924+
padding-bottom: map.get($pivot-row-aria-padding, 'comfortable');
2925+
2926+
&--cosy{
2927+
padding-bottom: map.get($pivot-row-aria-padding, 'cosy');
2928+
}
2929+
2930+
&--compact{
2931+
padding-bottom: map.get($pivot-row-aria-padding, 'compact');
2932+
}
2933+
29092934
border-#{$left}: 0;
29102935
border-bottom: 0;
29112936
}
29122937

29132938
%igx-grid__tr-pivot--filter {
29142939
height: map.get($grid-header-height, 'comfortable');
2940+
2941+
&--cosy {
2942+
height: map.get($grid-header-height, 'cosy');
2943+
}
2944+
2945+
&--compact {
2946+
height: map.get($grid-header-height, 'compact');
2947+
}
2948+
29152949
border-left: 0;
29162950
border-right: 0;
29172951
border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');
@@ -2924,7 +2958,12 @@
29242958
%igx-grid__tr-pivot-group {
29252959
flex: 1;
29262960
}
2961+
2962+
%igx-grid__tr-pivot-toggle-icons {
2963+
display: inline-flex !important;
2964+
}
29272965
// Pivot grid END
29282966
}
29292967

29302968

2969+

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<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-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1"
3+
<div #pivotFilterContainer class="igx-grid__tr-pivot igx-grid__tr-pivot--filter" [style.min-width.px]="grid.pivotRowWidths - 1" [style.max-width.px]="grid.pivotRowWidths - 1"
44
(igxDragEnter)="onAreaDragEnter($event, filterArea, 2)" (igxDragLeave)="onAreaDragLeave($event, filterArea)"
55
igxDrop (dropped)="onDimDrop($event, filterArea, 2)" (pointerdown)="$event.preventDefault()">
66

@@ -9,11 +9,11 @@
99
<!-- Filter area -->
1010
<igx-chips-area #filterArea droppable='true'>
1111
<igx-chip *ngFor="let filter of grid.filterDimensions" [id]="filter.memberName" [draggable]="true"
12+
[displayDensity]="grid.displayDensity"
1213
[removable]="true" (remove)="filterRemoved($event)"
1314
(dragOver)="onDimDragOver($event, 2)"
1415
(dragLeave)="onDimDragLeave($event)"
15-
(dragDrop)="onDimDrop($event, filterArea, 2)"
16-
>
16+
(dragDrop)="onDimDrop($event, filterArea, 2)">
1717
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, filter)'>filter_list</igx-icon>
1818
{{filter.memberName}}
1919
</igx-chip>
@@ -29,12 +29,12 @@
2929
<!-- Columns area -->
3030
<igx-chips-area #colArea droppable='true'>
3131
<igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="true" [id]="col.memberName"
32+
[displayDensity]="grid.displayDensity"
3233
[removable]="true" (remove)="columnRemoved($event)"
3334
(dragOver)="onDimDragOver($event, 1)"
3435
(dragLeave)="onDimDragLeave($event)"
3536
(dragDrop)="onDimDrop($event, colArea, 1)"
36-
(click)="onChipSort($event, col, 1)"
37-
>
37+
(click)="onChipSort($event, col, 1)">
3838
<igx-icon igxPrefix>view_column</igx-icon>
3939
<igx-icon igxPrefix (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFilteringIconClick($event, col)'>filter_list</igx-icon>
4040
{{col.memberName}}
@@ -54,11 +54,12 @@
5454
<!-- Value area -->
5555
<igx-chips-area #valueArea droppable='true'>
5656
<igx-chip #currChip *ngFor="let value of grid.values" [draggable]="true" [id]="value.member"
57+
[displayDensity]="grid.displayDensity"
5758
[removable]="true" (remove)="valueRemoved($event)"
58-
(dragLeave)="onDimDragLeave($event)"
59-
(dragOver)="onDimDragOver($event)"
60-
(dragDrop)="onValueDrop($event, valueArea)">
61-
<div igxPrefix (click)='onSummaryClick($event, value, dropdown, currChip)' (pointerdown)='$event.stopPropagation()'
59+
(dragLeave)="onDimDragLeave($event)"
60+
(dragOver)="onDimDragOver($event)"
61+
(dragDrop)="onValueDrop($event, valueArea)">
62+
<div class="igx-grid__tr-pivot-toggle-icons" igxPrefix (click)='onSummaryClick($event, value, dropdown, currChip)' (pointerdown)='$event.stopPropagation()'
6263
[igxDropDownItemNavigation]="dropdown">
6364
<igx-icon>functions</igx-icon>
6465
<igx-icon>arrow_drop_down</igx-icon>
@@ -85,6 +86,7 @@
8586
<!-- Row area -->
8687
<igx-chips-area #rowArea droppable='true'>
8788
<igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="true" [id]="row.memberName"
89+
[displayDensity]="grid.displayDensity"
8890
[removable]="true" (remove)="rowRemoved($event)"
8991
(dragLeave)="onDimDragLeave($event)"
9092
(dragDrop)="onDimDrop($event, rowArea, 0)"

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

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
<div class="sample-column">
2-
<h4>Display Density</h4>
3-
<div class="density-chooser">
4-
<igx-buttongroup>
5-
<button igxButton [disabled]="grid1.displayDensity === compact"
6-
(click)="setDensity('compact')">Compact</button>
7-
<button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
8-
<button igxButton [disabled]="grid1.displayDensity === comfortable"
9-
(click)="setDensity('comfortable')">Comfortable</button>
10-
</igx-buttongroup>
11-
</div>
12-
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
13-
[pivotConfiguration]="pivotConfigHierarchy">
14-
</igx-pivot-grid>
1+
<div class="density-chooser">
2+
<igx-buttongroup>
3+
<button igxButton [disabled]="grid1.displayDensity === comfortable" (click)="setDensity('comfortable')">Comfortable</button>
4+
<button igxButton [disabled]="grid1.displayDensity === cosy" (click)="setDensity('cosy')">Cosy</button>
5+
<button igxButton [disabled]="grid1.displayDensity === compact" (click)="setDensity('compact')">Compact</button>
6+
</igx-buttongroup>
157
</div>
8+
<igx-pivot-grid #grid1 [data]="origData" [width]="'100%'" [height]="'100%'" [defaultExpandState]='true'
9+
[pivotConfiguration]="pivotConfigHierarchy">
10+
</igx-pivot-grid>

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
:host {
2-
display: block;
2+
display: flex;
3+
flex-direction: column;
34
height: 100%;
45
}
56

67
.density-chooser {
78
margin-bottom: 16px;
9+
max-width: 40%;
10+
}
11+
12+
igx-pivot-grid {
13+
flex: 1;
814
}
915

1016
:host ::ng-deep {

0 commit comments

Comments
 (0)