github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/app/components/keyboard-shortcuts-modal.hbs (about)

     1  {{#if this.keyboard.shortcutsVisible}}
     2    {{keyboard-commands (array this.escapeCommand)}}
     3    <div class="keyboard-shortcuts"
     4        {{on-click-outside
     5          (toggle "keyboard.shortcutsVisible" this)
     6        }}
     7    >
     8      <header>
     9        <button
    10          {{autofocus}}
    11          class="button is-borderless dismiss"
    12          type="button"
    13          {{on "click" (toggle "keyboard.shortcutsVisible" this)}}
    14          aria-label="Dismiss"
    15        >
    16          {{x-icon "cancel"}}
    17        </button>
    18        <h2>Keyboard Shortcuts</h2>
    19        <p>Click a key pattern to re-bind it to a shortcut of your choosing.</p>
    20      </header>
    21      <ul class="commands-list">
    22        {{#each this.commands as |command|}}
    23          <li data-test-command-label={{command.label}}>
    24            <strong>{{command.label}}</strong>
    25              <span class="keys">
    26                {{#if command.recording}}
    27                  <span class="recording">Recording; ESC to cancel.</span>
    28                {{else}}
    29                  {{#if command.custom}}
    30                    <button type="button" class="reset-to-default" {{on "click" (action this.keyboard.resetCommandToDefault command)}}>reset to default</button>
    31                  {{/if}}
    32                {{/if}}
    33  
    34                <button data-test-rebinder disabled={{or (not command.rebindable) command.recording}} type="button" {{on "click" (action this.keyboard.rebindCommand command)}}>
    35                  {{#each command.pattern as |key|}}
    36                    <span>{{clean-keycommand key}}</span>
    37                  {{/each}}
    38                </button>
    39              </span>
    40          </li>
    41        {{/each}}
    42      </ul>
    43      <footer>
    44        <strong>Keyboard shortcuts {{#if this.keyboard.enabled}}enabled{{else}}disabled{{/if}}</strong>
    45        <Toggle
    46          data-test-enable-shortcuts-toggle
    47          @isActive={{this.keyboard.enabled}}
    48          @onToggle={{this.toggleListener}}
    49          title="{{if this.keyboard.enabled "enable" "disable"}} keyboard shortcuts"
    50        />
    51      </footer>
    52    </div>
    53  {{/if}}
    54  
    55  {{#if (and this.keyboard.enabled this.keyboard.displayHints)}}
    56    {{#each this.hints as |hint|}}
    57      <span
    58        {{did-insert (fn this.tetherToElement hint.element hint)}}
    59        {{will-destroy (fn this.untetherFromElement hint)}}
    60        data-test-keyboard-hint
    61        data-shortcut={{hint.pattern}}
    62        class="{{if hint.menuLevel "menu-level"}}"
    63        aria-hidden="true"
    64      >
    65        {{#each hint.pattern as |key|}}
    66          <span>{{key}}</span>
    67        {{/each}}
    68      </span>
    69    {{/each}}
    70  {{/if}}