OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Add tooltips to minimized roomlist2 tiles and sublists 

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
pull/21833/head
Michael Telatynski 2020-07-17 18:16:00 +01:00
parent efd0bd3d00
commit 23fa952905
3 changed files with 43 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/views/rooms/RoomSublist2.tsx
View File

@ -28,7 +28,7 @@ import { ListLayout } from "../../../stores/room-list/ListLayout";
import {
ChevronFace,
ContextMenu,
ContextMenuButton,
ContextMenuTooltipButton,
StyledMenuItemCheckbox,
StyledMenuItemRadio,
} from "../../structures/ContextMenu";
@ -499,10 +499,10 @@ export default class RoomSublist2 extends React.Component<IProps, IState> {
return (
<React.Fragment>
<ContextMenuButton
<ContextMenuTooltipButton
className="mx_RoomSublist2_menuButton"
onClick={this.onOpenMenuClick}
label={_t("List options")}
title={_t("List options")}
isExpanded={!!this.state.contextMenuPosition}
/>
{contextMenu}

21
src/components/views/rooms/RoomTile2.tsx
View File

@ -29,7 +29,7 @@ import { _t } from "../../../languageHandler";
import {
ChevronFace,
ContextMenu,
ContextMenuButton,
ContextMenuTooltipButton,
MenuItemRadio,
MenuItemCheckbox,
MenuItem,
@ -54,6 +54,7 @@ import defaultDispatcher from "../../../dispatcher/dispatcher";
import {ActionPayload} from "../../../dispatcher/payloads";
import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
import { NotificationState } from "../../../stores/notifications/NotificationState";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
// TODO: Rename on launch: https://github.com/vector-im/riot-web/issues/14367
@ -373,10 +374,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
return (
<React.Fragment>
<ContextMenuButton
<ContextMenuTooltipButton
className={classes}
onClick={this.onNotificationsMenuOpenClick}
label={_t("Notification options")}
title={_t("Notification options")}
isExpanded={!!this.state.notificationsMenuPosition}
tabIndex={isActive ? 0 : -1}
/>
@ -441,10 +442,10 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
return (
<React.Fragment>
<ContextMenuButton
<ContextMenuTooltipButton
className="mx_RoomTile2_menuButton"
onClick={this.onGeneralMenuOpenClick}
label={_t("Room options")}
title={_t("Room options")}
isExpanded={!!this.state.generalMenuPosition}
/>
{contextMenu}
@ -537,11 +538,16 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
ariaDescribedBy = messagePreviewId(this.props.room.roomId);
}
let Button: React.ComponentType<React.ComponentProps<typeof AccessibleButton>> = AccessibleButton;
if (this.props.isMinimized) {
Button = AccessibleTooltipButton;
}
return (
<React.Fragment>
<RovingTabIndexWrapper inputRef={this.roomTileRef}>
{({onFocus, isActive, ref}) =>
<AccessibleButton
<Button
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
inputRef={ref}
@ -554,13 +560,14 @@ export default class RoomTile2 extends React.Component<IProps, IState> {
aria-label={ariaLabel}
aria-selected={this.state.selected}
aria-describedby={ariaDescribedBy}
title={this.props.isMinimized ? name : undefined}
>
{roomAvatar}
{nameContainer}
{badge}
{this.renderGeneralMenu()}
{this.renderNotificationsMenu(isActive)}
</AccessibleButton>
</Button>
}
</RovingTabIndexWrapper>
</React.Fragment>

49
src/components/views/rooms/TemporaryTile.tsx
View File

@ -16,7 +16,11 @@ limitations under the License.
import React from "react";
import classNames from "classnames";
import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex";
import {
RovingAccessibleButton,
RovingAccessibleTooltipButton,
RovingTabIndexWrapper
} from "../../../accessibility/RovingTabIndex";
import AccessibleButton from "../../views/elements/AccessibleButton";
import NotificationBadge from "./NotificationBadge";
import { NotificationState } from "../../../stores/notifications/NotificationState";
@ -86,30 +90,29 @@ export default class TemporaryTile extends React.Component<IProps, IState> {
);
if (this.props.isMinimized) nameContainer = null;
let Button = RovingAccessibleButton;
if (this.props.isMinimized) {
Button = RovingAccessibleTooltipButton;
}
return (
<React.Fragment>
<RovingTabIndexWrapper>
{({onFocus, isActive, ref}) =>
<AccessibleButton
onFocus={onFocus}
tabIndex={isActive ? 0 : -1}
inputRef={ref}
className={classes}
onMouseEnter={this.onTileMouseEnter}
onMouseLeave={this.onTileMouseLeave}
onClick={this.props.onClick}
role="treeitem"
>
<div className="mx_RoomTile2_avatarContainer">
{this.props.avatar}
</div>
{nameContainer}
<div className="mx_RoomTile2_badgeContainer">
{badge}
</div>
</AccessibleButton>
}
</RovingTabIndexWrapper>
<Button
className={classes}
onMouseEnter={this.onTileMouseEnter}
onMouseLeave={this.onTileMouseLeave}
onClick={this.props.onClick}
role="treeitem"
title={this.props.isMinimized ? name : undefined}
>
<div className="mx_RoomTile2_avatarContainer">
{this.props.avatar}
</div>
{nameContainer}
<div className="mx_RoomTile2_badgeContainer">
{badge}
</div>
</Button>
</React.Fragment>
);
}