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,24 +1,16 @@
 .notifications {
 	width: 50px;
 
-	.trigger {
+	.unread-indicator {
-		cursor: pointer;
+		position: absolute;
-		color: $grey-400;
+		top: 1rem;
-		padding: 1rem;
+		right: .75rem;
-		font-size: 1.25rem;
+		width: .75rem;
-		position: relative;
+		height: .75rem;
 
-		.unread-indicator {
+		background: $primary;
-			position: absolute;
+		border-radius: 100%;
-			top: 1rem;
+		border: 2px solid $white;
-			right: .75rem;
-			width: .75rem;
-			height: .75rem;
-
-			background: $primary;
-			border-radius: 100%;
-			border: 2px solid $white;
-		}
 	}
 
 	.notifications-list {

src/styles/theme/navigation.scss

@@ -318,112 +318,123 @@
           display: inline-block;
         }
       }
+
     }
   }
 }
 
-.navbar .user {
+.navbar {
-  span {
+  .trigger-button {
-    font-family: $vikunja-font;
+    cursor: pointer;
+    color: $grey-400;
+    padding: 1rem;
+    font-size: 1.25rem;
+    position: relative;
   }
 
-  .avatar {
+  .user {
-    -webkit-border-radius: 100%;
+    span {
-    -moz-border-radius: 100%;
+      font-family: $vikunja-font;
-    border-radius: 100%;
+    }
-    vertical-align: middle;
-    height: 40px;
-  }
 
-  .logout-icon {
+    .avatar {
-    color: $grey-900;
+      -webkit-border-radius: 100%;
-
+      -moz-border-radius: 100%;
-    .icon {
+      border-radius: 100%;
       vertical-align: middle;
+      height: 40px;
+    }
+
+    .logout-icon {
+      color: $grey-900;
+
+      .icon {
+        vertical-align: middle;
+      }
+    }
+
+    .dropdown-trigger .button {
+      background: none;
+
+      &:focus:not(:active), &:active {
+        outline: none !important;
+        -webkit-box-shadow: none !important;
+        -moz-box-shadow: none !important;
+        box-shadow: none !important;
+      }
     }
   }
 
-  .dropdown-trigger .button {
+  .menu-hide-button, .menu-show-button {
-    background: none;
+    display: none;
-
+    z-index: 31;
-    &:focus:not(:active), &:active {
+    font-weight: bold;
-      outline: none !important;
+    font-size: 2rem;
-      -webkit-box-shadow: none !important;
-      -moz-box-shadow: none !important;
-      box-shadow: none !important;
-    }
-  }
-}
-
-.menu-hide-button, .menu-show-button {
-  display: none;
-  z-index: 31;
-  font-weight: bold;
-  font-size: 2rem;
-  color: $text;
-  line-height: 1;
-
-  &:hover, &:focus {
-    color: $grey-900;
-  }
-}
-
-.menu-hide-button {
-  position: fixed;
-
-  &:hover, &:focus {
     color: $text;
+    line-height: 1;
+
+    &:hover, &:focus {
+      color: $grey-900;
+    }
   }
-}
 
-.navbar-brand .menu-show-button {
-  display: block;
-}
-
-.mobile-overlay {
-  display: none;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(250, 250, 250, 0.8);
-  z-index: 5;
-  opacity: 0;
-  transition: all $transition;
-}
-
-@media screen and (max-width: $tablet) {
   .menu-hide-button {
-    display: block;
+    position: fixed;
-    top: $hamburger-menu-icon-spacing;
+
-    right: $hamburger-menu-icon-spacing;
+    &:hover, &:focus {
+      color: $text;
+    }
   }
 
-  .menu-show-button {
+  .navbar-brand .menu-show-button {
     display: block;
-    margin-left: $hamburger-menu-icon-spacing;
   }
 
   .mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(250, 250, 250, 0.8);
+    z-index: 5;
+    opacity: 0;
+    transition: all $transition;
+  }
+
+  @media screen and (max-width: $tablet) {
+    .menu-hide-button {
+      display: block;
+      top: $hamburger-menu-icon-spacing;
+      right: $hamburger-menu-icon-spacing;
+    }
+
+    .menu-show-button {
+      display: block;
+      margin-left: $hamburger-menu-icon-spacing;
+    }
+
+    .mobile-overlay {
+      display: block;
+      opacity: 1;
+    }
+
+    .navbar.is-dark .navbar-brand > .navbar-item {
+      margin: 0 auto;
+    }
+  }
+
+  .logout-icon {
+    margin-right: 0.85rem !important;
+  }
+
+  .menu-bottom-link {
+    width: 100%;
+    color: $grey-300;
+    text-align: center;
     display: block;
-    opacity: 1;
+    margin: 1rem 0;
-  }
+    font-size: .8rem;
-
-  .navbar.is-dark .navbar-brand > .navbar-item {
-    margin: 0 auto;
   }
 }
-
-.logout-icon {
-  margin-right: 0.85rem !important;
-}
-
-.menu-bottom-link {
-  width: 100%;
-  color: $grey-300;
-  text-align: center;
-  display: block;
-  margin: 1rem 0;
-  font-size: .8rem;
-}