Add hover selection to user list.
This commit is contained in:
parent
060097c118
commit
c431ac6306
@ -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
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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: {
|
||||
|
Loading…
Reference in New Issue
Block a user