Fix: small fixes for members sidebar

This commit is contained in:
nizune 2021-07-01 18:54:11 +02:00
parent ff21d4efa8
commit 71bc438333
5 changed files with 40 additions and 36 deletions

2
external/lang vendored

@ -1 +1 @@
Subproject commit 588b882a3acca644c2f65b67cd341c88fd97989d
Subproject commit 4ef73335436f3118d660cec24ff7972d3ccd5984

View file

@ -64,7 +64,7 @@ const Blocked = styled.div`
svg {
flex-shrink: 0;
margin-inline-end: 8px;
margin-inline-end: 10px;
}
`;

View file

@ -17,11 +17,15 @@
color: var(--tertiary-foreground);
&.normal {
height: 38px;
height: 42px;
}
&.compact {
height: 32px;
&[data-mobile="true"] { // TOFIX: make sure this works on mobile
height: 50px;
}
}
&.user {
@ -65,6 +69,7 @@
}
&.avatar {
display: flex;
flex-shrink: 0;
}

View file

@ -1,7 +1,7 @@
import styles from './Panes.module.scss';
import { useEffect, useState } from "preact/hooks";
import { Servers } from "revolt.js/dist/api/objects";
import Checkbox from "../../../components/ui/Checkbox";
import Tip from "../../../components/ui/Tip";
import UserIcon from "../../../components/common/user/UserIcon";
import { useForceUpdate, useUsers } from "../../../context/revoltjs/hooks";
interface Props {
@ -21,37 +21,15 @@ export function Members({ server }: Props) {
}, [ ]);
return (
<div>
<Tip warning>This section is under construction.</Tip>
{ members && members.length > 0 && users?.map(x => x && <div>
<br/>
<br/>
<br/>
<span>@{x.username}</span>
{ server.roles && Object.keys(server.roles).map(id => {
let role = server.roles?.[id]!;
let member = members.find(y => x._id === y._id.user)!;
return (
<Checkbox checked={member.roles?.includes(id) ?? false} onChange={selected => {
let roles = (member.roles ?? []).filter(z => z !== id);
if (selected) roles.push(id);
ctx.client.servers.members.editMember(server._id, x._id, { roles });
setMembers(
[
...members.filter(e => e._id.user !== x._id),
{
...member,
roles
}
]
);
}}>{ role.name }</Checkbox>
)
}) }
</div>) }
<div className={styles.members}>
<div className={styles.subtitle}>
X Members
</div>
{ members && members.length > 0 && users?.map(x => x &&
<div className={styles.member}>
<div>@{x.username}</div>
</div>)
}
</div>
);
}

View file

@ -55,3 +55,24 @@
}
}
}
.members {
.subtitle {
display: flex;
justify-content: space-between;
font-size: 13px;
text-transform: uppercase;
color: var(--secondary-foreground);
font-weight: 700;
}
.member {
gap: 8px;
padding: 10px;
display: flex;
align-items: center;
flex-direction: row;
background: var(--secondary-background);
}
}