imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace timeline tooltips to match breadcrumb tooltips

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-13 23:14:00 +01:00
parent 145b154a01
commit 646c5d4a64
5 changed files with 53 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/components/views/messages/ReactionsRowButton.js
View file

@ -19,10 +19,11 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import * as sdk from '../../../index';
import { _t } from '../../../languageHandler';
import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
import dis from "../../../dispatcher/dispatcher";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import {unicodeToShortcode} from "../../../HtmlUtils";
export default class ReactionsRowButton extends React.PureComponent {
static propTypes = {
@ -38,14 +39,6 @@ export default class ReactionsRowButton extends React.PureComponent {
myReactionEvent: PropTypes.object,
}
constructor(props) {
super(props);
this.state = {
tooltipVisible: false,
};
}
onClick = (ev) => {
const { mxEvent, myReactionEvent, content } = this.props;
if (myReactionEvent) {
@ -65,24 +58,7 @@ export default class ReactionsRowButton extends React.PureComponent {
}
};
onMouseOver = () => {
this.setState({
// To avoid littering the DOM with a tooltip for every reaction,
// only render it on first use.
tooltipRendered: true,
tooltipVisible: true,
});
}
onMouseOut = () => {
this.setState({
tooltipVisible: false,
});
}
render() {
const ReactionsRowButtonTooltip =
sdk.getComponent('messages.ReactionsRowButtonTooltip');
const { mxEvent, content, count, reactionEvents, myReactionEvent } = this.props;
const classes = classNames({
@ -90,18 +66,9 @@ export default class ReactionsRowButton extends React.PureComponent {
mx_ReactionsRowButton_selected: !!myReactionEvent,
});
let tooltip;
if (this.state.tooltipRendered) {
tooltip = <ReactionsRowButtonTooltip
mxEvent={this.props.mxEvent}
content={content}
reactionEvents={reactionEvents}
visible={this.state.tooltipVisible}
/>;
}
const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
let label;
let tooltip;
if (room) {
const senders = [];
for (const reactionEvent of reactionEvents) {
@ -126,14 +93,37 @@ export default class ReactionsRowButton extends React.PureComponent {
},
},
);
const shortName = unicodeToShortcode(content);
tooltip = <div>{_t(
"<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
{
shortName,
},
{
reactors: () => {
return <div className="mx_ReactionsRowButtonTooltip_senders">
{formatCommaSeparatedList(senders, 6)}
</div>;
},
reactedWith: (sub) => {
if (!shortName) {
return null;
}
return <div className="mx_ReactionsRowButtonTooltip_reactedWith">
{sub}
</div>;
},
},
)}</div>;
}
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return <AccessibleButton className={classes}
aria-label={label}
return <AccessibleTooltipButton
className={classes}
onClick={this.onClick}
onMouseOver={this.onMouseOver}
onMouseOut={this.onMouseOut}
title={label}
tooltip={tooltip}
tooltipClassName="mx_Tooltip_timeline"
>
<span className="mx_ReactionsRowButton_content" aria-hidden="true">
{content}
@ -141,7 +131,6 @@ export default class ReactionsRowButton extends React.PureComponent {
<span className="mx_ReactionsRowButton_count" aria-hidden="true">
{count}
</span>
{tooltip}
</AccessibleButton>;
</AccessibleTooltipButton>;
}
}