Ordering options for the Who List

This commit is contained in:
Noah 2023-08-05 12:15:16 -07:00
parent 974ee25b48
commit f59a1a6759
3 changed files with 62 additions and 4 deletions

View File

@ -23,6 +23,11 @@ body {
background-color: #ffefff; background-color: #ffefff;
} }
/* Truncate long text, e.g. usernames in the who list */
.truncate-text-line {
text-overflow: ellipsis;
}
/************************ /************************
* Main CSS Grid Layout * * Main CSS Grid Layout *
************************/ ************************/

View File

@ -105,6 +105,7 @@ const app = Vue.createApp({
// Who List for the room. // Who List for the room.
whoList: [], whoList: [],
whoTab: 'online', whoTab: 'online',
whoSort: 'a-z',
whoMap: {}, // map username to wholist entry whoMap: {}, // map username to wholist entry
muted: {}, // muted usernames for client side state muted: {}, // muted usernames for client side state
@ -404,6 +405,40 @@ const app = Vue.createApp({
if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen; if (this.webcam.mutualOpen) status |= this.VideoFlag.MutualOpen;
return status; return status;
}, },
sortedWhoList() {
let result = [...this.whoList];
switch (this.whoSort) {
case "broadcasting":
result.sort((a, b) => {
return (b.video & this.VideoFlag.Active) - (a.video & this.VideoFlag.Active);
});
break;
case "nsfw":
result.sort((a, b) => {
let left = (a.video & (this.VideoFlag.Active | this.VideoFlag.NSFW)),
right = (b.video & (this.VideoFlag.Active | this.VideoFlag.NSFW));
return right - left;
});
break;
case "status":
result.sort((a, b) => {
if (a.status === b.status) return 0;
return b.status < a.status ? -1 : 1;
});
break;
case "op":
result.sort((a, b) => {
return b.op - a.op;
});
break;
case "z-a":
result = result.reverse();
}
// Default ordering from ChatServer = a-z
return result;
},
}, },
methods: { methods: {
// Load user prefs from localStorage, called on startup // Load user prefs from localStorage, called on startup

View File

@ -963,7 +963,7 @@
<div class="card-content p-2"> <div class="card-content p-2">
<div class="columns is-mobile mb-0"> <div class="columns is-mobile mb-0">
<div class="column is-narrow"> <div class="column is-one-quarter">
Status: Status:
</div> </div>
<div class="column"> <div class="column">
@ -978,6 +978,24 @@
</div> </div>
</div> </div>
<div class="columns is-mobile mb-0 mt-1">
<div class="column is-one-quarter">
Sort:
</div>
<div class="column">
<div class="select is-small is-fullwidth">
<select v-model="whoSort">
<option value="a-z">Username (a-z)</option>
<option value="z-a">Username (z-a)</option>
<option value="broadcasting">Broadcasting</option>
<option value="nsfw" v-show="config.permitNSFW">Red cameras</option>
<option value="status">Status</option>
<option value="op">User level</option>
</select>
</div>
</div>
</div>
<div class="tabs has-text-small"> <div class="tabs has-text-small">
<ul> <ul>
<li :class="{'is-active': whoTab==='online'}"> <li :class="{'is-active': whoTab==='online'}">
@ -998,7 +1016,7 @@
<!-- Who Is Online --> <!-- Who Is Online -->
<ul class="menu-list" v-if="whoTab==='online'"> <ul class="menu-list" v-if="whoTab==='online'">
<li v-for="(u, i) in whoList" v-bind:key="i"> <li v-for="(u, i) in sortedWhoList" v-bind:key="i">
<div class="columns is-mobile"> <div class="columns is-mobile">
<!-- Avatar URL if available --> <!-- Avatar URL if available -->
<div class="column is-narrow pr-0" style="position: relative"> <div class="column is-narrow pr-0" style="position: relative">
@ -1016,12 +1034,12 @@
</div> </div>
</a> </a>
</div> </div>
<div class="column pr-0" <div class="column pr-0 is-clipped"
:class="{'pl-1': u.avatar}"> :class="{'pl-1': u.avatar}">
<i class="fa fa-gavel has-text-warning-dark" <i class="fa fa-gavel has-text-warning-dark"
v-if="u.op" v-if="u.op"
title="Operator"></i> title="Operator"></i>
[[ u.username ]] <span class="truncate-text-line">[[ u.username ]]</span>
</div> </div>
<div class="column is-narrow pl-0"> <div class="column is-narrow pl-0">
<!-- Profile button --> <!-- Profile button -->