Skip to content

Commit 1b7821c

Browse files
author
MPopov
committed
fix(gird): actions order and border
1 parent bfaaec4 commit 1b7821c

File tree

9 files changed

+56
-46
lines changed

9 files changed

+56
-46
lines changed

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,7 +1049,7 @@
10491049
background: inherit;
10501050
z-index: 4;
10511051
cursor: move;
1052-
order: -1;
1052+
border-right: 1px solid transparent;
10531053

10541054
%igx-icon-display {
10551055
width: $drag-icon-size;
@@ -1711,9 +1711,6 @@
17111711
display: flex;
17121712
justify-content: center;
17131713
align-items: center;
1714-
border-#{$right}: --var($theme, 'header-border-width')
1715-
--var($theme, 'header-border-style')
1716-
--var($theme, 'header-border-color');
17171714
background: inherit;
17181715
z-index: 4;
17191716
}
@@ -2637,8 +2634,6 @@
26372634
cursor: pointer;
26382635
z-index: 3;
26392636
color: --var($theme, 'expand-icon-color');
2640-
border-#{$right}: 1px solid --var($theme, 'header-border-color');
2641-
order: 2;
26422637

26432638
&:focus {
26442639
outline: none;
@@ -2775,6 +2770,12 @@
27752770
}
27762771
}
27772772
}
2773+
2774+
%igx-grid__tr-action {
2775+
&:last-of-type {
2776+
border-#{$right}: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color');
2777+
}
2778+
}
27782779
}
27792780

27802781

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
</ng-container>
1414
<ng-container *ngIf="this.showRowSelectors">
15-
<div class="igx-grid__cbx-selection" (pointerdown)="$event.preventDefault()" (click)="onRowSelectorClick($event)">
15+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (pointerdown)="$event.preventDefault()" (click)="onRowSelectorClick($event)">
1616
<ng-template *ngTemplateOutlet="
1717
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
1818
context: { $implicit: { index: viewIndex, rowID: rowID, selected: selected }}">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
3737
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
3838
<ng-container *ngIf="rowDraggable">
39-
<div class="igx-grid__drag-indicator" [ngClass]="{
39+
<div class="igx-grid__drag-indicator igx-grid__tr-action" [ngClass]="{
4040
'igx-grid__drag-indicator--header': !isRowSelectable
4141
}" (pointerdown)="$event.preventDefault()" #headerDragContainer>
4242
<div style="visibility: hidden;">
@@ -47,7 +47,7 @@
4747
</div>
4848
</ng-container>
4949
<ng-container *ngIf="showRowSelectors">
50-
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
50+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
5151
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
5252
}" (pointerdown)="$event.preventDefault()">
5353
<ng-template #headSelector

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<ng-container #defaultGroupRow>
22

33
<ng-container *ngIf="rowDraggable">
4-
<div class="igx-grid__drag-indicator">
4+
<div class="igx-grid__drag-indicator igx-grid__tr-action">
55
<igx-icon [style.visibility]="'hidden'">drag_indicator</igx-icon>
66
</div>
77
</ng-container>
88

99
<ng-container *ngIf="showRowSelectors">
10-
<div class="igx-grid__cbx-selection" style="background: none;" (pointerdown)="$event.preventDefault()"
10+
<div class="igx-grid__cbx-selection igx-grid__tr-action" style="background: none;" (pointerdown)="$event.preventDefault()"
1111
(click)="onGroupSelectorClick($event)">
1212
<ng-template #groupByRowSelector *ngTemplateOutlet="
1313
this.grid.groupByRowSelectorTemplate ? this.grid.groupByRowSelectorTemplate : groupByRowSelectorBaseTemplate;

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

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,9 @@
1111
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0"
1212
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
1313
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
14-
<div #headerHierarchyExpander (click)="toggleAll()" (mousedown)='$event.preventDefault()' [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
15-
'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header': hasExpandableChildren,
16-
'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
17-
'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
18-
}">
19-
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
20-
</div>
14+
<!-- Drag indicator -->
2115
<ng-container *ngIf="rowDraggable">
22-
<div class="igx-grid__drag-indicator" [ngClass]="{
16+
<div class="igx-grid__drag-indicator igx-grid__tr-action" [ngClass]="{
2317
'igx-grid__drag-indicator--header': !isRowSelectable
2418
}" (pointerdown)='$event.preventDefault()' #headerDragContainer>
2519
<div style="visibility: hidden;">
@@ -29,12 +23,14 @@
2923
</div>
3024
</div>
3125
</ng-container>
26+
27+
<!-- Select All Row -->
3228
<ng-container *ngIf="showRowSelectors">
33-
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
29+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
3430
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible
3531
}" (pointerdown)='$event.preventDefault()'>
3632
<ng-template #headSelector
37-
*ngTemplateOutlet="
33+
*ngTemplateOutlet="
3834
this.headSelectorTemplate ? this.headSelectorTemplate : headSelectorBaseTemplate;
3935
context: { $implicit: {
4036
selectedCount: this.selectionService.filteredSelectedRowIds.length,
@@ -44,27 +40,37 @@
4440
</ng-template>
4541
</div>
4642
</ng-container>
43+
44+
<!-- Expand all -->
45+
<div #headerHierarchyExpander (click)="toggleAll()" (mousedown)='$event.preventDefault()' [hidden]='!hasExpandableChildren || !hasVisibleColumns' [ngClass]="{
46+
'igx-grid__hierarchical-expander igx-grid__hierarchical-expander--header igx-grid__tr-action': hasExpandableChildren,
47+
'igx-grid__hierarchical-expander--push': filteringService.isFilterRowVisible,
48+
'igx-grid__hierarchical-expander--no-border': isRowSelectable || rowDraggable
49+
}">
50+
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }"></ng-container>
51+
</div>
52+
4753
<ng-container *ngIf="pinnedColumns.length > 0 && isPinningToStart">
4854
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
4955
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
50-
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
56+
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
5157
</ng-template>
5258
</ng-container>
5359
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel"
54-
[igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
55-
[igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'
56-
[igxForSizePropName]='"calcPixelWidth"' #hContainer>
60+
[igxForScrollOrientation]="'horizontal'" [igxForScrollContainer]="parentVirtDir"
61+
[igxForContainerSize]='unpinnedWidth' [igxForTrackBy]='trackColumnChanges'
62+
[igxForSizePropName]='"calcPixelWidth"' #hContainer>
5763
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
58-
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
64+
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
5965
</ng-template>
6066
<ng-container *ngIf="pinnedColumns.length > 0 && !isPinningToStart">
6167
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
6268
<igx-grid-header-group
63-
[column]="col"
64-
[gridID]="id"
65-
[style.min-width]="getHeaderGroupWidth(col)"
66-
[style.flex-basis]="getHeaderGroupWidth(col)"
67-
[style.left]="col.rightPinnedOffset">
69+
[column]="col"
70+
[gridID]="id"
71+
[style.min-width]="getHeaderGroupWidth(col)"
72+
[style.flex-basis]="getHeaderGroupWidth(col)"
73+
[style.left]="col.rightPinnedOffset">
6874
</igx-grid-header-group>
6975
</ng-template>
7076
</ng-container>
@@ -173,7 +179,6 @@
173179
</div>
174180
</div>
175181

176-
177182
<div class="igx-grid__tfoot" tabindex="0" (focus)="navigation.focusFirstCell(false)" [attr.aria-activedescendant]="activeDescendant"
178183
(keydown)="navigation.summaryNav($event)" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
179184
<igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight'

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

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<ng-container *ngTemplateOutlet='addRow ? addTemp : defaultTemp'></ng-container>
32
<ng-template #defaultExpandedTemplate>
43
<igx-icon [isActive]='!added' fontSet="material">expand_more</igx-icon>
@@ -18,18 +17,16 @@
1817
</div>
1918
</ng-template>
2019
<ng-template #defaultTemp>
21-
<div (click)="expanderClick($event)" (mousedown)='$event.preventDefault()' [ngClass]="expanderClassResolved" *ngIf="hasChildren" #expander>
22-
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }">
23-
</ng-container>
24-
</div>
25-
20+
<!-- Drag indicator -->
2621
<ng-container *ngIf="rowDraggable">
2722
<div [class]="resolveDragIndicatorClasses" [igxRowDrag]="this" (click)="$event.stopPropagation()" [ghostTemplate]="this.grid.getDragGhostCustomTemplate()" (pointerdown)="$event.preventDefault()">
28-
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
23+
<ng-container *ngTemplateOutlet="this.grid.dragIndicatorIconTemplate ? this.grid.dragIndicatorIconTemplate : this.grid.dragIndicatorIconBase"></ng-container>
2924
</div>
3025
</ng-container>
26+
27+
<!-- Select Row -->
3128
<ng-container *ngIf="showRowSelectors">
32-
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
29+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
3330
<ng-template *ngTemplateOutlet="
3431
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
3532
context: { $implicit: {
@@ -42,6 +39,12 @@
4239
</div>
4340
</ng-container>
4441

42+
<!-- Row Expander -->
43+
<div (click)="expanderClick($event)" (mousedown)='$event.preventDefault()' [ngClass]="expanderClassResolved" *ngIf="hasChildren" #expander>
44+
<ng-container *ngTemplateOutlet="iconTemplate; context: { $implicit: this }">
45+
</ng-container>
46+
</div>
47+
4548
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
4649
<ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
4750
</ng-container>
@@ -123,4 +126,4 @@
123126
[displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)">
124127
</igx-hierarchical-grid-cell>
125128
</ng-template>
126-
</ng-template>
129+
</ng-template>

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,14 @@ import { IgxHierarchicalGridCellComponent } from './hierarchical-cell.component'
2222
export class IgxHierarchicalRowComponent extends IgxRowDirective<IgxHierarchicalGridComponent> {
2323

2424
protected expanderClass = 'igx-grid__hierarchical-expander';
25+
protected rolActionClass = 'igx-grid__tr-action';
2526

2627
/**
2728
* @hidden
2829
*/
2930
public get expanderClassResolved() {
3031
return {
31-
[this.expanderClass]: !this.pinned || this.disabled,
32+
[`${this.expanderClass} ${this.rolActionClass}`]: !this.pinned || this.disabled,
3233
[`${this.expanderClass}--empty`]: this.pinned && !this.disabled
3334
};
3435
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</div>
1313
</ng-container>
1414
<ng-container *ngIf="showRowSelectors">
15-
<div class="igx-grid__cbx-selection" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
15+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onRowSelectorClick($event)" (pointerdown)="$event.preventDefault()">
1616
<ng-template *ngTemplateOutlet="
1717
this.grid.rowSelectorTemplate ? this.grid.rowSelectorTemplate : rowSelectorBaseTemplate;
1818
context: { $implicit: { index: viewIndex, rowID: rowID, selected: selected }}">
@@ -173,4 +173,4 @@
173173
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
174174
</ng-template>
175175
</ng-template>
176-
</ng-template>
176+
</ng-template>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
1111
class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
1212
<ng-container *ngIf="rowDraggable">
13-
<div class="igx-grid__drag-indicator" (pointerdown)="$event.preventDefault()" #headerDragContainer>
13+
<div class="igx-grid__drag-indicator igx-grid__tr-action" (pointerdown)="$event.preventDefault()" #headerDragContainer>
1414
<div style="visibility: hidden;">
1515
<ng-container
1616
*ngTemplateOutlet="this.dragIndicatorIconTemplate ? this.dragIndicatorIconTemplate : this.dragIndicatorIconBase">
@@ -19,7 +19,7 @@
1919
</div>
2020
</ng-container>
2121
<ng-container *ngIf="showRowSelectors">
22-
<div class="igx-grid__cbx-selection" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
22+
<div class="igx-grid__cbx-selection igx-grid__tr-action" (click)="onHeaderSelectorClick($event)" #headerSelectorContainer [ngClass]="{
2323
'igx-grid__cbx-selection--push': filteringService.isFilterRowVisible }" (pointerdown)="$event.preventDefault()">
2424
<ng-template #headSelector
2525
*ngTemplateOutlet="

0 commit comments

Comments
 (0)