]> git.evergreen-ils.org Git - Evergreen.git/blob - Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
LP1816480 Angular grid ARIA improvements
[Evergreen.git] / Open-ILS / src / eg2 / src / app / share / grid / grid-header.component.html
1
2 <div row="row" class="eg-grid-row eg-grid-header-row">
3   <ng-container *ngIf="!context.disableSelect">
4     <div role="columnheader"
5       class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell eg-grid-cell-skinny">
6       <input type='checkbox' (click)="handleBatchSelect($event)"
7         [(ngModel)]="batchRowCheckbox">
8     </div>
9   </ng-container>
10   <div role="columnheader"
11     class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell eg-grid-cell-skinny">
12     <span i18n="number|Row Number Header">#</span>
13   </div>
14   <div *ngIf="context.rowFlairIsEnabled"
15     role="columnheader"
16     class="eg-grid-cell eg-grid-header-cell eg-grid-flair-cell">
17     <span class="material-icons">notifications</span>
18   </div>
19   <div role="columnheader"
20     *ngFor="let col of context.columnSet.displayColumns()"
21     draggable="true"
22     (dragstart)="dragColumn = col"
23     (drop)="onColumnDrop(col)"
24     (dragover)="onColumnDragEnter($event, col)"
25     (dragleave)="onColumnDragLeave($event, col)"
26     [ngClass]="{'dragover' : col.isDragTarget}"
27     class="eg-grid-cell eg-grid-header-cell" [ngStyle]="{flex:col.flex}">
28     <a class="sortable label-with-material-icon" *ngIf="col.isSortable"
29       (click)="sortOneColumn(col)">
30       <span class="eg-grid-header-cell-sort-label">{{col.label}}</span>
31       <span class="material-icons eg-grid-header-cell-sort-arrow"
32         *ngIf="isColumnSorting(col, 'ASC')">arrow_upwards</span>
33       <span class="material-icons eg-grid-header-cell-sort-arrow"
34         *ngIf="isColumnSorting(col, 'DESC')">arrow_downwards</span>
35     </a>
36     <span *ngIf="!col.isSortable">{{col.label}}</span>
37   </div>
38 </div>
39