<!--
Copyright (C) 2016 The Android Open Source Project

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">

<dom-module id="gr-keyboard-shortcuts-dialog">
  <template>
    <style>
      :host {
        display: block;
      }
      header{
        padding: 1em;
      }
      main {
        display: flex;
        padding: 0 2em 2em;
      }
      header {
        align-items: center;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
      }
      table:last-of-type {
        margin-left: 3em;
      }
      td {
        padding: .2em 0;
      }
      td:first-child {
        padding-right: .5em;
        text-align: right;
      }
      .header {
        font-weight: bold;
        padding-top: 1em;
      }
      .key {
        display: inline-block;
        font-weight: bold;
        border-radius: 3px;
        background-color: #f1f2f3;
        padding: .1em .5em;
        text-align: center;
      }
      .modifier {
        font-weight: normal;
      }
    </style>
    <header>
      <h3>Keyboard shortcuts</h3>
      <gr-button link on-tap="_handleCloseTap">Close</gr-button>
    </header>
    <main>
      <table>
        <tbody>
          <tr>
            <td></td><td class="header">Everywhere</td>
          </tr>
          <tr>
            <td><span class="key">/</span></td>
            <td>Search</td>
          </tr>
          <tr>
            <td><span class="key">?</span></td>
            <td>Show this dialog</td>
          </tr>
        </tbody>
        <!-- Change View -->
        <tbody hidden$="[[!_computeInView(view, 'gr-change-view')]]" hidden>
          <tr>
            <td></td><td class="header">Navigation</td>
          </tr>
          <tr>
            <td><span class="key">]</span></td>
            <td>Show first file</td>
          </tr>
          <tr>
            <td><span class="key">[</span></td>
            <td>Show last file</td>
          </tr>
          <tr>
            <td><span class="key">u</span></td>
            <td>Up to dashboard</td>
          </tr>
        </tbody>
        <!-- Diff View -->
        <tbody hidden$="[[!_computeInView(view, 'gr-diff-view')]]" hidden>
          <tr>
            <td></td><td class="header">Navigation</td>
          </tr>
          <tr>
            <td><span class="key">]</span></td>
            <td>Show next file</td>
          </tr>
          <tr>
            <td><span class="key">[</span></td>
            <td>Show previous file</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">j</span>
            </td>
            <td>Show next file that has comments</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">k</span>
            </td>
            <td>Show previous file that has comments</td>
          </tr>
          <tr>
            <td><span class="key">u</span></td>
            <td>Up to change</td>
          </tr>
        </tbody>
      </table>

      <table>
        <!-- Change List -->
        <tbody hidden$="[[!_computeInView(view, 'gr-change-list-view')]]" hidden>
          <tr>
            <td></td><td class="header">Change list</td>
          </tr>
          <tr>
            <td><span class="key">j</span></td>
            <td>Select next change</td>
          </tr>
          <tr>
            <td><span class="key">k</span></td>
            <td>Show previous change</td>
          </tr>
          <tr>
            <td><span class="key">n</span> or <span class="key">]</span></td>
            <td>Go to next page</td>
          </tr>
          <tr>
            <td><span class="key">p</span> or <span class="key">[</span></td>
            <td>Go to previous page</td>
          </tr>
          <tr>
            <td>
              <span class="key">Enter</span> or
              <span class="key">o</span>
            </td>
            <td>Show selected change</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">r</span>
            </td>
            <td>Refresh list of changes</td>
          </tr>
        </tbody>
        <!-- Dashboard -->
        <tbody hidden$="[[!_computeInView(view, 'gr-dashboard-view')]]" hidden>
          <tr>
            <td></td><td class="header">Dashboard</td>
          </tr>
          <tr>
            <td><span class="key">j</span></td>
            <td>Select next change</td>
          </tr>
          <tr>
            <td><span class="key">k</span></td>
            <td>Show previous change</td>
          </tr>
          <tr>
            <td>
              <span class="key">Enter</span> or
              <span class="key">o</span>
            </td>
            <td>Show selected change</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">r</span>
            </td>
            <td>Refresh list of changes</td>
          </tr>
        </tbody>
        <!-- Change View -->
        <tbody hidden$="[[!_computeInView(view, 'gr-change-view')]]" hidden>
          <tr>
            <td></td><td class="header">Actions</td>
          </tr>
          <tr>
            <td><span class="key">a</span></td>
            <td>Open reply dialog to publish comments and add reviewers</td>
          </tr>
          <tr>
            <td><span class="key">d</span></td>
            <td>Open download overlay</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">r</span>
            </td>
            <td>Reload the change at the latest patch</td>
          </tr>
          <tr>
            <td></td><td class="header">File list</td>
          </tr>
          <tr>
            <td><span class="key">j</span> or <span class="key">↓</span></td>
            <td>Select next file</td>
          </tr>
          <tr>
            <td><span class="key">k</span> or <span class="key">↑</span></td>
            <td>Select previous file</td>
          </tr>
          <tr>
            <td><span class="key">Enter</span> or <span class="key">o</span></td>
            <td>Show selected file</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">i</span>
            </td>
            <td>Show/hide all inline diffs</td>
          </tr>
          <tr>
            <td><span class="key">i</span></td>
            <td>Show/hide selected inline diff</td>
          </tr>
          <tr>
            <td></td><td class="header">Diffs</td>
          </tr>
          <tr>
            <td><span class="key">j</span> or <span class="key">↓</span></td>
            <td>Go to next line</td>
          </tr>
          <tr>
            <td><span class="key">k</span> or <span class="key">↑</span></td>
            <td>Go to previous line</td>
          </tr>
          <tr>
            <td><span class="key">n</span></td>
            <td>Go to next diff chunk</td>
          </tr>
          <tr>
            <td><span class="key">p</span></td>
            <td>Go to previous diff chunk</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">n</span>
            </td>
            <td>Go to next comment thread</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">p</span>
            </td>
            <td>Go to previous comment thread</td>
          </tr>
          <tr>
            <td><span class="key">e</span></td>
            <td>Expand all comment threads</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">e</span>
            </td>
            <td>Collapse all comment threads</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">←</span>
            </td>
            <td>Select left pane</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">→</span>
            </td>
            <td>Select right pane</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">a</span>
            </td>
            <td>Hide/show left diff</td>
          </tr>
          <tr>
            <td>
              <span class="key">c</span>
            </td>
            <td>Draft new comment</td>
          </tr>
        </tbody>
        <!-- Diff View -->
        <tbody hidden$="[[!_computeInView(view, 'gr-diff-view')]]" hidden>
          <tr>
            <td></td><td class="header">Actions</td>
          </tr>
          <tr>
            <td><span class="key">j</span> or <span class="key">↓</span></td>
            <td>Show next line</td>
          </tr>
          <tr>
            <td><span class="key">k</span> or <span class="key">↑</span></td>
            <td>Show previous line</td>
          </tr>
          <tr>
            <td><span class="key">n</span></td>
            <td>Show next diff chunk</td>
          </tr>
          <tr>
            <td><span class="key">p</span></td>
            <td>Show previous diff chunk</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">n</span>
            </td>
            <td>Show next comment thread</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">p</span>
            </td>
            <td>Show previous comment thread</td>
          </tr>
          <tr>
            <td><span class="key">e</span></td>
            <td>Expand all comment threads</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">e</span>
            </td>
            <td>Collapse all comment threads</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">←</span>
            </td>
            <td>Select left pane</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">→</span>
            </td>
            <td>Select right pane</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">a</span>
            </td>
            <td>Hide/show left diff</td>
          </tr>
          <tr>
            <td>
              <span class="key">c</span>
            </td>
            <td>Draft new comment</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Ctrl</span>
              <span class="key">s</span><br/>
              <span class="key modifier">Ctrl</span>
              <span class="key">Enter</span><br/>
              <span class="key modifier">Meta</span>
              <span class="key">Enter</span>
            </td>
            <td>Save comment</td>
          </tr>
          <tr>
            <td><span class="key">a</span></td>
            <td>Open reply dialog to publish comments and add reviewers</td>
          </tr>
          <tr>
            <td><span class="key">,</span></td>
            <td>Show diff preferences</td>
          </tr>
        </tbody>
      </table>
    </main>
    <footer></footer>
  </template>
  <script src="gr-keyboard-shortcuts-dialog.js"></script>
</dom-module>