feat: add v-shortcut directive for keyboard shortcuts (#942)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/942
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-11-13 20:28:29 +00:00
parent db605e0d21
commit feea191ecf
18 changed files with 251 additions and 394 deletions

View file

@ -1,16 +1,17 @@
<template>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortkey="['ctrl', 'e']"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
<button
type="button"
@click="$store.commit('toggleMenu')"
class="menu-show-button"
@shortkey="() => $store.commit('toggleMenu')"
v-shortcut="'Control+e'"
:title="$t('keyboardShortcuts.toggleMenu')"
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
/>
</template>
<script setup>
import { computed} from 'vue'
import {computed} from 'vue'
import {store} from '@/store'
const menuActive = computed(() => store.menuActive)
@ -32,6 +33,7 @@ $size: $lineWidth + 1rem;
position: relative;
$transformX: translateX(-50%);
&::before,
&::after {
content: '';