hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve UX of members tab

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/app/molecules/room-members/RoomMembers.jsx
View file

@ -137,22 +137,25 @@ function RoomMembers({ roomId }) {
const mList = searchMembers ? searchMembers.data : members.slice(0, itemCount);
return (
<div className="room-members">
<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]);
}}
/>
<Input onChange={handleSearch} label="Search member" placeholder="name" />
<div className="room-members__list">
<MenuHeader>Search member</MenuHeader>
<Input onChange={handleSearch} placeholder="Search for name" />
<div className="room-members__header">
<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) => (
<PeopleSelector
key={member.userId}

28
src/app/molecules/room-members/RoomMembers.scss
View file

@ -1,17 +1,29 @@
@use '../../partials/flex';
@use '../../partials/dir';
.room-members {
& .input-container {
margin: var(--sp-normal);
}
& .segmented-controls {
margin: var(--sp-normal);
display: flex;
& > * {
flex: 1;
}
}
&__header {
display: flex;
align-items: flex-start;
& .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 {
& .people-selector__container:last-child {
margin-bottom: var(--sp-extra-tight);
}