diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js index d661d439bf..cefd278399 100644 --- a/src/components/views/rooms/RoomBreadcrumbs.js +++ b/src/components/views/rooms/RoomBreadcrumbs.js @@ -21,6 +21,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg"; import AccessibleButton from '../elements/AccessibleButton'; import RoomAvatar from '../avatars/RoomAvatar'; import classNames from 'classnames'; +import sdk from "../../../index"; const MAX_ROOMS = 20; @@ -83,7 +84,24 @@ export default class RoomBreadcrumbs extends React.Component { dis.dispatch({action: "view_room", room_id: room.roomId}); } + _onMouseEnter(room) { + this._onHover(room); + } + + _onMouseLeave(room) { + this._onHover(null); // clear hover states + } + + _onHover(room) { + const rooms = this.state.rooms.slice(); + for (const r of rooms) { + r.hover = room && r.room.roomId === room.roomId; + } + this.setState({rooms}); + } + render() { + const Tooltip = sdk.getComponent('elements.Tooltip'); // check for collapsed here and // not at parent so we keep // rooms in our state @@ -92,15 +110,23 @@ export default class RoomBreadcrumbs extends React.Component { return null; } const rooms = this.state.rooms; - const avatars = rooms.map(({room, animated}, i) => { + const avatars = rooms.map(({room, animated, hover}, i) => { const isFirst = i === 0; const classes = classNames({ "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated, "mx_RoomBreadcrumbs_animate": isFirst, }); + + let tooltip = null; + if (hover) { + tooltip = ; + } + return ( - this._viewRoom(room)}> + this._viewRoom(room)} + onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}> + {tooltip} ); });