Add keyboard shortcuts

src/components/home/topNavigation.vue

@@ -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>

src/components/notifications/notifications.vue

@@ -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>

src/components/quick-actions/quick-actions.vue

@@ -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>

src/styles/components/notifications.scss

@@ -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;

src/styles/theme/navigation.scss

@@ -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;
+  }
 }