Commit 01295faa authored by gj4210's avatar gj4210 👁
Browse files

ADD: Keyboard selection to GlobalSearch

parent a966b989
Pipeline #106640 passed with stages
in 7 minutes and 28 seconds
......@@ -6,7 +6,11 @@
size="sm" placeholder="Suche" id="search" ref="search"
v-model="search_input" class="mr-2 search"
@focus="search_has_focus = true"
@blur="search_has_focus = false"
@blur="searchLostFocus"
@keydown.down="searchKeyboardSelect($event,true)"
@keydown.up="searchKeyboardSelect($event,false)"
@keydown.enter="searchKeyboardSubmit($event)"
@update="keyboard_focus = -1"
/>
<b-button class="search-clear bg-transparent" size="sm" v-if="search_input !== ''"
@click="search_input = ''">
......@@ -21,6 +25,7 @@
<div v-for="(suggestion, index) in suggestions"
:key="'search-suggestion-' + index"
class="suggestion p-3"
:class="index === keyboard_focus ? 'keyboard-focus':''"
@click="suggestionClicked($event, suggestion)">
<font-awesome-icon class="text-secondary mr-2 suggestion-icon"
:icon="suggestion.type === 'page' ? 'link': 'question'"/>
......@@ -99,7 +104,7 @@ export default {
'Help',
'hellooooo?'
],
suggestion_hover: []
keyboard_focus: -1
}
},
computed: {
......@@ -145,6 +150,7 @@ export default {
e.preventDefault()
if (this.search_input === '') {
this.show_search = !this.show_search
this.keyboard_focus = -1
if (this.show_search) {
this.$nextTick(() => {
this.$refs.search.focus()
......@@ -163,7 +169,25 @@ export default {
if (suggestion.type === 'test') {
window.console.log('Clicked test suggestion: ' + suggestion.name[0] + suggestion.name[1] + suggestion.name[2])
}
this.searchAction(e)
this.show_search = false
this.search_input = ''
},
searchKeyboardSelect(e, down) {
e.preventDefault()
if (this.suggestions.length > 0) {
this.keyboard_focus += down ? 1 : -1
this.keyboard_focus = Math.min(Math.max(this.keyboard_focus, -1), this.suggestions.length - 1);
}
},
searchKeyboardSubmit(e) {
if (this.keyboard_focus !== -1) {
e.preventDefault()
this.suggestionClicked(e, this.suggestions[this.keyboard_focus])
}
},
searchLostFocus() {
this.search_has_focus = false
this.keyboard_focus = -1
}
}
}
......@@ -223,6 +247,18 @@ export default {
cursor: pointer;
}
.keyboard-focus {
background: #b8b8b8 !important;
}
.keyboard-focus > .suggestion-arrow {
display: initial;
}
.keyboard-focus > .suggestion-icon {
display: none;
}
.suggestion:nth-child(even) {
background: #f1f1f1;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment