Make user finder more pleasant.

This commit is contained in:
eal 2017-09-10 20:46:42 +03:00
parent 9c7eb1de3c
commit 5e6ffc0e45
3 changed files with 35 additions and 4 deletions

View file

@ -1,20 +1,30 @@
const UserFinder = { const UserFinder = {
data: () => ({ data: () => ({
username: undefined, username: undefined,
hidden: true hidden: true,
error: false,
loading: false
}), }),
methods: { methods: {
findUser (username) { findUser (username) {
this.loading = true
this.$store.state.api.backendInteractor.externalProfile(username) this.$store.state.api.backendInteractor.externalProfile(username)
.then((user) => { .then((user) => {
this.loading = false
this.hidden = true
if (!user.error) { if (!user.error) {
this.$store.commit('addNewUsers', [user]) this.$store.commit('addNewUsers', [user])
this.$router.push({name: 'user-profile', params: {id: user.id}}) this.$router.push({name: 'user-profile', params: {id: user.id}})
} else {
this.error = true
} }
}) })
}, },
toggleHidden () { toggleHidden () {
this.hidden = !this.hidden this.hidden = !this.hidden
},
dismissError () {
this.error = false
} }
} }
} }

View file

@ -1,8 +1,15 @@
<template> <template>
<a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a> <span>
<span v-else> <span class="finder-error base05" v-if="error">
<input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/> <i class="icon-cancel user-finder-icon" @click="dismissError"/>
Error fetching user
</span>
<i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
<a href="#" v-if="hidden"><i class="icon-user-plus user-finder-icon" @click.prevent="toggleHidden"/></a>
<span v-else>
<input class="user-finder-input base03-border" @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text"/>
<i class="icon-cancel user-finder-icon" @click="toggleHidden"/> <i class="icon-cancel user-finder-icon" @click="toggleHidden"/>
</span>
</span> </span>
</template> </template>
@ -20,4 +27,11 @@
border-radius: 5px; border-radius: 5px;
padding: 0.1em 0.2em 0.2em 0.2em; padding: 0.1em 0.2em 0.2em 0.2em;
} }
.finder-error {
background-color: rgba(255, 48, 16, 0.65);
margin: 0.35em;
border-radius: 5px;
padding: 0.25em;
}
</style> </style>

View file

@ -8,6 +8,13 @@
animation: spin 2s infinite linear; animation: spin 2s infinite linear;
display: inline-block; display: inline-block;
} }
.animate-spin-slow {
-moz-animation: spin 4s infinite linear;
-o-animation: spin 4s infinite linear;
-webkit-animation: spin 4s infinite linear;
animation: spin 4s infinite linear;
display: inline-block;
}
@-moz-keyframes spin { @-moz-keyframes spin {
0% { 0% {
-moz-transform: rotate(0deg); -moz-transform: rotate(0deg);