-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ui] general keyboard navigation: 1.3.4 release (#14138)
* Initialized keyboard service Neat but funky: dynamic subnav traversal 👻 generalized traverseSubnav method Shift as special modifier key Nice little demo panel Keyboard shortcuts keycard Some animation styles on keyboard shortcuts Handle situations where a link is deeply nested from its parent menu item Keyboard service cleanup helper-based initializer and teardown for new contextual commands Keyboard shortcuts modal component added and demo-ghost removed Removed j and k from subnav traversal Register and unregister methods for subnav plus new subnavs for volumes and volume register main nav method Generalizing the register nav method 12762 table keynav (#12975) * Experimental feature: shortcut visual hints * Long way around to a custom modifier for keyboard shortcuts * dynamic table and list iterative shortcuts * Progress with regular old tether * Delogging * Table Keynav tether fix, server and client navs, and fix to shiftless on modified arrow keys Go to Optimize keyboard link and storage key changed to g r parameterized jobs keyboard nav Dynamic numeric keynav for multiple tables (#13482) * Multiple tables init * URL-bind enumerable keyboard commands and add to more taskRow and allocationRows * Type safety and lint fixes * Consolidated push to keyCommands * Default value when removing keyCommands * Remove the URL-based removal method and perform a recompute on any add Get tests passing in Keynav: remove math helpers and a few other defensive moves (#13761) * Remove ember math helpers * Test fixes for jobparts/body * Kill an unneeded integration helper test * delog * Trying if disabling percy lets this finish * Okay so its not percy; try parallelism in circle * Percyless yet again * Trying a different angle to not have percy * Upgrade percy to 1.6.1 [ui] Keyboard nav: "u" key to go up a level (#13754) * U to go up a level * Mislabelled my conditional * Custom lint ignore rule * Custom lint ignore rule, this time with commas * Since we're getting rid of ember math helpers elsewhere, do the math ourselves here Replace ArrowLeft etc. with an ascii arrow (#13776) * Replace ArrowLeft etc. with an ascii arrow * non-mutative helper cleanup Keyboard Nav: let users rebind their shortcuts (#13781) * click-outside and shortcuts enabled/disabled toggle * Trap focus when modal open * Enabled/disabled saved to localStorage * Autofocus edit button on variable index * Modal overflow styles * Functional rebind * Saving rebinds to localStorage for all majors * Started on defaultCommandBindings * Modal header style and cancel rebind on escape * keyboardable keybindings w buttons instead of spans * recording and defaultvalues * Enter short-circuits rebind * Only some commands are rebindable, and dont show dupes * No unused get import * More visually distinct header on modal * Disallowed keys for rebind, showing buffer as you type, and moving dedupe to modal logic willDestroy hook to prevent tests from doubling/tripling up addEventListener on kb events remove unused tests Keyboard Navigation acceptance tests (#13893) * Acceptance tests for keyboard modal * a11y audit fix and localStorage clear * Bind/rebind/localStorage tests * Keyboard tests for dynamic nav and tables * Rebinder and assert expectation * Second percy snapshot showing hints no longer relevant Weird issue where linktos with query props specifically from the task-groups page would fail to route / hit undefined.shouldSuperCede errors Adds the concept of exclusivity to a keycommand, removing peers that also share its label Lintfix Changelog and PR feedback Changelog and PR feedback Fix to rebinding in firefox by blurring the now-disabled button on rebind (#14053) * Secure Variables shortcuts removed * Variable index route autofocus removed * Updated changelog entry * Updated changelog entry * Keynav docs (#14148) * Section added to the API Docs UI page * Added a note about disabling * Prev and Next order * Remove dev log and unneeded comments
- Loading branch information
1 parent
1bcd163
commit 0c1d2f9
Showing
64 changed files
with
1,483 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```release-note:improvement | ||
ui: add general keyboard navigation to the Nomad UI | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import Component from '@glimmer/component'; | ||
|
||
export default class AppBreadcrumbsComponent extends Component { | ||
isOneCrumbUp(iter = 0, totalNum = 0) { | ||
return iter === totalNum - 2; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
import { action } from '@ember/object'; | ||
import Component from '@glimmer/component'; | ||
import KeyboardShortcutModifier from 'nomad-ui/modifiers/keyboard-shortcut'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
export default class BreadcrumbsTemplate extends Component { | ||
@service router; | ||
|
||
@action | ||
traverseUpALevel(args) { | ||
const [path, ...rest] = args; | ||
this.router.transitionTo(path, ...rest); | ||
} | ||
|
||
get maybeKeyboardShortcut() { | ||
return this.args.isOneCrumbUp() ? KeyboardShortcutModifier : null; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,8 @@ | ||
import Component from '@ember/component'; | ||
import { tagName } from '@ember-decorators/component'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
@tagName('') | ||
export default class ClientSubnav extends Component {} | ||
export default class ClientSubnav extends Component { | ||
@service keyboard; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
{{#if this.keyboard.shortcutsVisible}} | ||
{{keyboard-commands (array this.escapeCommand)}} | ||
<div class="keyboard-shortcuts" | ||
{{on-click-outside | ||
(toggle "keyboard.shortcutsVisible" this) | ||
}} | ||
> | ||
<header> | ||
<button | ||
{{autofocus}} | ||
class="button is-borderless dismiss" | ||
type="button" | ||
{{on "click" (toggle "keyboard.shortcutsVisible" this)}} | ||
aria-label="Dismiss" | ||
> | ||
{{x-icon "cancel"}} | ||
</button> | ||
<h2>Keyboard Shortcuts</h2> | ||
<p>Click a key pattern to re-bind it to a shortcut of your choosing.</p> | ||
</header> | ||
<ul class="commands-list"> | ||
{{#each this.commands as |command|}} | ||
<li data-test-command-label={{command.label}}> | ||
<strong>{{command.label}}</strong> | ||
<span class="keys"> | ||
{{#if command.recording}} | ||
<span class="recording">Recording; ESC to cancel.</span> | ||
{{else}} | ||
{{#if command.custom}} | ||
<button type="button" class="reset-to-default" {{on "click" (action this.keyboard.resetCommandToDefault command)}}>reset to default</button> | ||
{{/if}} | ||
{{/if}} | ||
|
||
<button data-test-rebinder disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}> | ||
{{#each command.pattern as |key|}} | ||
<span>{{clean-keycommand key}}</span> | ||
{{/each}} | ||
</button> | ||
</span> | ||
</li> | ||
{{/each}} | ||
</ul> | ||
<footer> | ||
<strong>Keyboard shortcuts {{#if this.keyboard.enabled}}enabled{{else}}disabled{{/if}}</strong> | ||
<Toggle | ||
data-test-enable-shortcuts-toggle | ||
@isActive={{this.keyboard.enabled}} | ||
@onToggle={{this.toggleListener}} | ||
title="{{if this.keyboard.enabled "enable" "disable"}} keyboard shortcuts" | ||
/> | ||
</footer> | ||
</div> | ||
{{/if}} | ||
|
||
{{#if (and this.keyboard.enabled this.keyboard.displayHints)}} | ||
{{#each this.hints as |hint|}} | ||
<span | ||
{{did-insert (fn this.tetherToElement hint.element hint)}} | ||
{{will-destroy (fn this.untetherFromElement hint)}} | ||
data-test-keyboard-hint | ||
data-shortcut={{hint.pattern}} | ||
class="{{if hint.menuLevel "menu-level"}}" | ||
aria-hidden="true" | ||
> | ||
{{#each hint.pattern as |key|}} | ||
<span>{{key}}</span> | ||
{{/each}} | ||
</span> | ||
{{/each}} | ||
{{/if}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import Component from '@glimmer/component'; | ||
import { inject as service } from '@ember/service'; | ||
import { computed } from '@ember/object'; | ||
import { action } from '@ember/object'; | ||
import Tether from 'tether'; | ||
|
||
export default class KeyboardShortcutsModalComponent extends Component { | ||
@service keyboard; | ||
@service config; | ||
|
||
escapeCommand = { | ||
label: 'Hide Keyboard Shortcuts', | ||
pattern: ['Escape'], | ||
action: () => { | ||
this.keyboard.shortcutsVisible = false; | ||
}, | ||
}; | ||
|
||
/** | ||
* commands: filter keyCommands to those that have an action and a label, | ||
* to distinguish between those that are just visual hints of existing commands | ||
*/ | ||
@computed('keyboard.keyCommands.[]') | ||
get commands() { | ||
return this.keyboard.keyCommands.reduce((memo, c) => { | ||
if (c.label && c.action && !memo.find((m) => m.label === c.label)) { | ||
memo.push(c); | ||
} | ||
return memo; | ||
}, []); | ||
} | ||
|
||
/** | ||
* hints: filter keyCommands to those that have an element property, | ||
* and then compute a position on screen to place the hint. | ||
*/ | ||
@computed('keyboard.{keyCommands.length,displayHints}') | ||
get hints() { | ||
if (this.keyboard.displayHints) { | ||
return this.keyboard.keyCommands.filter((c) => c.element); | ||
} else { | ||
return []; | ||
} | ||
} | ||
|
||
@action | ||
tetherToElement(element, hint, self) { | ||
if (!this.config.isTest) { | ||
let binder = new Tether({ | ||
element: self, | ||
target: element, | ||
attachment: 'top left', | ||
targetAttachment: 'top left', | ||
targetModifier: 'visible', | ||
}); | ||
hint.binder = binder; | ||
} | ||
} | ||
|
||
@action | ||
untetherFromElement(hint) { | ||
if (!this.config.isTest) { | ||
hint.binder.destroy(); | ||
} | ||
} | ||
|
||
@action toggleListener() { | ||
this.keyboard.enabled = !this.keyboard.enabled; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import Component from '@glimmer/component'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
export default class PluginSubnavComponent extends Component { | ||
@service keyboard; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { LinkComponent } from '@ember/legacy-built-in-components'; | ||
import classic from 'ember-classic-decorator'; | ||
|
||
// Necessary for programmatic routing away pages with <LinkTo>s that contain @query properties. | ||
// (There's an issue with query param calculations in the new component that uses the router service) | ||
// https://github.com/emberjs/ember.js/issues/20051 | ||
|
||
@classic | ||
export default class SafeLinkToComponent extends LinkComponent {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,8 @@ | ||
import Component from '@ember/component'; | ||
import { tagName } from '@ember-decorators/component'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
@tagName('') | ||
export default class ServerSubnav extends Component {} | ||
export default class ServerSubnav extends Component { | ||
@service keyboard; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import Component from '@glimmer/component'; | ||
import { inject as service } from '@ember/service'; | ||
|
||
export default class StorageSubnavComponent extends Component { | ||
@service keyboard; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.