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:
parent
406656b1f8
commit
b75b6f7f74
3 changed files with 67 additions and 35 deletions
|
@ -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>
|
||||
),
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
>
|
||||
|
|
Loading…
Reference in a new issue