Prevent event propagation when clicking icon buttons (#11515)

* Prevent event propagation when clicking icon buttons

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

* Update snapshot
This commit is contained in:
Germain 2023-09-04 12:42:27 +01:00 committed by GitHub
parent 406656b1f8
commit b75b6f7f74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 35 deletions

View file

@ -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>
),
);

View file

@ -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>

View file

@ -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"
>