Repair popovers and context menus

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

diff --git a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
index 6992aae..e1eeae7 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid-body-cell.component.html
@@ -1,8 +1,8 @@
 
-<!-- <span *ngIf="!column.cellTemplate"
+<div *ngIf="!column.cellTemplate"
   [ngbTooltip]="column.disableTooltip ? null : context.getRowColumnValue(row, column)"
   placement="top-left"
-  triggers="mouseenter:mouseleave"> -->
+  triggers="mouseenter:mouseleave">
   <ng-container *ngIf="column.datatype === 'bool'">
     <eg-bool [value]="context.getRowColumnValue(row, column)"
       [ternary]="column.ternaryBool">
@@ -11,15 +11,15 @@
   <ng-container *ngIf="column.datatype !== 'bool'">
     {{context.getRowColumnValue(row, column)}}
   </ng-container>
-<!-- </span> -->
-<!-- <span *ngIf="column.cellTemplate" 
+</div>
+<div *ngIf="column.cellTemplate" 
   [ngbTooltip]="column.disableTooltip ? null : column.cellTemplate"
   placement="top-left"
   #tooltip="ngbTooltip" 
   (mouseenter)="tooltip.open(column.getCellContext(row))"
-  (mouseleave)="tooltip.close()" triggers="manual"> -->
+  (mouseleave)="tooltip.close()" triggers="manual">
   <ng-container #templateContainer
     *ngTemplateOutlet="column.cellTemplate; context: column.getCellContext(row)">
   </ng-container> 
-<!-- </span> -->
+</div>
 

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 f59dd13..f9dea6a 100644 (file)
--- 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
@@ -41,19 +41,25 @@
     <!-- contextMenu applied to cells instead of rows so the position
          of the popover is close to the mouse.  As of writing, no way
          to position the popover at the mouse -->
-    <td class="eg-grid-cell eg-grid-body-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}} eg-grid-class-{{context.idlClass}} {{context.cellClassCallback(row, col)}}"
+    <td class="eg-grid-cell eg-grid-body-cell eg-grid-col-{{col.name}} eg-grid-type-{{col.datatype}}  {{context.cellClassCallback(row, col)}}"
       [ngClass]="{'eg-grid-cell-overflow': context.overflowCells}"
-      (dblclick)="onRowDblClick(row)"
-      (click)="onRowClick($event, row, idx)"
-      #rowContextMenu="ngbPopover"
-      popoverTitle="Actions for Selected Rows" i18n-popoverTitle
-      (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
-      [ngbPopover]="contextMenu"
-      placement="bottom"
-      triggers="manual"
       *ngFor="let col of context.columnSet.displayColumns()">
-        <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
-        </eg-grid-body-cell>
+        <div class="eg-grid-cell-contents" (dblclick)="onRowDblClick(row)"
+          (click)="onRowClick($event, row, idx)"
+          #rowContextMenu="ngbPopover"
+          popoverTitle="Actions for Selected Rows" i18n-popoverTitle
+          (contextmenu)="onRowContextClick($event, row, rowContextMenu)"
+          [ngbPopover]="contextMenu"
+          placement="bottom"
+          triggers="manual">  
+          <eg-grid-body-cell [context]="context" [row]="row" [column]="col">
+          </eg-grid-body-cell>
+        </div>
       </td>
+
+      <ng-template class="visually-hidden" #contextMenu let-gridContext="gridContext">
+        <eg-grid-toolbar-actions-menu [gridContext]="gridContext" [viaContextMenu]="true">
+        </eg-grid-toolbar-actions-menu>
+      </ng-template>
   </tr>
 

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 a0a664b..326cc39 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
+++ b/Open-ILS/src/eg2/src/app/share/grid/grid.component.css
@@ -146,11 +146,27 @@
     max-width: initial;
 }
 
-/* GRID COLUMN WIDTHS */
-/* 
-Sets up column widths and text alignment for eg-grid tables according to
-datatype, column name, and IDL class. Use more specific combinations in
-components' CSS to override the default width.
+/* Popovers' container needs to be inside <td> and should be the same size */
+.eg-grid-cell-contents {
+  height: 100%;
+  width: 100%;
+}
+
+/* Firefox td > div height fix */
+.eg-grid tr, 
+.eg-grid th, 
+.eg-grid td {
+  height: 100%;
+}
+
+/* GRID PADDING */
+/* Sets up basic padding for table headers and cells. See the widths and
+alignment section below for some overrides for specific data types and formats,
+such as numeric cells that should be right-aligned.
+
+Padding should be set on .eg-grid-cell-contents rather than its parent <td>.
+This div exists to house the popovers, and should take up the full unpadded
+height and width of the cell.
 /**/
 
 /* override Bootstrap's table settings */
@@ -159,24 +175,28 @@ components' CSS to override the default width.
 }
 
 .eg-grid th,
-.eg-grid td {
+.eg-grid td .eg-grid-cell-contents {
   padding: .2rem .5rem;
-  /*
-  width: min-content;
-  /**/
 }
 
 .eg-grid.compact th,
-.eg-grid.compact td {
+.eg-grid.compact td .eg-grid-cell-contents {
   line-height: 1.4;
   padding: .1rem .5rem .1rem .1rem;
 }
 
 .eg-grid.wide th,
-.eg-grid.wide td {
+.eg-grid.wide td .eg-grid-cell-contents {
   padding: .5rem;
 }
 
+/* GRID COLUMN WIDTH AND ALIGNMENT */
+/* 
+Sets up column widths and text alignment for eg-grid tables according to
+datatype, column name, and IDL class. Use more specific combinations in
+components' CSS to override the default width.
+/**/
+
 .eg-grid th {
   vertical-align: bottom;
 }
@@ -203,17 +223,25 @@ components' CSS to override the default width.
 .eg-grid-number-cell,
 .eg-grid-type-id,
 .eg-grid-type-number,
-.eg-grid-type-money {
+.eg-grid-type-money,
+.eg-grid-col-circ_count {
   font-variant-numeric: tabular-nums lining-nums;
   text-align: right;
 }
 
-.compact .eg-grid-type-id,
-.compact .eg-grid-type-number,
-.compact .eg-grid-type-money {
+.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 {
   padding: .1rem .25rem .1rem .4rem;
 }
 
+/* These contain numbers we might want to compare, but should not be aligned right */
+.eg-grid-col-callnumber,
+.eg-grid-col-barcode {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
 .eg-grid-col-name {
   min-width: 10ch;
   white-space: nowrap;

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
index 9895bef..b613f99 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/record/copies.component.html
@@ -6,17 +6,17 @@
   </div>
   <div>
     <a routerLink="/staff/cat/volcopy/holdings/callnumber/{{copy.call_number}}"
-      target="_blank" i18n aria-describedby="copy-callnumber-{{copy.call_number}}">Edit</a> 
+      target="_blank" i18n attr.aria-describedby="copy-callnumber-{{copy.call_number}}">Edit</a> 
   </div>
 </ng-template>
 
 <ng-template #barcodeTemplate let-copy="row" let-context="userContext">
   <div id="copy-barcode-{{copy.id}}">{{copy.barcode}}</div>
   <div>
-  <a target="_blank" aria-describedby="copy-barcode-{{copy.id}}"
+  <a target="_blank" attr.aria-describedby="copy-barcode-{{copy.id}}"
     href="/eg/staff/cat/item/{{copy.id}}" i18n>View</a>
     <ng-container *ngIf="context.editable(copy)">
-      | <a target="_blank" aria-describedby="copy-barcode-{{copy.id}}"
+      | <a target="_blank" attr.aria-describedby="copy-barcode-{{copy.id}}"
         routerLink="/staff/cat/volcopy/attrs/item/{{copy.id}}" i18n>Edit</a>
     </ng-container>
   </div>
@@ -28,7 +28,7 @@
       <a routerLink="/staff/catalog/hold/C"
         [queryParams]="{target: copy.id}"
         queryParamsHandling="merge" i18n
-        aria-describedby="copy-barcode-{{copy.id}}">
+        attr.aria-describedby="copy-barcode-{{copy.id}}">
         Item Hold
       </a>
     </div>
@@ -36,7 +36,7 @@
       <a routerLink="/staff/catalog/hold/V"
         [queryParams]="{target: copy.call_number}"
         queryParamsHandling="merge" i18n
-        aria-describedby="copy-callnumber-{{copy.call_number}}">
+        attr.aria-describedby="copy-callnumber-{{copy.call_number}}">
         Call Number Hold
       </a>
     </div>
@@ -48,7 +48,7 @@
   <div *ngFor="let course of copy._courses">
     <div class="visually-hidden" id="course-name-{{course.id()}}">{{course.name()}}</div>
     <a routerLink="/staff/admin/local/asset/course_list/{{course.id()}}"
-    aria-describedby="course-name-{{course.id()}}">
+    attr.aria-describedby="course-name-{{course.id()}}">
       {{course.course_number()}}
     </a>
   </div>