From: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Date: Fri, 9 Dec 2022 17:22:13 +0000 (-0600)
Subject: LP1999955 AccessKeys info style updates
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=e5771b849b5bf729501f036ee8e7b6f0f2f1c5e9;p=Evergreen.git

LP1999955 AccessKeys info style updates

Adds styles to the keyboard shortcuts to make them look more like
keys. Also adds striping to each row and makes the headers bold.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Josh Stompro <stomproj@larl.org>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>
---

diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css
new file mode 100644
index 0000000000..b672194f4a
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.css
@@ -0,0 +1,35 @@
+.modal-body .row {
+    margin: 0;
+}
+
+.modal-body .row:nth-of-type(odd) {
+    background: #f4f4f4;
+}
+
+.modal-body .row.shortcut-info {
+    background: #fff;
+    font-style: italic;
+}
+
+.modal-body .row-header {
+    font-weight: bold;
+}
+
+.shortcut-keycombo {
+    text-align: center;
+}
+
+kbd {
+    background-color:#e4e4e7;
+    border-radius:.2rem;
+    border: none;
+    box-shadow: 1px 1px 1px rgba(0,0,10,0.5);
+    color: #000;
+    margin: 0 .2em;
+    /* :first-letter requires a block-level element */
+    display: inline-block;
+}
+
+kbd:first-letter {
+    text-transform: uppercase;
+}
diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
index 8396ea5873..e528540814 100644
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
@@ -7,20 +7,25 @@
     </button>
   </div>
   <div class="modal-body">
-    <div class="row border-bottom">
-      <div class="col-lg-2 p-1 border-right text-center" i18n>Command</div>
-      <div class="col-lg-6 p-1 border-right" i18n>Action</div>
-      <div class="col-lg-2 p-1" i18n>Context</div>
-      <div class="col-lg-2 p-1" i18n>Active?</div>
+    <div class="row row-header border-bottom">
+      <div class="col-lg-2 p-1 border-right shortcut-keycombo" i18n>Command</div>
+      <div class="col-lg-6 p-1 border-right shortcut-action" i18n>Action</div>
+      <div class="col-lg-2 p-1 shortcut-context" i18n>Context</div>
+      <div class="col-lg-2 p-1 shortcut-status" i18n>Active?</div>
     </div>
     <div class="row border-bottom" *ngFor="let a of assignments()">
-      <div class="col-lg-2 p-1 border-right text-center">{{a.key}}</div>
-      <div class="col-lg-6 p-1 border-right">{{a.desc}}</div>
-      <div class="col-lg-2 p-1 border-right">{{a.ctx}}</div>
-      <div class="col-lg-2 p-1"><eg-bool [value]="!a.shadowed"></eg-bool></div>
+      <div class="col-lg-2 p-1 border-right shortcut-keycombo">
+        <ng-container *ngFor="let kbd of a.key.split('+'); last as isLastKey">
+          <kbd>{{kbd}}</kbd>
+          <span *ngIf="!isLastKey">+</span>
+        </ng-container>
+      </div>
+      <div class="col-lg-6 p-1 border-right shortcut-action">{{a.desc}}</div>
+      <div class="col-lg-2 p-1 border-right shortcut-context">{{a.ctx}}</div>
+      <div class="col-lg-2 p-1 shortcut-status"><eg-bool [value]="!a.shadowed"></eg-bool></div>
     </div>
-    <div class="row mt-2">
-      <div class="col-lg-12 font-italic" i18n>
+    <div class="row mt-2 shortcut-info">
+      <div class="col-lg-12" i18n>
         If an assignment is not active, it means it was superseded by
         an assignment from a different context using the same keyboard 
         shortcut.
diff --git a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
index d713ee60b6..bc6e7e1c00 100644
--- a/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.ts
@@ -1,13 +1,15 @@
 /**
  */
-import {Component, Input, OnInit} from '@angular/core';
+import {Component, Input, OnInit, ViewEncapsulation} from '@angular/core';
 import {AccessKeyService} from '@eg/share/accesskey/accesskey.service';
 import {DialogComponent} from '@eg/share/dialog/dialog.component';
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'eg-accesskey-info',
-  templateUrl: './accesskey-info.component.html'
+  templateUrl: './accesskey-info.component.html',
+  styleUrls: [ 'accesskey-info.component.css' ],
+  encapsulation: ViewEncapsulation.None
 })
 export class AccessKeyInfoComponent extends DialogComponent {