Merge pull request #3257 from nextcloud/feature/3195/add-search-shortcut-support

Add search shortcut support

package.json

@@ -20,6 +20,7 @@
 		"@nextcloud/auth": "^1.2.2",
 		"@nextcloud/axios": "^1.3.2",
 		"@nextcloud/dialogs": "^1.2.2",
+		"@nextcloud/event-bus": "^1.1.3",
 		"@nextcloud/initial-state": "^1.1.1",
 		"@nextcloud/l10n": "^1.2.0",
 		"@nextcloud/moment": "^1.1.0",

src/App.vue

@@ -20,7 +20,11 @@
 -->
 
 <template>
-	<Content :class="{ 'icon-loading': loading, 'in-call': isInCall }" app-name="Talk">
+	<Content
+		v-shortkey="['ctrl', 'f']"
+		:class="{ 'icon-loading': loading, 'in-call': isInCall }"
+		app-name="talk"
+		@shortkey.native="handleAppSearch">
 		<LeftSidebar v-if="getUserId && !isFullscreen" />
 		<AppContent>
 			<router-view />
@@ -50,6 +54,7 @@ import {
 	connectSignaling,
 	getSignalingSync,
 } from './utils/webrtc/index'
+import { emit } from '@nextcloud/event-bus'
 import browserCheck from './mixins/browserCheck'
 
 export default {
@@ -389,6 +394,13 @@ export default {
 				this.$store.dispatch('hideSidebar')
 			}
 		},
+		// Upon pressing ctrl+f, focus the search box in the left sidebar
+		handleAppSearch() {
+			emit('toggle-navigation', {
+				open: true,
+			})
+			document.querySelector('.conversations-search')[0].focus()
+		},
 	},
 }
 </script>

src/components/LeftSidebar/LeftSidebar.vue

@@ -20,10 +20,11 @@
 -->
 
 <template>
-	<AppNavigation class="vue navigation">
+	<AppNavigation>
 		<div class="new-conversation">
 			<SearchBox
 				v-model="searchText"
+				class="conversations-search"
 				:is-searching="isSearching"
 				@input="debounceFetchSearchResults"
 				@abort-search="abortSearch" />
@@ -299,33 +300,4 @@ export default {
 	border-bottom: 1px solid var(--color-border-dark);
 }
 
-.navigation {
-	width: $navigation-width;
-	position: fixed;
-	top: 50px;
-	left: 0;
-	z-index: 500;
-	overflow-y: auto;
-	overflow-x: hidden;
-	// Do not use vh because of mobile headers
-	// are included in the calculation
-	height: calc(100% - 50px);
-	box-sizing: border-box;
-	background-color: var(--color-main-background);
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	border-right: 1px solid var(--color-border);
-	display: flex;
-	flex-direction: column;
-	flex-grow: 0;
-	flex-shrink: 0;
-}
-
-.settings {
-	position: sticky;
-	bottom: 0;
-	border-top: 1px solid var(--color-border-dark);
-}
 </style>