michael/cinny
1
0
Fork 0
Code Issues 8 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

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

@ -137,6 +137,10 @@ 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">
<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 <SegmentedControls
selected={ selected={
(() => { (() => {
@ -150,9 +154,8 @@ function RoomMembers({ roomId }) {
setMembership(memberships[index]); setMembership(memberships[index]);
}} }}
/> />
<Input onChange={handleSearch} label="Search member" placeholder="name" /> </div>
<div className="room-members__list"> <div className="room-members__list">
<MenuHeader>{`${searchMembers ? `Found — ${mList.length}` : members.length} members`}</MenuHeader>
{mList.map((member) => ( {mList.map((member) => (
<PeopleSelector <PeopleSelector
key={member.userId} key={member.userId}

22
src/app/molecules/room-members/RoomMembers.scss
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);
} }