Add keyboard shortcuts
This commit is contained in:
parent
4566624df2
commit
4dcc377243
|
@ -37,6 +37,14 @@
|
|||
|
||||
<div class="navbar-end">
|
||||
<update/>
|
||||
<a
|
||||
@click="openQuickActions"
|
||||
class="trigger-button pr-0"
|
||||
@shortkey="openQuickActions"
|
||||
v-shortkey="['ctrl', 'k']"
|
||||
>
|
||||
<icon icon="search"/>
|
||||
</a>
|
||||
<notifications/>
|
||||
<div class="user">
|
||||
<img :src="userAvatar" alt="" class="avatar"/>
|
||||
|
@ -83,7 +91,7 @@
|
|||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||
import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
||||
import Rights from '@/models/rights.json'
|
||||
import Update from '@/components/home/update'
|
||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown'
|
||||
|
@ -113,6 +121,9 @@ export default {
|
|||
this.$store.dispatch('auth/logout')
|
||||
this.$router.push({name: 'user.login'})
|
||||
},
|
||||
openQuickActions() {
|
||||
this.$store.commit(QUICK_ACTIONS_ACTIVE, true)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="notifications">
|
||||
<a @click.stop="showNotifications = !showNotifications" class="trigger">
|
||||
<a @click.stop="showNotifications = !showNotifications" class="trigger-button">
|
||||
<span class="unread-indicator" v-if="unreadNotifications > 0"></span>
|
||||
<icon icon="bell"/>
|
||||
</a>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<modal v-if="active" class="quick-actions">
|
||||
<modal v-if="active" class="quick-actions" @close="closeQuickActions">
|
||||
<div class="card">
|
||||
<div class="action-input" :class="{'has-active-cmd': selectedCmd !== null}">
|
||||
<div class="active-cmd tag" v-if="selectedCmd !== null">
|
||||
|
@ -16,6 +16,7 @@
|
|||
@keydown.down.prevent="() => select(0, 0)"
|
||||
@keyup.prevent.delete="unselectCmd"
|
||||
@keyup.prevent.enter="doCmd"
|
||||
@keyup.prevent.esc="closeQuickActions"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
@ -58,7 +59,7 @@ import TaskModel from '@/models/task'
|
|||
import NamespaceModel from '@/models/namespace'
|
||||
import TeamModel from '@/models/team'
|
||||
|
||||
import {CURRENT_LIST} from '@/store/mutation-types'
|
||||
import {CURRENT_LIST, QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
||||
import ListModel from '@/models/list'
|
||||
|
||||
const TYPE_LIST = 'list'
|
||||
|
@ -90,7 +91,13 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
active: () => true, // TODO: use state + keyboard shortcut
|
||||
active() {
|
||||
const active = this.$store.state[QUICK_ACTIONS_ACTIVE]
|
||||
if (!active) {
|
||||
this.reset()
|
||||
}
|
||||
return active
|
||||
},
|
||||
results() {
|
||||
const lists = (Object.values(this.$store.state.lists).filter(l => {
|
||||
return l.title.toLowerCase().includes(this.query.toLowerCase())
|
||||
|
@ -150,7 +157,7 @@ export default {
|
|||
hintText() {
|
||||
let namespace
|
||||
|
||||
if (this.selectedCmd !== null) {
|
||||
if (this.selectedCmd !== null && this.currentList !== null) {
|
||||
switch (this.selectedCmd.action) {
|
||||
case CMD_NEW_TASK:
|
||||
return `Create a task in the current list (${this.currentList.title})`
|
||||
|
@ -221,6 +228,9 @@ export default {
|
|||
})
|
||||
}, 150)
|
||||
},
|
||||
closeQuickActions() {
|
||||
this.$store.commit(QUICK_ACTIONS_ACTIVE, false)
|
||||
},
|
||||
doAction(type, item) {
|
||||
switch (type) {
|
||||
case TYPE_LIST:
|
||||
|
@ -358,6 +368,10 @@ export default {
|
|||
|
||||
this.selectedCmd = null
|
||||
},
|
||||
reset() {
|
||||
this.query = ''
|
||||
this.selectedCmd = null
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,13 +1,6 @@
|
|||
.notifications {
|
||||
width: 50px;
|
||||
|
||||
.trigger {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
|
@ -19,7 +12,6 @@
|
|||
border-radius: 100%;
|
||||
border: 2px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-list {
|
||||
position: fixed;
|
||||
|
|
|
@ -318,11 +318,21 @@
|
|||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .user {
|
||||
.navbar {
|
||||
.trigger-button {
|
||||
cursor: pointer;
|
||||
color: $grey-400;
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user {
|
||||
span {
|
||||
font-family: $vikunja-font;
|
||||
}
|
||||
|
@ -353,9 +363,9 @@
|
|||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-hide-button, .menu-show-button {
|
||||
.menu-hide-button, .menu-show-button {
|
||||
display: none;
|
||||
z-index: 31;
|
||||
font-weight: bold;
|
||||
|
@ -366,21 +376,21 @@
|
|||
&:hover, &:focus {
|
||||
color: $grey-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-hide-button {
|
||||
.menu-hide-button {
|
||||
position: fixed;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand .menu-show-button {
|
||||
.navbar-brand .menu-show-button {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-overlay {
|
||||
.mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
@ -391,9 +401,9 @@
|
|||
z-index: 5;
|
||||
opacity: 0;
|
||||
transition: all $transition;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
@media screen and (max-width: $tablet) {
|
||||
.menu-hide-button {
|
||||
display: block;
|
||||
top: $hamburger-menu-icon-spacing;
|
||||
|
@ -413,17 +423,18 @@
|
|||
.navbar.is-dark .navbar-brand > .navbar-item {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logout-icon {
|
||||
.logout-icon {
|
||||
margin-right: 0.85rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-bottom-link {
|
||||
.menu-bottom-link {
|
||||
width: 100%;
|
||||
color: $grey-300;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: 1rem 0;
|
||||
font-size: .8rem;
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue