shortcuts.component.html

<span style="display: block; margin-bottom: 15px;">
  {{ 'SHORTCUTS.hold' | translate }}<em class="shortcut-key modifier-key">Ctrl</em>
  <ng-container *ngIf="macVersion">
    {{ 'SHORTCUTS.or' | translate }}<em class="shortcut-key modifier-key">Command</em>
  </ng-container>
  {{ 'SHORTCUTS.andClickAnyFile' | translate }}
</span>

<span style="display: block; margin-bottom: 15px;">
  {{ 'SHORTCUTS.hold' | translate }}<em class="shortcut-key modifier-key">Shift</em>
  <ng-container *ngIf="macVersion">
    {{ 'SHORTCUTS.or' | translate }}<em class="shortcut-key modifier-key">Command</em>
  </ng-container>
  {{ 'SHORTCUTS.andClickAnyFileForExplorer' | translate }}
</span>

<span>{{ 'SHORTCUTS.hold' | translate }}<em class="shortcut-key modifier-key">Ctrl</em>
  <ng-container *ngIf="macVersion">
    {{ 'SHORTCUTS.or' | translate }}<em class="shortcut-key modifier-key">Command</em>
  </ng-container>
    {{ 'SHORTCUTS.andPress' | translate }}:
</span>

<div class="shortcut-container">

  <div
    class="shortcut-item"
    *ngFor="let item of shortcutsInOrder"
    [ngClass]="{
        'space-after':     item === 'showClips'
                        || item === 'fuzzySearch'
                        || item === 'shuffleGalleryNow'
                        || item === 'startWizard'
                        || item === 'darkMode'
                        || item === 'showAutoTags'
      }"
  >
    <em
      class="shortcut-key clickable"
      (click)="changeThisShortcut(item)"
      [ngClass]="{
          'selected-for-change': item === shortcutToChange,
          'empty': !shortcutService.actionToKeyMap.get(item)
        }"
    >{{ shortcutService.actionToKeyMap.get(item) || '-' }}</em> -
    {{ 'SHORTCUTS.' + item | translate }}
  </div>

  <!-- System reserved -->
  <div class="shortcut-item"><em class="shortcut-key">w</em> - {{ 'SHORTCUTS.quit' | translate }}</div>
  <div class="shortcut-item space-after"><em class="shortcut-key">q</em> - {{ 'SHORTCUTS.quit' | translate }}</div>
</div>

<span>
  {{ 'SHORTCUTS.clickToRename' | translate }}
</span>