WebClient - Angularjs Hotkeys Shortcut List - Doesn't scroll for longer lists

[Josh Stompro]

EG 3.3 - I'm working on adding other keyboard shortcuts to the AngularJS client and noticed that the list of keyboard shortcuts (shown by pressing ?) doesn't handle longer lists of shortcuts. When I added 8 more shortcuts the list just gets cut off when it flows off the screen, and there is now way to see the rest.

I don't know if the Angular shortcuts (ctrl+h in the Angular catalog) has the same problem.

Using the angular-hotkeys project, it looks like it is possible to apply a custom Cheatsheet template, which should allow for using more columns and scrolling.

https://github.com/chieffancypants/angular-hotkeys/

Josh

[Josh Stompro (u-launchpad-stompro-org)]

This has come up a few times in the Angular-hotkeys project github issues.

There are a few options such as enable scrolling, or multi columns.

https://github.com/chieffancypants/angular-hotkeys/issues/257
https://github.com/chieffancypants/angular-hotkeys/issues/248

Here is a fork of angular-hotkeys that has some fixes for examples.
https://github.com/chieffancypants/angular-hotkeys/compare/master...ylerjen:master

Josh

[Josh Stompro (u-launchpad-stompro-org)]

Adding both 2 columns and scrolling seems to work just fine.... but, how does one modify a module that is pulled in at build time.

Or maybe overriding is the way to go, don't try to modify the source?
/openils/var/web/js/ui/default/staff/build/css/hotkeys.min.css

Josh

[Josh Stompro (u-launchpad-stompro-org)]

After adding a bunch of hotkeys for bug 1862235 I needed to deal with this.

Working branch at user/stompro/lp1862230_angularjs_hotkey_cheatsheet_scroll

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/stompro/lp1862230_angularjs_hotkey_cheatsheet_scroll

This is just a quick and dirty way to override the css for the container. If there is a better spot for an override like that, I'm happy to change this.

Testing Notes:

This allows the angularjs hotkeys cheatsheet (Comes up when you press ? on Angularjs pages) to scrolls when there are more items than fit on the page.

If you resize the browser you can trigger this with the standard number of hotkeys.

Observe that without the patch you cannot see the hidden hotkeys, with the patch you can scroll down.

Josh

Josh

[Jessica Woolford (jwoolford)]

I tested this on my laptop without a monitor attached. The hotkey screen does scroll, but the focus is on the screen in the background. You have to click the hotkey screen to get it to scroll.

[Josh Stompro (u-launchpad-stompro-org)]

I looked at how to switch the focus to the list, but had no luck figuring it out.

Since this is just a stop gap for the AngularJS hotkey cheatsheet, until everything is coverted to Angular, and the plugin is dead (last commit 7 years ago) https://github.com/chieffancypants/angular-hotkeys

And because that seems to be how the project was designed (to not change the focus from the page behind)... maybe we could overlook that?

See the demo at http://chieffancypants.github.io/angular-hotkeys/#features to see that it doesn't take focus.

Josh