Improve UX of members tab

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2022-01-31 15:20:12 +05:30
parent b5d6f44f4c
commit 63fb4d57e2
2 changed files with 38 additions and 23 deletions

View file

@ -137,22 +137,25 @@ function RoomMembers({ roomId }) {
const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount); const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount);
return ( return (
<div className="room-members"> <div className="room-members">
<SegmentedControls <MenuHeader>Search member</MenuHeader>
selected={ <Input onChange={handleSearch} placeholder="Search for name" />
(() => { <div className="room-members__header">
const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
return getSegmentIndex[membership];
})()
}
segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
onSelect={(index) => {
const memberships = ['join', 'invite', 'ban'];
setMembership(memberships[index]);
}}
/>
<Input onChange={handleSearch} label="Search member" placeholder="name" />
<div className="room-members__list">
<MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader> <MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
<SegmentedControls
selected={
(() => {
const getSegmentIndex = { join: 0, invite: 1, ban: 2 };
return getSegmentIndex[membership];
})()
}
segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
onSelect={(index) => {
const memberships = ['join', 'invite', 'ban'];
setMembership(memberships[index]);
}}
/>
</div>
<div className="room-members__list">
{mList.map((member) => ( {mList.map((member) => (
<PeopleSelector <PeopleSelector
key={member.userId} key={member.userId}

View file

@ -1,17 +1,29 @@
@use '../../partials/flex';
@use '../../partials/dir';
.room-members { .room-members {
& .input-container { & .input-container {
margin: var(--sp-normal); margin: var(--sp-normal);
} }
& .segmented-controls { &__header {
margin: var(--sp-normal);
display: flex; display: flex;
& > * { align-items: flex-start;
flex: 1; & .context-menu__header {
@extend .cp-fx__item-one;
margin-top: 14px;
border-top: 1px solid var(--bg-surface-border);
border-bottom: none;
}
& .segmented-controls {
@include dir.side(margin, 0, var(--sp-normal));
& > button {
padding: var(--sp-ultra-tight) 0;
}
} }
} }
&__list { &__list {
& .people-selector__container:last-child { & .people-selector__container:last-child {
margin-bottom: var(--sp-extra-tight); margin-bottom: var(--sp-extra-tight);
} }