diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index dbd1d3cf5f..67227c7115 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -47,6 +47,9 @@ limitations under the License.
transform: scale(0);
}
+ .mx_RoomBreadcrumbs_left {
+ opacity: 0.5;
+ }
// Note: we have to manually control the gradient and stuff, but the IndicatorScrollbar
// will deal with left/right positioning for us. Normally we'd use position:sticky on
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 1feff19ca2..69c36e5a65 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -52,10 +52,15 @@ export default class RoomBreadcrumbs extends React.Component {
console.error("Failed to parse breadcrumbs:", e);
}
}
+
+ MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
}
componentWillUnmount() {
dis.unregister(this._dispatcherRef);
+
+ const client = MatrixClientPeg.get();
+ if (client) client.removeListener("Room.myMembership", this.onMyMembership);
}
componentDidUpdate() {
@@ -81,6 +86,17 @@ export default class RoomBreadcrumbs extends React.Component {
}
}
+ onMyMembership = (room, membership) => {
+ if (membership === "leave" || membership === "ban") {
+ const rooms = this.state.rooms.slice();
+ const roomState = rooms.find((r) => r.room.roomId === room.roomId);
+ if (roomState) {
+ roomState.left = true;
+ this.setState({rooms});
+ }
+ }
+ };
+
_appendRoomId(roomId) {
const room = MatrixClientPeg.get().getRoom(roomId);
if (!room) {
@@ -130,23 +146,24 @@ export default class RoomBreadcrumbs extends React.Component {
return null;
}
const rooms = this.state.rooms;
- const avatars = rooms.map(({room, animated, hover}, i) => {
+ const avatars = rooms.map((r, i) => {
const isFirst = i === 0;
const classes = classNames({
"mx_RoomBreadcrumbs_crumb": true,
- "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
+ "mx_RoomBreadcrumbs_preAnimate": isFirst && !r.animated,
"mx_RoomBreadcrumbs_animate": isFirst,
+ "mx_RoomBreadcrumbs_left": r.left,
});
let tooltip = null;
- if (hover) {
- tooltip = ;
+ if (r.hover) {
+ tooltip = ;
}
return (
- this._viewRoom(room)}
- onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
-
+ this._viewRoom(r.room)}
+ onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
+
{tooltip}
);