fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat: start search when typing with focus on the left bar

Browse Source
This commit is contained in:
Fabio Di Stasio
2021-09-12 11:55:16 +02:00
parent 09c07acd5c
commit 265ed66d25
1 changed files with 22 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/renderer/components/WorkspaceExploreBar.vue
View File

@ -5,6 +5,9 @@
ref="explorebar" ref="explorebar"
class="workspace-explorebar column" class="workspace-explorebar column"
:style="{width: localWidth ? localWidth+'px' : ''}" :style="{width: localWidth ? localWidth+'px' : ''}"
tabindex="0"
@keypress="explorebarSearch"
@keydown="explorebarSearch"
> >
<div class="workspace-explorebar-header"> <div class="workspace-explorebar-header">
<span class="workspace-explorebar-title">{{ connectionName }}</span> <span class="workspace-explorebar-title">{{ connectionName }}</span>
@ -30,6 +33,7 @@
<div class="workspace-explorebar-search"> <div class="workspace-explorebar-search">
<div v-if="workspace.connectionStatus === 'connected'" class="has-icon-right"> <div v-if="workspace.connectionStatus === 'connected'" class="has-icon-right">
<input <input
ref="searchInput"
v-model="searchTerm" v-model="searchTerm"
class="form-input input-sm" class="form-input input-sm"
type="text" type="text"
@ -43,7 +47,7 @@
/> />
</div> </div>
</div> </div>
<div class="workspace-explorebar-body"> <div class="workspace-explorebar-body" @click="$refs.explorebar.focus()">
<WorkspaceExploreBarSchema <WorkspaceExploreBarSchema
v-for="db of workspace.structure" v-for="db of workspace.structure"
:key="db.name" :key="db.name"
@ -237,6 +241,19 @@ export default {
this.isRefreshing = false; this.isRefreshing = false;
} }
}, },
explorebarSearch (e) {
if (e.code === 'Backspace') {
e.preventDefault();
if (this.searchTerm.length)
this.searchTerm = this.searchTerm.slice(0, -1);
else
return;
}
else if (e.key.length > 1)// Prevent non-alphanumerics
return;
this.$refs.searchInput.focus();
},
resize (e) { resize (e) {
const el = this.$refs.explorebar; const el = this.$refs.explorebar;
let explorebarWidth = e.pageX - el.getBoundingClientRect().left; let explorebarWidth = e.pageX - el.getBoundingClientRect().left;
@ -527,6 +544,10 @@ export default {
position: relative; position: relative;
padding: 0; padding: 0;
&:focus {
outline: none;
}
.workspace-explorebar-header { .workspace-explorebar-header {
width: 100%; width: 100%;
padding: 0.3rem; padding: 0.3rem;