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 (file)
index 0000000..b672194
--- /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 8396ea5..e528540 100644 (file)
--- 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 d713ee6..bc6e7e1 100644 (file)
--- 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 {