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

Fix member panel filter layout (#1307)

Browse source 
* fix member panel filter layout

* make member role text lowercase
This commit is contained in:
Ajay Bura 2023-06-23 09:46:04 +10:00 committed by GitHub
parent c07905c360
commit b19e248383
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/organisms/room/MembersDrawer.css.ts
View file

@ -41,7 +41,7 @@ export const DrawerScrollTop = style({
}); });
export const DrawerGroup = style({ export const DrawerGroup = style({
padding: `0 ${config.space.S100} 0 ${config.space.S300}`, paddingLeft: config.space.S200,
}); });
export const MembersGroup = style({ export const MembersGroup = style({

48
src/app/organisms/room/MembersDrawer.tsx
View file

@ -75,7 +75,7 @@ const useMembershipFilterMenu = (): MembershipFilter[] =>
{ {
name: 'Joined', name: 'Joined',
filterFn: MembershipFilters.filterJoined, filterFn: MembershipFilters.filterJoined,
color: 'Surface', color: 'Background',
}, },
{ {
name: 'Invited', name: 'Invited',
@ -131,11 +131,11 @@ const useSortFilterMenu = (): SortFilter[] =>
filterFn: SortFilters.filterDescending, filterFn: SortFilters.filterDescending,
}, },
{ {
name: 'Newest First', name: 'New First',
filterFn: SortFilters.filterNewestFirst, filterFn: SortFilters.filterNewestFirst,
}, },
{ {
name: 'Oldest First', name: 'Old First',
filterFn: SortFilters.filterOldest, filterFn: SortFilters.filterOldest,
}, },
], ],
@ -275,10 +275,9 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
</Header> </Header>
<Box className={css.MemberDrawerContentBase} grow="Yes"> <Box className={css.MemberDrawerContentBase} grow="Yes">
<Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover"> <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover">
<Box className={css.MemberDrawerContent} direction="Column" gap="400"> <Box className={css.MemberDrawerContent} direction="Column" gap="300">
<Box className={css.DrawerGroup} direction="Column" gap="100"> <Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="100">
<Text size="L400">Filter</Text> <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
<Box alignItems="Center" gap="100" wrap="Wrap">
<UseStateProvider initial={false}> <UseStateProvider initial={false}>
{(open, setOpen) => ( {(open, setOpen) => (
<PopOut <PopOut
@ -304,6 +303,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
? menuItem.color ? menuItem.color
: 'Surface' : 'Surface'
} }
aria-pressed={menuItem.name === filter.membershipFilter.name}
radii="300" radii="300"
onClick={() => { onClick={() => {
setFilter((f) => ({ ...f, membershipFilter: menuItem })); setFilter((f) => ({ ...f, membershipFilter: menuItem }));
@ -322,9 +322,9 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
ref={anchorRef} ref={anchorRef}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
variant={filter.membershipFilter.color} variant={filter.membershipFilter.color}
radii="400" size="400"
outlined radii="300"
after={<Icon src={Icons.ChevronBottom} size="50" />} before={<Icon src={Icons.Funnel} size="50" />}
> >
<Text size="T200">{filter.membershipFilter.name}</Text> <Text size="T200">{filter.membershipFilter.name}</Text>
</Chip> </Chip>
@ -337,7 +337,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<PopOut <PopOut
open={open} open={open}
position="Bottom" position="Bottom"
align="Start" align="End"
content={ content={
<FocusTrap <FocusTrap
focusTrapOptions={{ focusTrapOptions={{
@ -371,31 +371,26 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
<Chip <Chip
ref={anchorRef} ref={anchorRef}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
variant="Surface" variant="Background"
radii="400" size="400"
outlined radii="300"
after={<Icon src={Icons.ChevronBottom} size="50" />} after={<Icon src={Icons.Category} size="50" />}
> >
<Text size="T200">{`Order: ${filter.sortFilter.name}`}</Text> <Text size="T200">{filter.sortFilter.name}</Text>
</Chip> </Chip>
)} )}
</PopOut> </PopOut>
)} )}
</UseStateProvider> </UseStateProvider>
</Box> </Box>
</Box>
<Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Search</Text>
<Input <Input
ref={searchInputRef} ref={searchInputRef}
onChange={handleSearchChange} onChange={handleSearchChange}
style={{ paddingRight: config.space.S200 }} style={{ paddingRight: config.space.S200 }}
placeholder="Type name..." placeholder="Type name..."
variant="Surface" variant="Surface"
size="400"
outlined
radii="400"
before={<Icon size="50" src={Icons.Search} />} before={<Icon size="50" src={Icons.Search} />}
after={ after={
result && ( result && (
@ -403,8 +398,12 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
variant={result.items.length > 0 ? 'Success' : 'Critical'} variant={result.items.length > 0 ? 'Success' : 'Critical'}
size="400" size="400"
radii="Pill" radii="Pill"
aria-pressed
onClick={() => { onClick={() => {
if (searchInputRef.current) searchInputRef.current.value = ''; if (searchInputRef.current) {
searchInputRef.current.value = '';
searchInputRef.current.focus();
}
resetSearch(); resetSearch();
}} }}
after={<Icon size="50" src={Icons.Cross} />} after={<Icon size="50" src={Icons.Cross} />}
@ -417,6 +416,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
} }
/> />
</Box> </Box>
</Box>
{!onTop && ( {!onTop && (
<Box className={css.DrawerScrollTop}> <Box className={css.DrawerScrollTop}>
@ -458,7 +458,7 @@ export function MembersDrawer({ room }: MembersDrawerProps) {
ref={virtualizer.measureElement} ref={virtualizer.measureElement}
key={`${room.roomId}-${vItem.index}`} key={`${room.roomId}-${vItem.index}`}
className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)} className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)}
size="O400" size="L400"
> >
{tagOrMember.name} {tagOrMember.name}
</Text> </Text>