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

Improve Tooltip font/layout consistency

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2020-07-16 15:15:00 +01:00
parent b6cd8065f8
commit d5f2d43429
7 changed files with 28 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/views/elements/AccessibleTooltipButton.tsx
View file

@ -24,6 +24,7 @@ import Tooltip from './Tooltip';
interface ITooltipProps extends IProps {
title: string;
tooltip?: React.ReactNode;
tooltipClassName?: string;
}
@ -52,7 +53,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
};
render() {
const {title, children, ...props} = this.props;
const {title, tooltip, children, ...props} = this.props;
const tooltipClassName = classnames(
"mx_AccessibleTooltipButton_tooltip",
this.props.tooltipClassName,
@ -61,7 +62,7 @@ export default class AccessibleTooltipButton extends React.PureComponent<IToolti
const tip = this.state.hover ? <Tooltip
className="mx_AccessibleTooltipButton_container"
tooltipClassName={tooltipClassName}
label={title}
label={tooltip || title}
/> : <div />;
return (
<AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>

4
src/components/views/messages/ReactionsRowButtonTooltip.js
View file

@ -55,7 +55,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
},
{
reactors: () => {
return <div className="mx_ReactionsRowButtonTooltip_senders">
return <div className="mx_Tooltip_title">
{formatCommaSeparatedList(senders, 6)}
</div>;
},
@ -63,7 +63,7 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent {
if (!shortName) {
return null;
}
return <div className="mx_ReactionsRowButtonTooltip_reactedWith">
return <div className="mx_Tooltip_sub">
{sub}
</div>;
},

10
src/components/views/messages/TextualBody.js
View file

@ -376,11 +376,21 @@ export default createReactClass({
const date = this.props.mxEvent.replacingEventDate();
const dateString = date && formatDate(date);
const tooltip = <div>
<div className="mx_Tooltip_title">
{_t("Edited at %(date)s", {date: dateString})}
</div>
<div className="mx_Tooltip_sub">
{_t("Click to view edits")}
</div>
</div>;
return (
<AccessibleTooltipButton
className="mx_EventTile_edited"
onClick={this._openHistoryDialog}
title={_t("Edited at %(date)s. Click to view edits.", {date: dateString})}
tooltip={tooltip}
tooltipClassName="mx_Tooltip_timeline"
>
<span>{`(${_t("edited")})`}</span>