cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-11-26 00:50:56 -05:00
Code Issues Projects Releases Packages Wiki Activity

Add collapsible sections in friends menu.

Browse source
This commit is contained in:
Paul 2021-07-02 16:47:42 +01:00
parent 1cb59ca40c
commit bfb15e3109
2 changed files with 56 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/pages/friends/Friend.module.scss
View file

@ -18,6 +18,27 @@
} }
} }
details {
summary {
outline: none;
list-style: none;
&::marker, &::-webkit-details-marker {
display: none;
}
svg {
transition: .2s ease transform;
}
}
&:not([open]) {
summary svg {
transform: rotateZ(-90deg);
}
}
}
&[data-empty="true"] { &[data-empty="true"] {
img { img {
height: 120px; height: 120px;

93
src/pages/friends/Friends.tsx
View file

@ -18,21 +18,25 @@ export default function Friends() {
const users = useUsers() as User[]; const users = useUsers() as User[];
users.sort((a, b) => a.username.localeCompare(b.username)); users.sort((a, b) => a.username.localeCompare(b.username));
const pending = users.filter( const friends = users.filter(x => x.relationship === Users.Relationship.Friend);
x =>
const lists = [
[ 'app.special.friends.pending', users.filter(x =>
x.relationship === Users.Relationship.Incoming || x.relationship === Users.Relationship.Incoming ||
x.relationship === Users.Relationship.Outgoing x.relationship === Users.Relationship.Outgoing
); ) ],
const friends = users.filter( [ 'app.status.online', friends.filter(x =>
x => x.relationship === Users.Relationship.Friend x.online && x.status?.presence !== Users.Presence.Invisible
); ) ],
const blocked = users.filter( [ 'app.status.offline', friends.filter(x =>
x => x.relationship === Users.Relationship.Blocked !x.online || x.status?.presence === Users.Presence.Invisible
); ) ],
[ 'app.special.friends.blocked', friends.filter(x =>
const online = friends.filter(x => x.online && x.status?.presence !== Users.Presence.Invisible); x.relationship === Users.Relationship.Blocked
const offline = friends.filter(x => !x.online || x.status?.presence === Users.Presence.Invisible); ) ]
] as [ string, User[] ][];
const isEmpty = lists.reduce((p: number, n) => p + n.length, 0) === 0;
return ( return (
<> <>
<Header placement="primary"> <Header placement="primary">
@ -59,57 +63,30 @@ export default function Friends() {
</Tooltip> </Tooltip>
*/} */}
</Header> </Header>
<div <div className={styles.list} data-empty={isEmpty}>
className={styles.list} {isEmpty && (
data-empty={
pending.length + friends.length + blocked.length === 0
}
>
{pending.length + friends.length + blocked.length === 0 && (
<> <>
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" /> <img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
<Text id="app.special.friends.nobody" /> <Text id="app.special.friends.nobody" />
</> </>
)} )}
{pending.length > 0 && ( {
<Overline className={styles.overline} type="subtle"> lists.map(([i18n, list]) => {
<ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */} if (list.length === 0) return;
<Text id="app.special.friends.pending" /> —{" "}
{pending.length} return (
</Overline> <details open>
)} <summary>
{pending.map(y => ( <Overline className={styles.overline} type="subtle">
<Friend key={y._id} user={y} /> <ChevronDown size={20} />
))} <Text id={i18n} /> — { list.length }
{online.length > 0 && ( </Overline>
<Overline className={styles.overline} type="subtle"> </summary>
<ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */} { list.map(x => <Friend key={x._id} user={x} />) }
<Text id="app.status.online" /> —{" "} </details>
{online.length} )
</Overline> })
)} }
{online.map(y => (
<Friend key={y._id} user={y} />
))}
{offline.length > 0 && (
<Overline className={styles.overline} type="subtle">
<ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
<Text id="app.status.offline" /> —{" "}
{offline.length}
</Overline>
)}
{offline.map(y => (
<Friend key={y._id} user={y} />
))}
{blocked.length > 0 && (
<Overline className={styles.overline} type="subtle">
<Text id="app.special.friends.blocked" /> —{" "}
{blocked.length}
</Overline>
)}
{blocked.map(y => (
<Friend key={y._id} user={y} />
))}
</div> </div>
</> </>
); );