Activate user search text field

This commit is contained in:
jasper 2019-02-21 11:20:46 -08:00
parent 10990e1715
commit 34d723215b
4 changed files with 4 additions and 2 deletions

View file

@ -8,6 +8,7 @@ const UserFinder = {
methods: { methods: {
findUser (username) { findUser (username) {
this.$router.push({ name: 'user-search', query: { query: username } }) this.$router.push({ name: 'user-search', query: { query: username } })
this.$refs.username.focus()
}, },
toggleHidden () { toggleHidden () {
this.hidden = !this.hidden this.hidden = !this.hidden

View file

@ -4,7 +4,7 @@
<i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
<a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
<template v-else> <template v-else>
<input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> <input class="user-finder-input" ref="username" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
<button class="btn search-button" @click="findUser(username)"> <button class="btn search-button" @click="findUser(username)">
<i class="icon-search"/> <i class="icon-search"/>
</button> </button>

View file

@ -24,6 +24,7 @@ const userSearch = {
methods: { methods: {
newQuery (query) { newQuery (query) {
this.$router.push({ name: 'user-search', query: { query } }) this.$router.push({ name: 'user-search', query: { query } })
this.$refs.username.focus()
}, },
search (query) { search (query) {
if (!query) { if (!query) {

View file

@ -4,7 +4,7 @@
{{$t('nav.user_search')}} {{$t('nav.user_search')}}
</div> </div>
<div class="user-search-input-container"> <div class="user-search-input-container">
<input class="user-finder-input" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/> <input class="user-finder-input" ref="username" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/>
<button class="btn search-button" @click="newQuery(username)"> <button class="btn search-button" @click="newQuery(username)">
<i class="icon-search"/> <i class="icon-search"/>
</button> </button>