mirror of https://github.com/vector-im/riot-web
Move to `AccessibleTooltipButton` in messages (#12487)
parent
7a4ac57954
commit
357f882ff5
|
@ -28,13 +28,12 @@ import {
|
|||
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
||||
import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import type { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
|
||||
import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
|
||||
import MemberAvatar from "../avatars/MemberAvatar";
|
||||
import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
|
||||
import FacePile from "../elements/FacePile";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { CallDuration, SessionDuration } from "../voip/CallDuration";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
|
||||
const MAX_FACES = 8;
|
||||
|
||||
|
@ -78,15 +77,15 @@ const ActiveCallEvent = forwardRef<any, ActiveCallEventProps>(
|
|||
<FacePile members={facePileMembers} size="24px" overflow={facePileOverflow} />
|
||||
</div>
|
||||
{call && <SessionDuration session={call.session} />}
|
||||
<AccessibleTooltipButton
|
||||
<AccessibleButton
|
||||
className="mx_CallEvent_button"
|
||||
kind={buttonKind}
|
||||
disabled={onButtonClick === null || buttonDisabledTooltip !== undefined}
|
||||
onClick={onButtonClick}
|
||||
tooltip={buttonDisabledTooltip}
|
||||
title={buttonDisabledTooltip}
|
||||
>
|
||||
{buttonText}
|
||||
</AccessibleTooltipButton>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -98,6 +98,7 @@ export default class DownloadActionButton extends React.PureComponent<IProps, IS
|
|||
title={spinner ? _t(this.state.tooltip) : _t("action|download")}
|
||||
onClick={this.onDownloadClick}
|
||||
disabled={!!spinner}
|
||||
placement="left"
|
||||
>
|
||||
<DownloadIcon />
|
||||
{spinner}
|
||||
|
|
|
@ -24,7 +24,6 @@ import MemberAvatar from "../avatars/MemberAvatar";
|
|||
import LegacyCallEventGrouper, { LegacyCallEventGrouperEvent } from "../../structures/LegacyCallEventGrouper";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import InfoTooltip, { InfoTooltipKind } from "../elements/InfoTooltip";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import { formatPreciseDuration } from "../../../DateUtils";
|
||||
import Clock from "../audio_messages/Clock";
|
||||
|
||||
|
@ -114,7 +113,7 @@ export default class LegacyCallEvent extends React.PureComponent<IProps, IState>
|
|||
});
|
||||
|
||||
return (
|
||||
<AccessibleTooltipButton
|
||||
<AccessibleButton
|
||||
className={silenceClass}
|
||||
onClick={this.props.callEventGrouper.toggleSilenced}
|
||||
title={this.state.silenced ? _t("voip|unsilence") : _t("voip|silence")}
|
||||
|
|
|
@ -129,6 +129,7 @@ const OptionsButton: React.FC<IOptionsButtonProps> = ({
|
|||
ref={button}
|
||||
onFocus={onFocus}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
placement="left"
|
||||
>
|
||||
<ContextMenuIcon />
|
||||
</ContextMenuTooltipButton>
|
||||
|
@ -186,6 +187,7 @@ const ReactButton: React.FC<IReactButtonProps> = ({ mxEvent, reactions, onFocusC
|
|||
ref={button}
|
||||
onFocus={onFocus}
|
||||
tabIndex={isActive ? 0 : -1}
|
||||
placement="left"
|
||||
>
|
||||
<EmojiIcon />
|
||||
</ContextMenuTooltipButton>
|
||||
|
@ -391,6 +393,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
|
|||
onClick={this.onEditClick}
|
||||
onContextMenu={this.onEditClick}
|
||||
key="edit"
|
||||
placement="left"
|
||||
>
|
||||
<EditIcon />
|
||||
</RovingAccessibleTooltipButton>,
|
||||
|
@ -404,6 +407,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
|
|||
onClick={this.onCancelClick}
|
||||
onContextMenu={this.onCancelClick}
|
||||
key="cancel"
|
||||
placement="left"
|
||||
>
|
||||
<TrashcanIcon />
|
||||
</RovingAccessibleTooltipButton>
|
||||
|
@ -429,6 +433,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
|
|||
onClick={this.onResendClick}
|
||||
onContextMenu={this.onResendClick}
|
||||
key="resend"
|
||||
placement="left"
|
||||
>
|
||||
<ResendIcon />
|
||||
</RovingAccessibleTooltipButton>,
|
||||
|
@ -455,6 +460,7 @@ export default class MessageActionBar extends React.PureComponent<IMessageAction
|
|||
onClick={this.onReplyClick}
|
||||
onContextMenu={this.onReplyClick}
|
||||
key="reply"
|
||||
placement="left"
|
||||
>
|
||||
<ReplyIcon />
|
||||
</RovingAccessibleTooltipButton>,
|
||||
|
|
|
@ -31,7 +31,6 @@ import { tooltipifyLinks, unmountTooltips } from "../../../utils/tooltipify";
|
|||
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
|
||||
import { isPermalinkHost, tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
|
||||
import { copyPlaintext } from "../../../utils/strings";
|
||||
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
|
||||
import UIStore from "../../../stores/UIStore";
|
||||
import { Action } from "../../../dispatcher/actions";
|
||||
import GenericTextContextMenu from "../context_menus/GenericTextContextMenu";
|
||||
|
@ -522,22 +521,16 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
|
|||
const date = this.props.mxEvent.replacingEventDate();
|
||||
const dateString = date && formatDate(date);
|
||||
|
||||
const tooltip = (
|
||||
<div>
|
||||
<div className="mx_Tooltip_title">{_t("timeline|edits|tooltip_title", { date: dateString })}</div>
|
||||
<div className="mx_Tooltip_sub">{_t("timeline|edits|tooltip_sub")}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<AccessibleTooltipButton
|
||||
<AccessibleButton
|
||||
className="mx_EventTile_edited"
|
||||
onClick={this.openHistoryDialog}
|
||||
title={_t("timeline|edits|tooltip_label", { date: dateString })}
|
||||
tooltip={tooltip}
|
||||
aria-label={_t("timeline|edits|tooltip_label", { date: dateString })}
|
||||
title={_t("timeline|edits|tooltip_title", { date: dateString })}
|
||||
caption={_t("timeline|edits|tooltip_sub")}
|
||||
>
|
||||
<span>{`(${_t("common|edited")})`}</span>
|
||||
</AccessibleTooltipButton>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue