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

Prevent event propagation when clicking icon buttons #11515

Merged
merged 3 commits into from
Sep 4, 2023
Merged

Prevent event propagation when clicking icon buttons #11515

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c327dc3
Prevent event propagation when clicking icon buttons
Sep 1, 2023
3ca8619
Inhibit view user on click behaviour for room header face pile
Sep 1, 2023
5ed2a22
Update snapshot
Sep 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions src/components/views/elements/FacePile.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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