LP2015137 Tab order for admin splash link tables

Replaces row/column logic with CSS columns in the link table component
used in settings screens. This allows the user to tab through the
settings in alphabetical order, rather than the three-across groupings
that previously broke up similarly named settings.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>

diff --git a/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.css b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.css
new file mode 100644 (file)
index 0000000..465453b
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.css
@@ -0,0 +1,9 @@
+ul li {
+  line-height: 1.5;
+  list-style: none;
+  padding: .5rem;
+}
+
+ul li .material-icons {
+  font-size: 1rem;
+}
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.html b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.html
index 0d82279..1c573bc 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.html
@@ -1,22 +1,16 @@
-
-<div class="d-flex border-top border-light" 
-    *ngFor="let row of rowBuckets; let rowIdx = index">
-  <div class="flex-1 p-2" *ngFor="let col of colList">
-    <ng-container *ngIf="row[col]">
-      <!-- avoid mixing [href] and [routerLink] in one link, 
-          because routerLink will take precedence, even if it's empty -->
-      <ng-container *ngIf="row[col].url">
-        <a [href]="row[col].url" class="with-material-icon">
-          <span class="material-icons">edit</span>
-          <span>{{row[col].label}}</span>
+<ul [style.--columnCount]="this.columnCount">
+  <li *ngFor="let link of this.links; let linkIdx = index">
+    <ng-container *ngIf="link.url">
+        <a [href]="link.url" class="with-material-icon">
+          <span class="material-icons" aria-hidden="true">edit</span>
+          <span>{{link.label}}</span>
         </a>
       </ng-container>
-      <ng-container *ngIf="row[col].routerLink">
-        <a [routerLink]="row[col].routerLink" class="with-material-icon">
-          <span class="material-icons">edit</span>
-          <span>{{row[col].label}}</span>
+      <ng-container *ngIf="link.routerLink">
+        <a [routerLink]="link.routerLink" class="with-material-icon">
+          <span class="material-icons" aria-hidden="true">edit</span>
+          <span>{{link.label}}</span>
         </a>
       </ng-container>
-    </ng-container>
-  </div>
-</div>
+  </li>
+</ul>
\ No newline at end of file

diff --git a/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.ts b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.ts
index 9b06c92..ae9d0df 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/share/link-table/link-table.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnInit, AfterViewInit, Host} from '@angular/core';
+import {Component, Input, OnInit, Host} from '@angular/core';
 
 interface LinkTableLink {
     label: string;
@@ -8,44 +8,23 @@ interface LinkTableLink {
 
 @Component({
     selector: 'eg-link-table',
-    templateUrl: './link-table.component.html'
+    templateUrl: './link-table.component.html',
+    styleUrls: ['link-table.component.css'],
+    styles: [
+    `
+      ul {
+        column-count: var(--columnCount);
+      }
+    `
+    ]
 })
 
-export class LinkTableComponent implements AfterViewInit {
+export class LinkTableComponent {
     @Input() columnCount: number;
     links: LinkTableLink[];
-    rowBuckets: any[];
-    colList: number[];
-    colWidth: number;
 
     constructor() {
         this.links = [];
-        this.rowBuckets = [];
-        this.colList = [];
-    }
-
-    ngAfterViewInit() {
-        // table-ize the links
-        const rowCount = Math.ceil(this.links.length / this.columnCount);
-        this.colWidth = Math.floor(12 / this.columnCount); // Bootstrap 12-grid
-
-        for (let col = 0; col < this.columnCount; col++) {
-            this.colList.push(col);
-        }
-
-        // Modifying values in AfterViewInit without other activity
-        // happening can result in the modified values not getting
-        // displayed until some action occurs.  Modifing after
-        // via timeout works though.
-        setTimeout(() => {
-            for (let row = 0; row < rowCount; row++) {
-                this.rowBuckets[row] = [
-                    this.links[row],
-                    this.links[row + Number(rowCount)],
-                    this.links[row + Number(rowCount * 2)]
-                ];
-            }
-        });
     }
 }