open-nomad/ui/app/templates/components/gutter-menu.hbs
Phil Renaud cbd4deedf8
[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
2022-08-17 12:59:33 -04:00

149 lines
4 KiB
Handlebars

<div
data-test-gutter-menu
class="page-column is-left {{if this.isOpen "is-open"}}"
{{did-insert this.keyboard.registerNav type="main"}}
>
<div class="gutter {{if this.isOpen "is-open"}}">
<header class="collapsed-menu {{if this.isOpen "is-open"}}">
<span
data-test-gutter-gutter-toggle
class="gutter-toggle"
aria-label="menu"
onclick={{action this.onHamburgerClick}}
>
<HamburgerMenu />
</span>
<span class="logo-container">
<NomadLogo />
</span>
</header>
<aside class="menu">
{{#if this.system.shouldShowRegions}}
<div class="collapsed-only">
<p class="menu-label">
Region
{{if this.system.shouldShowNamespaces "& Namespace"}}
</p>
<ul class="menu-list">
<li>
<div class="menu-item is-wide">
<RegionSwitcher />
</div>
</li>
</ul>
</div>
{{/if}}
<ul class="menu-list">
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "j") }}>
<LinkTo
@route="jobs"
@activeClass="is-active"
data-test-gutter-link="jobs"
>
Jobs
</LinkTo>
</li>
{{#if (can "accept recommendation")}}
<li
{{keyboard-shortcut
menuLevel=true
pattern=(array "g" "o")
action=(action this.transitionTo 'optimize')
}}
>
<LinkTo
@route="optimize"
@activeClass="is-active"
data-test-gutter-link="optimize"
>
Optimize
</LinkTo>
</li>
{{/if}}
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "r") }}>
<LinkTo
@route="csi"
@activeClass="is-active"
data-test-gutter-link="storage"
>
Storage
</LinkTo>
</li>
{{#if (can "list variables")}}
<li>
<LinkTo
@route="variables"
@activeClass="is-active"
data-test-gutter-link="variables"
>
Variables
</LinkTo>
</li>
{{/if}}
</ul>
<p class="menu-label">
Cluster
</p>
<ul class="menu-list">
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "c") }}>
<LinkTo
@route="clients"
@activeClass="is-active"
data-test-gutter-link="clients"
>
Clients
</LinkTo>
</li>
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "s") }}>
<LinkTo
@route="servers"
@activeClass="is-active"
data-test-gutter-link="servers"
>
Servers
</LinkTo>
</li>
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "t") }}>
<LinkTo
@route="topology"
@activeClass="is-active"
data-test-gutter-link="topology"
>
Topology
</LinkTo>
</li>
</ul>
<p class="menu-label">
Debugging
</p>
<ul class="menu-list">
<li {{keyboard-shortcut menuLevel=true pattern=(array "g" "e") }}>
<LinkTo
@route="evaluations"
@activeClass="is-active"
data-test-gutter-link="evaluations"
>
Evaluations
</LinkTo>
</li>
</ul>
</aside>
{{#if this.system.agent.version}}
<footer class="gutter-footer">
<span class="is-faded">
v
{{this.system.agent.version}}
</span>
</footer>
{{/if}}
</div>
</div>
<div data-test-page-content class="page-column is-right">
{{yield}}
</div>
<div
data-test-gutter-backdrop
class="gutter-backdrop {{if this.isOpen "is-open"}}"
onclick={{action this.onHamburgerClick}}
></div>