local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Show all available shortcuts everywhere but indicate which work on the current page

Browse source
This commit is contained in:
kolaente 2020-11-11 22:02:57 +01:00
parent 982d838dd4
commit a0d63272a6
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 47 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
src/components/misc/keyboard-shortcuts.vue
View file

@ -7,10 +7,6 @@
<p class="card-header-title">Available Keyboard Shortcuts</p> <p class="card-header-title">Available Keyboard Shortcuts</p>
</header> </header>
<div class="card-content content"> <div class="card-content content">
<p class="info">
The available keyboard shortcuts depend on the current page. Not all shortcuts are available
everywhere.
</p>
<p> <p>
<strong>Toggle The Menu</strong> <strong>Toggle The Menu</strong>
<span class="shortcuts"> <span class="shortcuts">
@ -19,7 +15,13 @@
<span>e</span> <span>e</span>
</span> </span>
</p> </p>
<p v-if="$route.name === 'list.kanban'"> <h3>Kanban</h3>
<div class="message is-primary" v-if="$route.name === 'list.kanban'">
<div class="message-body">
These shortcuts work on the current page.
</div>
</div>
<p>
<strong>Mark a task as done</strong> <strong>Mark a task as done</strong>
<span class="shortcuts"> <span class="shortcuts">
<span>ctrl</span> <span>ctrl</span>
@ -27,39 +29,42 @@
<span>click</span> <span>click</span>
</span> </span>
</p> </p>
<template <h3>Task Page</h3>
v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'"> <div class="message is-primary" v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
<p> <div class="message-body">
<strong>Assign this task to a user</strong> These shortcuts work on the current page.
<span class="shortcuts"> </div>
<span>a</span> </div>
</span> <p>
</p> <strong>Assign this task to a user</strong>
<p> <span class="shortcuts">
<strong>Add labels to this task</strong> <span>a</span>
<span class="shortcuts"> </span>
<span>l</span> </p>
</span> <p>
</p> <strong>Add labels to this task</strong>
<p> <span class="shortcuts">
<strong>Change the due date of this task</strong> <span>l</span>
<span class="shortcuts"> </span>
<span>d</span> </p>
</span> <p>
</p> <strong>Change the due date of this task</strong>
<p> <span class="shortcuts">
<strong>Add an attachment to this task</strong> <span>d</span>
<span class="shortcuts"> </span>
<span>f</span> </p>
</span> <p>
</p> <strong>Add an attachment to this task</strong>
<p> <span class="shortcuts">
<strong>Modify related tasks of this task</strong> <span>f</span>
<span class="shortcuts"> </span>
<span>r</span> </p>
</span> <p>
</p> <strong>Modify related tasks of this task</strong>
</template> <span class="shortcuts">
<span>r</span>
</span>
</p>
</div> </div>
</div> </div>
</div> </div>

4
src/styles/components/keyboard-shortcuts.scss
View file

@ -40,5 +40,9 @@
} }
} }
} }
.message-body {
padding: .5rem .75rem;
}
} }
} }