LP1829567 Angular access key improvements
authorBill Erickson <berickxx@gmail.com>
Thu, 1 Aug 2019 16:07:56 +0000 (12:07 -0400)
committerBill Erickson <berickxx@gmail.com>
Fri, 2 Aug 2019 18:10:14 +0000 (14:10 -0400)
1. Adds support for shift+ shortcuts.
2. Remove duplicate key assignments made within the same context.  This
   is especially useful in the navigation bar since some commands repeat
   from different menus.
3. Indicate in the key assignemnts help page when an assignemnt has be
   superseded by another assignment.
4. Open the help page in large-dialog mode for more room.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/eg2/src/app/share/accesskey/accesskey-info.component.html
Open-ILS/src/eg2/src/app/share/accesskey/accesskey.service.ts
Open-ILS/src/eg2/src/app/staff/staff.component.html

index ae584ce..8396ea5 100644 (file)
@@ -8,14 +8,23 @@
   </div>
   <div class="modal-body">
     <div class="row border-bottom">
   </div>
   <div class="modal-body">
     <div class="row border-bottom">
-      <div class="col-lg-3 p-1 border-right text-center" i18n>Command</div>
+      <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-6 p-1 border-right" i18n>Action</div>
-      <div class="col-lg-3 p-1" i18n>Context</div>
+      <div class="col-lg-2 p-1" i18n>Context</div>
+      <div class="col-lg-2 p-1" i18n>Active?</div>
     </div>
     <div class="row border-bottom" *ngFor="let a of assignments()">
     </div>
     <div class="row border-bottom" *ngFor="let a of assignments()">
-      <div class="col-lg-3 p-1 border-right text-center">{{a.key}}</div>
+      <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-6 p-1 border-right">{{a.desc}}</div>
-      <div class="col-lg-3 p-1">{{a.ctx}}</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>
+    <div class="row mt-2">
+      <div class="col-lg-12 font-italic" i18n>
+        If an assignment is not active, it means it was superseded by
+        an assignment from a different context using the same keyboard 
+        shortcut.
+      </div>
     </div>
   </div>
   <div class="modal-footer">
     </div>
   </div>
   <div class="modal-footer">
index 0b6302f..ecfe67a 100644 (file)
@@ -5,6 +5,7 @@ export interface AccessKeyAssignment {
     desc: string;     // human-friendly description
     ctx: string;      // template context
     action: Function; // handler function
     desc: string;     // human-friendly description
     ctx: string;      // template context
     action: Function; // handler function
+    shadowed?: boolean; // Has this assignemnt been shadowed by another.
 }
 
 @Injectable()
 }
 
 @Injectable()
@@ -17,7 +18,27 @@ export class AccessKeyService {
     constructor() {}
 
     assign(assn: AccessKeyAssignment): void {
     constructor() {}
 
     assign(assn: AccessKeyAssignment): void {
-        this.assignments.unshift(assn);
+        const list: AccessKeyAssignment[] = [];
+
+        // Avoid duplicate assignments for the same context.
+        // Most recent assignment always wins.
+        this.assignments.forEach(a => {
+            if (a.key === assn.key) {
+                if (a.ctx === assn.ctx) { 
+                    // If key and context match, keep only the most recent.
+                    return; 
+                } else {
+                    // An assignment within a different context shadows
+                    // an existing assignment.  Keep the assignment
+                    // but mark it as shadowed.
+                    a.shadowed = true;
+                }
+            }
+            list.unshift(a);
+        });
+        list.unshift(assn);
+
+        this.assignments = list;
     }
 
     /**
     }
 
     /**
@@ -31,6 +52,7 @@ export class AccessKeyService {
         let s = '';
         if (evt.ctrlKey || evt.metaKey) { s += 'ctrl+'; }
         if (evt.altKey) { s += 'alt+'; }
         let s = '';
         if (evt.ctrlKey || evt.metaKey) { s += 'ctrl+'; }
         if (evt.altKey) { s += 'alt+'; }
+        if (evt.shiftKey) { s += 'shift+'; }
         s += evt.key.toLowerCase();
 
         return s;
         s += evt.key.toLowerCase();
 
         return s;
index 7afcc32..9002fa8 100644 (file)
@@ -11,7 +11,7 @@
 <a egAccessKey keyCtx="base"
     keySpec="ctrl+h" i18n-keySpec
     keyDesc="Display AccessKey Info Dialog" i18n-keyDesc
 <a egAccessKey keyCtx="base"
     keySpec="ctrl+h" i18n-keySpec
     keyDesc="Display AccessKey Info Dialog" i18n-keyDesc
-    (click)="egAccessKeyInfo.open()">
+    (click)="egAccessKeyInfo.open({size: 'lg'})">
 </a>
 <a egAccessKey keyCtx="base"
     keySpec="shift+f10" i18n-keySpec
 </a>
 <a egAccessKey keyCtx="base"
     keySpec="shift+f10" i18n-keySpec