Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-29 03:49:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added a tooltip

Browse Source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-02-12 08:18:27 +01:00
parent ffc0230ab4
commit 33979b3354
No account linked to committer's email address
1 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/views/elements/Pill.js
View File

@ -26,6 +26,7 @@ import FlairStore from "../../../stores/FlairStore";
import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks"; import {getPrimaryPermalinkEntity, parseAppLocalLink} from "../../../utils/permalinks/Permalinks";
import MatrixClientContext from "../../../contexts/MatrixClientContext"; import MatrixClientContext from "../../../contexts/MatrixClientContext";
import {Action} from "../../../dispatcher/actions"; import {Action} from "../../../dispatcher/actions";
import Tooltip from './Tooltip';
class Pill extends React.Component { class Pill extends React.Component {
static roomNotifPos(text) { static roomNotifPos(text) {
@ -68,6 +69,8 @@ class Pill extends React.Component {
group: null, group: null,
// The room related to the room pill // The room related to the room pill
room: null, room: null,
// Is the user hovering the pill
hover: false,
}; };
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
@ -154,6 +157,18 @@ class Pill extends React.Component {
this._unmounted = true; this._unmounted = true;
} }
onMouseOver = () => {
this.setState({
hover: true,
});
};
onMouseLeave = () => {
this.setState({
hover: false,
});
};
doProfileLookup(userId, member) { doProfileLookup(userId, member) {
MatrixClientPeg.get().getProfileInfo(userId).then((resp) => { MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
if (this._unmounted) { if (this._unmounted) {
@ -256,16 +271,36 @@ class Pill extends React.Component {
}); });
if (this.state.pillType) { 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}> return <MatrixClientContext.Provider value={this._matrixClient}>
{ this.props.inMessage ? { 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 } { avatar }
{ linkText } { linkText }
</a> : </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 } { avatar }
{ linkText } { linkText }
</span> } </span> }
{tip}
</MatrixClientContext.Provider>; </MatrixClientContext.Provider>;
} else { } else {
// Deliberately render nothing if the URL isn't recognised // Deliberately render nothing if the URL isn't recognised