mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-10 01:00:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Re-arrange more options and add checks for each option to see if it is a call room (probably should manage a state to see if a header is already on screen and provide a slightly modified visual based on that for call rooms)

Browse source
This commit is contained in:
Gigiaj 2025-06-10 20:01:15 -05:00
parent 7228c2e35f
commit 02ac70affc
1 changed files with 88 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

172
src/app/features/room/RoomViewHeader.tsx
View file

@ -344,61 +344,45 @@ export function RoomViewHeader() {
)} )}
</Box> </Box>
</Box> </Box>
{(room.isCallRoom() && !isDirectMessage() && (
<Box> <Box shrink="No">
{false && isDirectMessage() && (
<TooltipProvider
position="Bottom"
align="End"
offset={4}
tooltip={
<Tooltip>
<Text>Start a call</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton onClick={handleCall} ref={triggerRef}>
<Icon size="400" src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
)}
{!ecryptedRoom && !room.isCallRoom() && (
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
offset={4} offset={4}
tooltip={ tooltip={
<Tooltip> <Tooltip>
<Text>Chat</Text> <Text>Search</Text>
</Tooltip> </Tooltip>
} }
> >
{(triggerRef) => ( {(triggerRef) => (
<IconButton ref={triggerRef} onClick={toggleChat}> <IconButton ref={triggerRef} onClick={handleSearchClick}>
<Icon size="400" src={Icons.Message} /> <Icon size="400" src={Icons.Search} />
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
</Box> )}
)) || ( {!room.isCallRoom() && (
<Box shrink="No">
{false && isDirectMessage() && (
<TooltipProvider
position="Bottom"
align="End"
offset={4}
tooltip={
<Tooltip>
<Text>Start a call</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton onClick={handleCall} ref={triggerRef}>
<Icon size="400" src={Icons.Phone} />
</IconButton>
)}
</TooltipProvider>
)}
{!ecryptedRoom && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Search</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton ref={triggerRef} onClick={handleSearchClick}>
<Icon size="400" src={Icons.Search} />
</IconButton>
)}
</TooltipProvider>
)}
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
offset={4} offset={4}
@ -436,6 +420,8 @@ export function RoomViewHeader() {
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
)}
{!room.isCallRoom() && (
<PopOut <PopOut
anchor={pinMenuAnchor} anchor={pinMenuAnchor}
position="Bottom" position="Bottom"
@ -455,62 +441,80 @@ export function RoomViewHeader() {
</FocusTrap> </FocusTrap>
} }
/> />
)}
{screenSize === ScreenSize.Desktop && ( {!room.isCallRoom() && screenSize === ScreenSize.Desktop && (
<TooltipProvider
position="Bottom"
offset={4}
tooltip={
<Tooltip>
<Text>Members</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
<Icon size="400" src={Icons.User} />
</IconButton>
)}
</TooltipProvider>
)}
<TooltipProvider <TooltipProvider
position="Bottom" position="Bottom"
align="End"
offset={4} offset={4}
tooltip={ tooltip={
<Tooltip> <Tooltip>
<Text>More Options</Text> <Text>Members</Text>
</Tooltip> </Tooltip>
} }
> >
{(triggerRef) => ( {(triggerRef) => (
<IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}> <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
<Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} /> <Icon size="400" src={Icons.User} />
</IconButton> </IconButton>
)} )}
</TooltipProvider> </TooltipProvider>
<PopOut )}
anchor={menuAnchor}
<TooltipProvider
position="Bottom"
align="End"
offset={4}
tooltip={
<Tooltip>
<Text>More Options</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
<Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
</IconButton>
)}
</TooltipProvider>
<PopOut
anchor={menuAnchor}
position="Bottom"
align="End"
content={
<FocusTrap
focusTrapOptions={{
initialFocus: false,
returnFocusOnDeactivate: false,
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
</FocusTrap>
}
/>
{room.isCallRoom() && !isDirectMessage() && (
<TooltipProvider
position="Bottom" position="Bottom"
align="End" offset={4}
content={ tooltip={
<FocusTrap <Tooltip>
focusTrapOptions={{ <Text>Chat</Text>
initialFocus: false, </Tooltip>
returnFocusOnDeactivate: false,
onDeactivate: () => setMenuAnchor(undefined),
clickOutsideDeactivates: true,
isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
escapeDeactivates: stopPropagation,
}}
>
<RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
</FocusTrap>
} }
/> >
</Box> {(triggerRef) => (
)} <IconButton ref={triggerRef} onClick={toggleChat}>
<Icon size="400" src={Icons.Message} />
</IconButton>
)}
</TooltipProvider>
)}
</Box>
</Box> </Box>
</PageHeader> </PageHeader>
); );