Add hover selection to user list.

This commit is contained in:
Richard Lewis 2018-07-11 02:25:21 +03:00 committed by Pavel Djundik
parent 060097c118
commit c431ac6306
4 changed files with 37 additions and 26 deletions

View File

@ -28,6 +28,7 @@
<template v-if="userSearchInput.length > 0">
<UsernameFiltered
v-for="user in users"
:onHover="hoverUser"
:key="user.original.nick"
:active="user.original === activeUser"
:user="user"/>
@ -35,6 +36,7 @@
<template v-else>
<Username
v-for="user in users"
:onHover="hoverUser"
:key="user.nick"
:active="user === activeUser"
:user="user"/>
@ -75,19 +77,24 @@ export default {
};
},
computed: {
// filteredUsers is computed, to avoid unnecessary filtering
// as it is shared between filtering and keybindings.
filteredUsers() {
return fuzzy.filter(
this.userSearchInput,
this.channel.users,
{
pre: "<b>",
post: "</b>",
extract: (u) => u.nick,
}
);
},
groupedUsers() {
const groups = {};
if (this.userSearchInput) {
const result = fuzzy.filter(
this.userSearchInput,
this.channel.users,
{
pre: "<b>",
post: "</b>",
extract: (u) => u.nick,
}
);
const result = this.filteredUsers;
for (const user of result) {
if (!groups[user.original.mode]) {
@ -131,21 +138,15 @@ export default {
});
el.dispatchEvent(ev);
},
hoverUser(user) {
this.activeUser = user;
},
navigateUserList(direction) {
let users = this.channel.users;
// If a search is active, get the matching user objects
// TODO: this could probably be cached via `computed`
// to avoid refiltering on each keypress
// Only using filteredUsers when we have to avoids filtering when it's not needed
if (this.userSearchInput) {
const results = fuzzy.filter(
this.userSearchInput,
this.channel.users,
{
extract: (u) => u.nick,
}
);
users = results.map((result) => result.original);
users = this.filteredUsers.map((result) => result.original);
}
// Bail out if there's no users to select

View File

@ -2,7 +2,9 @@
<span
:class="['user', $options.filters.colorClass(user.nick), active ? 'active' : '']"
:data-name="user.nick"
role="button">{{ user.mode }}{{ user.nick }}</span>
role="button">{{ user.mode }}{{ user.nick }}
@mouseover="hover"
></span>
</template>
<script>
@ -11,6 +13,12 @@ export default {
props: {
user: Object,
active: Boolean,
onHover: Function,
},
methods: {
hover() {
this.onHover ? this.onHover(this.user) : null;
},
},
};
</script>

View File

@ -2,6 +2,7 @@
<span
:class="['user', $options.filters.colorClass(user.original.nick), active ? 'active' : '']"
:data-name="user.original.nick"
@mouseover="hover"
role="button"
v-html="user.original.mode + user.string"/>
</template>
@ -12,6 +13,12 @@ export default {
props: {
user: Object,
active: Boolean,
onHover: Function,
},
methods: {
hover() {
this.onHover ? this.onHover(this.user.original) : null;
},
},
};
</script>

View File

@ -20,11 +20,6 @@ Vue.filter("friendlysize", friendlysize);
Vue.filter("colorClass", colorClass);
Vue.filter("roundBadgeNumber", roundBadgeNumber);
Vue.config.keyCodes = {
"page-up": 33,
"page-down": 34,
};
const vueApp = new Vue({
el: "#viewport",
data: {