From: Stephanie Leary <stephanie.leary@equinoxoli.org>
Date: Thu, 16 Mar 2023 18:09:27 +0000 (+0000)
Subject: More popover repairs; column/row scope
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=557cd94d6cd799f22c3668fac08293f3d7b36336;p=working%2FEvergreen.git

More popover repairs; column/row scope

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
---

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
index f9dea6a872..3148424aeb 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body.component.html
@@ -4,12 +4,13 @@
   tabindex=1 so the grid body can capture keyboard events.
 -->
 
-  <tr role="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
+  <tr scope="row" class="eg-grid-row eg-grid-body-row {{context.rowClassCallback(row)}}"
     [ngClass]="{'selected': context.rowSelector.contains(context.getRowIndex(row))}"
     *ngFor="let row of context.dataSource.getPageOfRows(context.pager); let idx = index">
 
     <ng-container *ngIf="!context.disableSelect">
       <td class="eg-grid-cell eg-grid-checkbox-cell">
+        <div class="eg-grid-cell-contents">
         <input type='checkbox' 
           [ngModel]="context.rowSelector.indexes[context.getRowIndex(row)]"
           (ngModelChange)="context.rowSelector.toggle(context.getRowIndex(row))"
@@ -20,21 +21,24 @@
           [ngbPopover]="contextMenu"
           placement="right"
           triggers="manual">
+        </div>
       </td>
     </ng-container>
     <td class="eg-grid-cell eg-grid-number-cell">
-      {{context.pager.rowNumber(idx)}}
+      <div class="eg-grid-cell-contents">{{context.pager.rowNumber(idx)}}</div>
     </td>
     <td *ngIf="context.rowFlairIsEnabled" class="eg-grid-cell eg-grid-flair-cell">
       <!-- using *ngIf allows us to assign the flair callback to a value,
             obviating the need for multiple calls of the same function -->
       <ng-container *ngIf="context.rowFlairCallback(row); let flair">
         <ng-container *ngIf="flair.icon">
+          <div class="eg-grid-cell-contents">
           <!-- tooltip is disabled when no title is set -->
           <span class="material-icons"
             ngbTooltip="{{flair.title || ''}}" triggers="mouseenter:mouseleave">
             {{flair.icon}}
           </span>
+          </div>
         </ng-container>
       </ng-container>
     </td>
@@ -57,6 +61,7 @@
         </div>
       </td>
 
+      <!-- This is set to visually-hidden so its presence in a <tr> doesn't disrupt table columns -->
       <ng-template class="visually-hidden" #contextMenu let-gridContext="gridContext">
         <eg-grid-toolbar-actions-menu [gridContext]="gridContext" [viaContextMenu]="true">
         </eg-grid-toolbar-actions-menu>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
index 7734ee3dcd..6511a3ad1e 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-header.component.html
@@ -2,20 +2,21 @@
 
 <tr row="row" class="eg-grid-row eg-grid-header-row">
   <ng-container *ngIf="!context.disableSelect">
-    <th class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
+    <th scope="col" class="eg-grid-cell eg-grid-header-cell eg-grid-checkbox-cell">
       <input type='checkbox' (click)="handleBatchSelect($event)"
         i18n-aria-label aria-label="All rows"
         [(ngModel)]="batchRowCheckbox">
     </th>
   </ng-container>
-  <th class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
+  <th scope="col" class="eg-grid-cell eg-grid-header-cell eg-grid-number-cell">
     <span i18n="number|Row Number Header">#</span>
   </th>
-  <th *ngIf="context.rowFlairIsEnabled"
+  <th *ngIf="context.rowFlairIsEnabled" scope="col" 
     class="eg-grid-cell eg-grid-header-cell eg-grid-flair-cell">
     <span class="material-icons">notifications</span>
   </th>
   <th *ngFor="let col of context.columnSet.displayColumns()"
+    scope="col" 
     draggable="true"
     (dragstart)="dragColumn = col"
     (drop)="onColumnDrop(col)"
@@ -39,11 +40,11 @@
   <ng-container *ngIf="!context.disableSelect">
     <td class="eg-grid-cell eg-grid-header-cell"></td>
   </ng-container>
-  <th class="eg-grid-cell eg-grid-header-cell"></th>
-  <th *ngIf="context.rowFlairIsEnabled" 
+  <th scope="col" class="eg-grid-cell eg-grid-header-cell"></th>
+  <th *ngIf="context.rowFlairIsEnabled" scope="col" 
     class="eg-grid-cell eg-grid-header-cell {{context.idlFieldDef}} eg-grid-class-{{context.idlClass}}"></th>
 
-  <th *ngFor="let col of context.columnSet.displayColumns()" 
+  <th *ngFor="let col of context.columnSet.displayColumns()" scope="col" 
     class="eg-grid-cell eg-grid-filter-control-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}}">
     <eg-grid-filter-control [context]="context" [col]="col"></eg-grid-filter-control>
   </th>
diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
index 326cc39947..6e95476148 100644
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -23,9 +23,6 @@
     outline: none; /* for keyboard events */
 }
 
-.eg-grid-body-row {
-}
-
 .eg-grid-body-row.selected, 
 .eg-grid-column-config-dialog .visible {
   color: #004085;
@@ -48,9 +45,6 @@
     white-space: normal;
 }
 
-.eg-grid-body-cell {
-}
-
 .eg-grid-header-cell {
   font-weight: bold;
   white-space: normal;
@@ -101,7 +95,7 @@
 .eg-grid-column-width-icon {
   cursor: pointer;
   font-size: 18px;
-  color: #007bff;
+  color: #0A58CA;
 }
 
 .eg-grid-column-config-dialog {
@@ -153,10 +147,12 @@
 }
 
 /* Firefox td > div height fix */
-.eg-grid tr, 
-.eg-grid th, 
-.eg-grid td {
-  height: 100%;
+@-moz-document url-prefix() {
+  .eg-grid tr, 
+  .eg-grid th, 
+  .eg-grid td {
+    height: 100%;
+  }
 }
 
 /* GRID PADDING */
@@ -229,10 +225,10 @@ components' CSS to override the default width.
   text-align: right;
 }
 
-.compact .eg-grid-type-id .eg-grid-cell-contents,
-.compact .eg-grid-type-number .eg-grid-cell-contents,
-.compact .eg-grid-type-money .eg-grid-cell-contents,
-.compact .eg-grid-col-circ_count .eg-grid-cell-contents {
+.compact td.eg-grid-type-id .eg-grid-cell-contents,
+.compact td.eg-grid-type-number .eg-grid-cell-contents,
+.compact td.eg-grid-type-money .eg-grid-cell-contents,
+.compact td.eg-grid-col-circ_count .eg-grid-cell-contents {
   padding: .1rem .25rem .1rem .4rem;
 }