mirror of
https://github.com/element-hq/element-web.git
synced 2024-12-14 08:36:37 +03:00
Added a tooltip
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
parent
ffc0230ab4
commit
33979b3354
1 changed files with 37 additions and 2 deletions
|
@ -26,6 +26,7 @@ import FlairStore from "../../../stores/FlairStore";
|
|||
import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import {Action} from "../../../dispatcher/actions";
|
||||
import Tooltip from './Tooltip';
|
||||
|
||||
class Pill extends React.Component {
|
||||
static roomNotifPos(text) {
|
||||
|
@ -68,6 +69,8 @@ class Pill extends React.Component {
|
|||
group: null,
|
||||
// The room related to the room pill
|
||||
room: null,
|
||||
// Is the user hovering the pill
|
||||
hover: false,
|
||||
};
|
||||
|
||||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event
|
||||
|
@ -154,6 +157,18 @@ class Pill extends React.Component {
|
|||
this._unmounted = true;
|
||||
}
|
||||
|
||||
onMouseOver = () => {
|
||||
this.setState({
|
||||
hover: true,
|
||||
});
|
||||
};
|
||||
|
||||
onMouseLeave = () => {
|
||||
this.setState({
|
||||
hover: false,
|
||||
});
|
||||
};
|
||||
|
||||
doProfileLookup(userId, member) {
|
||||
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
|
||||
if (this._unmounted) {
|
||||
|
@ -256,16 +271,36 @@ class Pill extends React.Component {
|
|||
});
|
||||
|
||||
if (this.state.pillType) {
|
||||
const {yOffset} = this.props;
|
||||
|
||||
let tip;
|
||||
if (this.state.hover) {
|
||||
tip = <Tooltip label={resource} yOffset={yOffset} />;
|
||||
}
|
||||
|
||||
return <MatrixClientContext.Provider value={this._matrixClient}>
|
||||
{ this.props.inMessage ?
|
||||
<a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
|
||||
<a
|
||||
className={classes}
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
data-offset-key={this.props.offsetKey}
|
||||
onMouseOver={this.onMouseOver}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
>
|
||||
{ avatar }
|
||||
{ linkText }
|
||||
</a> :
|
||||
<span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
|
||||
<span
|
||||
className={classes}
|
||||
data-offset-key={this.props.offsetKey}
|
||||
onMouseOver={this.onMouseOver}
|
||||
onMouseLeave={this.onMouseLeave}
|
||||
>
|
||||
{ avatar }
|
||||
{ linkText }
|
||||
</span> }
|
||||
{tip}
|
||||
</MatrixClientContext.Provider>;
|
||||
} else {
|
||||
// Deliberately render nothing if the URL isn't recognised
|
||||
|
|
Loading…
Reference in a new issue