<!--
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 change list</td>
          </tr>
          <tr>
            <td>
              <span class="key modifier">Shift</span>
              <span class="key">i</span>
            </td>
            <td>Show/hide inline diffs</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">u</span></td>
            <td>Up to change</td>
          </tr>
        </tbody>
      </table>

      <table>
        <!-- Change List and Dashboard -->
        <tbody hidden$="[[!_computeInChangeListView(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">Enter</span> or
              <span class="key">o</span>
            </td>
            <td>Show selected change</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>Review and publish comments</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></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 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 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">a</span></td>
            <td>Review and publish comments</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>