diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx index 47c05598ba..ab71cff7cb 100644 --- a/src/components/views/elements/FacePile.tsx +++ b/src/components/views/elements/FacePile.tsx @@ -27,15 +27,30 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> { tooltipLabel?: string; tooltipShortcut?: string; children?: ReactNode; + viewUserOnClick?: boolean; } -const FacePile: FC<IProps> = ({ members, size, overflow, tooltipLabel, tooltipShortcut, children, ...props }) => { +const FacePile: FC<IProps> = ({ + members, + size, + overflow, + tooltipLabel, + tooltipShortcut, + children, + viewUserOnClick = true, + ...props +}) => { const faces = members.map( tooltipLabel ? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle /> : (m) => ( <Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}> - <MemberAvatar member={m} size={size} viewUserOnClick={!props.onClick} hideTitle /> + <MemberAvatar + member={m} + size={size} + viewUserOnClick={!props.onClick && viewUserOnClick} + hideTitle + /> </Tooltip> ), ); diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index cdfd6d833d..78d3f8139f 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -175,43 +175,55 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { </Box> <Flex as="nav" align="center" gap="var(--cpd-space-2x)"> {!useElementCallExclusively && ( + <Tooltip label={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!}> + <IconButton + disabled={!!voiceCallDisabledReason} + title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!} + onClick={(evt) => { + evt.stopPropagation(); + placeCall(room, CallType.Voice, voiceCallType); + }} + > + <VoiceCallIcon /> + </IconButton> + </Tooltip> + )} + <Tooltip label={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!}> <IconButton - disabled={!!voiceCallDisabledReason} - title={!voiceCallDisabledReason ? _t("Voice call") : voiceCallDisabledReason!} - onClick={() => { - placeCall(room, CallType.Voice, voiceCallType); + disabled={!!videoCallDisabledReason} + title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!} + onClick={(evt) => { + evt.stopPropagation(); + placeCall(room, CallType.Video, videoCallType); }} > - <VoiceCallIcon /> + <VideoCallIcon /> </IconButton> - )} - <IconButton - disabled={!!videoCallDisabledReason} - title={!videoCallDisabledReason ? _t("Video call") : videoCallDisabledReason!} - onClick={() => { - placeCall(room, CallType.Video, videoCallType); - }} - > - <VideoCallIcon /> - </IconButton> - <IconButton - indicator={notificationColorToIndicator(threadNotifications)} - onClick={() => { - showOrHidePanel(RightPanelPhases.ThreadPanel); - }} - title={_t("common|threads")} - > - <ThreadsIcon /> - </IconButton> - <IconButton - indicator={notificationColorToIndicator(globalNotificationState.color)} - onClick={() => { - showOrHidePanel(RightPanelPhases.NotificationPanel); - }} - title={_t("Notifications")} - > - <NotificationsIcon /> - </IconButton> + </Tooltip> + <Tooltip label={_t("common|threads")}> + <IconButton + indicator={notificationColorToIndicator(threadNotifications)} + onClick={(evt) => { + evt.stopPropagation(); + showOrHidePanel(RightPanelPhases.ThreadPanel); + }} + title={_t("common|threads")} + > + <ThreadsIcon /> + </IconButton> + </Tooltip> + <Tooltip label={_t("Notifications")}> + <IconButton + indicator={notificationColorToIndicator(globalNotificationState.color)} + onClick={(evt) => { + evt.stopPropagation(); + showOrHidePanel(RightPanelPhases.NotificationPanel); + }} + title={_t("Notifications")} + > + <NotificationsIcon /> + </IconButton> + </Tooltip> </Flex> {!isDirectMessage && ( <BodyText @@ -229,6 +241,7 @@ export default function RoomHeader({ room }: { room: Room }): JSX.Element { members={members.slice(0, 3)} size="20px" overflow={false} + viewUserOnClick={false} > {formatCount(memberCount)} </FacePile> diff --git a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap index d1ddaeeb42..c501271b37 100644 --- a/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap @@ -37,6 +37,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` > <button class="_icon-button_1k9cw_17" + data-state="closed" disabled="" style="--cpd-icon-button-size: 32px;" title="There's no one here to call" @@ -45,6 +46,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` </button> <button class="_icon-button_1k9cw_17" + data-state="closed" disabled="" style="--cpd-icon-button-size: 32px;" title="There's no one here to call" @@ -53,6 +55,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` </button> <button class="_icon-button_1k9cw_17" + data-state="closed" style="--cpd-icon-button-size: 32px;" title="Threads" > @@ -60,6 +63,7 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = ` </button> <button class="_icon-button_1k9cw_17" + data-state="closed" style="--cpd-icon-button-size: 32px;" title="Notifications" >