Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Prevent event propagation when clicking icon buttons (#11515)
Browse files Browse the repository at this point in the history 
* Prevent event propagation when clicking icon buttons

* Inhibit view user on click behaviour for room header face pile

* Update snapshot
  • Loading branch information
Germain authored Sep 4, 2023
1 parent 406656b commit b75b6f7
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 35 deletions.
19 changes: 17 additions & 2 deletions src/components/views/elements/FacePile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
),
);
Expand Down
79 changes: 46 additions & 33 deletions src/components/views/rooms/RoomHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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>
Expand Down
4 changes: 4 additions & 0 deletions test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -53,13 +55,15 @@ 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"
>
<div />
</button>
<button
class="_icon-button_1k9cw_17"
data-state="closed"
style="--cpd-icon-button-size: 32px;"
title="Notifications"
>
Expand Down

0 comments on commit b75b6f7

Please sign in to comment.