Allow room tile context menu when minimized using right click

This commit is contained in:
Michael Telatynski 2020-08-14 12:01:16 +01:00
parent b577667447
commit 8f0e4dae9d
2 changed files with 19 additions and 3 deletions

View file

@ -25,6 +25,7 @@ interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
title: string; title: string;
tooltip?: React.ReactNode; tooltip?: React.ReactNode;
tooltipClassName?: string; tooltipClassName?: string;
forceHide?: boolean;
} }
interface IState { interface IState {
@ -39,7 +40,16 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
}; };
} }
componentDidUpdate(prevProps: Readonly<ITooltipProps>) {
if (!prevProps.forceHide && this.props.forceHide && this.state.hover) {
this.setState({
hover: false,
});
}
}
onMouseOver = () => { onMouseOver = () => {
if (this.props.forceHide) return;
this.setState({ this.setState({
hover: true, hover: true,
}); });

View file

@ -113,7 +113,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
}; };
private get showContextMenu(): boolean { private get showContextMenu(): boolean {
return !this.props.isMinimized && this.props.tag !== DefaultTagID.Invite; return this.props.tag !== DefaultTagID.Invite;
} }
private get showMessagePreview(): boolean { private get showMessagePreview(): boolean {
@ -304,7 +304,9 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
private onClickMute = ev => this.saveNotifState(ev, MUTE); private onClickMute = ev => this.saveNotifState(ev, MUTE);
private renderNotificationsMenu(isActive: boolean): React.ReactElement { private renderNotificationsMenu(isActive: boolean): React.ReactElement {
if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived || !this.showContextMenu) { if (MatrixClientPeg.get().isGuest() || this.props.tag === DefaultTagID.Archived ||
!this.showContextMenu || this.props.isMinimized
) {
// the menu makes no sense in these cases so do not show one // the menu makes no sense in these cases so do not show one
return null; return null;
} }
@ -530,9 +532,13 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
ariaDescribedBy = messagePreviewId(this.props.room.roomId); ariaDescribedBy = messagePreviewId(this.props.room.roomId);
} }
const props: Partial<React.ComponentProps<typeof AccessibleTooltipButton>> = {};
let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton; let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
if (this.props.isMinimized) { if (this.props.isMinimized) {
Button = AccessibleTooltipButton; Button = AccessibleTooltipButton;
props.title = name;
// force the tooltip to hide whilst we are showing the context menu
props.forceHide = !!this.state.generalMenuPosition;
} }
return ( return (
@ -540,6 +546,7 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
<RovingTabIndexWrapper inputRef={this.roomTileRef}> <RovingTabIndexWrapper inputRef={this.roomTileRef}>
{({onFocus, isActive, ref}) => {({onFocus, isActive, ref}) =>
<Button <Button
{...props}
onFocus={onFocus} onFocus={onFocus}
tabIndex={isActive ? 0 : -1} tabIndex={isActive ? 0 : -1}
inputRef={ref} inputRef={ref}
@ -550,7 +557,6 @@ export default class RoomTile extends React.PureComponent<IProps, IState> {
aria-label={ariaLabel} aria-label={ariaLabel}
aria-selected={this.state.selected} aria-selected={this.state.selected}
aria-describedby={ariaDescribedBy} aria-describedby={ariaDescribedBy}
title={this.props.isMinimized ? name : undefined}
> >
{roomAvatar} {roomAvatar}
{nameContainer} {nameContainer}