nocodb/packages/nc-gui/components/templates/Help.vue

<template>
  <v-dialog v-model='localState' max-width='900'>
    <v-card>
      <v-card-title>
        Shortcuts
      </v-card-title>
      <v-card-text>
        <v-simple-table v-slot dense>
          <thead>
          <tr>
            <th></th>
            <th class=' pa-2'>Mac OS</th>
            <th class='  pa-2'>Windows / Linux</th>
          </tr>
          </thead>

          <tbody>
          <tr v-for='(short,i) in shortcuts' :key='i'>
            <td class='caption'>{{ short.description }}</td>
            <td class=' caption pa-2' v-html='short.mac'></td>
            <td class=' caption pa-2' v-html='short.windows'></td>
          </tr>
          </tbody>
        </v-simple-table>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: 'Help',
  props: {
    value: Boolean
  },
  data() {
    return {
      shortcuts: [{
        description: 'Add tables',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>T</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>T</kbd>'
      }, {
        description: 'Add columns',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>C</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>'
      }, {
        description: 'Add new column row',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>A</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>'
      }, {
        description: 'Table navigation',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Up</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Down</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Up</kbd>'
      }, {
        description: 'Column navigation',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>Arrow Left</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd> <br>AND<br> <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>Arrow Right</kbd>'
      }, {
        description: 'Copy json to clipboard',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>J</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd>'
      }, {
        description: 'Submit template',
        mac: '<kbd>Command</kbd> + <kbd>Control</kbd> + <kbd>S</kbd>',
        windows: '<kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>'
      }]
    }
  },
  computed: {
    localState: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  }
}
</script>

<style scoped>

</style>