forked from vikunja/frontend
feat: move shortcuts to js file
This commit is contained in:
parent
a2c0846a03
commit
cd380601c9
GPG Key ID:
F40E70337AB24C9B
|
|
@ -1,111 +0,0 @@
|
|||
<template>
|
||||
<modal @close="close()">
|
||||
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
|
||||
<div class="message is-primary">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.allPages') }}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.toggleMenu') }}</strong>
|
||||
<shortcut :keys="['ctrl', 'e']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.quickSearch') }}</strong>
|
||||
<shortcut :keys="['ctrl', 'k']"/>
|
||||
</p>
|
||||
|
||||
<h3>{{ $t('list.kanban.title') }}</h3>
|
||||
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.currentPageOnly') }}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.done') }}</strong>
|
||||
<shortcut :keys="['ctrl', 'click']"/>
|
||||
</p>
|
||||
|
||||
<h3>{{ $t('keyboardShortcuts.list.title') }}</h3>
|
||||
<div class="message is-primary" v-if="isListPage">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.currentPageOnly') }}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.list.switchToListView') }}</strong>
|
||||
<shortcut :keys="['g', 'l']" :combination="$t('keyboardShortcuts.then')"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.list.switchToGanttView') }}</strong>
|
||||
<shortcut :keys="['g', 'g']" :combination="$t('keyboardShortcuts.then')"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.list.switchToTableView') }}</strong>
|
||||
<shortcut :keys="['g', 't']" :combination="$t('keyboardShortcuts.then')"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.list.switchToKanbanView') }}</strong>
|
||||
<shortcut :keys="['g', 'k']" :combination="$t('keyboardShortcuts.then')"/>
|
||||
</p>
|
||||
|
||||
<h3>{{ $t('keyboardShortcuts.task.title') }}</h3>
|
||||
<div
|
||||
class="message is-primary"
|
||||
v-if="isTaskPage">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.currentPageOnly') }}
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.assign') }}</strong>
|
||||
<shortcut :keys="['a']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.labels') }}</strong>
|
||||
<shortcut :keys="['l']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.dueDate') }}</strong>
|
||||
<shortcut :keys="['d']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.attachment') }}</strong>
|
||||
<shortcut :keys="['f']"/>
|
||||
</p>
|
||||
<p>
|
||||
<strong>{{ $t('keyboardShortcuts.task.related') }}</strong>
|
||||
<shortcut :keys="['r']"/>
|
||||
</p>
|
||||
</card>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
|
||||
import Shortcut from '@/components/misc/shortcut.vue'
|
||||
|
||||
export default {
|
||||
name: 'keyboard-shortcuts',
|
||||
components: {Shortcut},
|
||||
computed: {
|
||||
isTaskPage() {
|
||||
return [
|
||||
'task.detail',
|
||||
'task.list.detail',
|
||||
'task.gantt.detail',
|
||||
'task.kanban.detail',
|
||||
'task.detail',
|
||||
].includes(this.$route.name)
|
||||
},
|
||||
isListPage() {
|
||||
return this.$route.name.startsWith('list.')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<modal @close="close()">
|
||||
<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
|
||||
<template v-for="s in shortcuts">
|
||||
<h3>{{ $t(s.title) }}</h3>
|
||||
|
||||
<div class="message is-primary" v-if="s.available($route) === null">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.allPages') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="message is-primary" v-if="s.available($route)">
|
||||
<div class="message-body">
|
||||
{{ $t('keyboardShortcuts.currentPageOnly') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-for="sc in s.shortcuts">
|
||||
<strong>{{ $t(sc.title) }}</strong>
|
||||
<shortcut :keys="sc.keys"
|
||||
:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
|
||||
</p>
|
||||
</template>
|
||||
</card>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
|
||||
import Shortcut from '@/components/misc/shortcut.vue'
|
||||
import {KEYBOARD_SHORTCUTS} from './shortcuts'
|
||||
|
||||
export default {
|
||||
name: 'keyboard-shortcuts',
|
||||
components: {Shortcut},
|
||||
data() {
|
||||
return {
|
||||
shortcuts: KEYBOARD_SHORTCUTS,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
export const KEYBOARD_SHORTCUTS = [
|
||||
{
|
||||
title: 'keyboardShortcuts.general',
|
||||
available: (route) => null,
|
||||
shortcuts: [
|
||||
{
|
||||
title: 'keyboardShortcuts.toggleMenu',
|
||||
keys: ['ctrl', 'e'],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.quickSearch',
|
||||
keys: ['ctrl', 'k'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'list.kanban.title',
|
||||
available: (route) => route.name === 'list.kanban',
|
||||
shortcuts: [
|
||||
{
|
||||
title: 'keyboardShortcuts.task.done',
|
||||
keys: ['ctrl', 'click'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.list.title',
|
||||
available: (route) => route.name.startsWith('list.'),
|
||||
shortcuts: [
|
||||
{
|
||||
title: 'keyboardShortcuts.list.switchToListView',
|
||||
keys: ['g', 'l'],
|
||||
combination: 'then',
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.list.switchToGanttView',
|
||||
keys: ['g', 'g'],
|
||||
combination: 'then',
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.list.switchToTableView',
|
||||
keys: ['g', 't'],
|
||||
combination: 'then',
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.list.switchToKanbanView',
|
||||
keys: ['g', 'k'],
|
||||
combination: 'then',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.task.title',
|
||||
available: (route) => [
|
||||
'task.detail',
|
||||
'task.list.detail',
|
||||
'task.gantt.detail',
|
||||
'task.kanban.detail',
|
||||
'task.detail',
|
||||
].includes(route.name),
|
||||
shortcuts: [
|
||||
{
|
||||
title: 'keyboardShortcuts.task.assign',
|
||||
keys: ['a'],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.task.labels',
|
||||
keys: ['l'],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.task.dueDate',
|
||||
keys: ['d'],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.task.attachment',
|
||||
keys: ['f'],
|
||||
},
|
||||
{
|
||||
title: 'keyboardShortcuts.task.related',
|
||||
keys: ['r'],
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
|
@ -743,6 +743,7 @@
|
|||
},
|
||||
"keyboardShortcuts": {
|
||||
"title": "Keyboard Shortcuts",
|
||||
"general": "General",
|
||||
"allPages": "These shortcuts work on all pages.",
|
||||
"currentPageOnly": "These shortcuts work only on the current page.",
|
||||
"toggleMenu": "Toggle The Menu",
|
||||
|
|
|
|||
Loading…
Reference in New Issue