From 7e2291592c4678a0ad545f50f45f32fefb6ba734 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 28 Mar 2019 19:19:12 -0600
Subject: [PATCH 1/2] Apply 50% opacity to left breadcrumbs

Fixes https://github.com/vector-im/riot-web/issues/8564

We listen for membership changes to make sure the state is kept up to date.
---
 res/css/views/rooms/_RoomBreadcrumbs.scss     |  3 +++
 src/components/views/rooms/RoomBreadcrumbs.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)

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..dc1bd3097b 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,13 @@ export default class RoomBreadcrumbs extends React.Component {
         }
     }
 
+    onMyMembership = (room, membership) => {
+        if (membership === "leave" || membership === "ban") {
+            // Force left rooms to render appropriately
+            this.forceUpdate();
+        }
+    };
+
     _appendRoomId(roomId) {
         const room = MatrixClientPeg.get().getRoom(roomId);
         if (!room) {
@@ -136,6 +148,7 @@ export default class RoomBreadcrumbs extends React.Component {
                 "mx_RoomBreadcrumbs_crumb": true,
                 "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
                 "mx_RoomBreadcrumbs_animate": isFirst,
+                "mx_RoomBreadcrumbs_left": !['invite', 'join'].includes(room.getMyMembership()),
             });
 
             let tooltip = null;

From c0f06602c598b6139ae8fdb65cf6eedf2f197a65 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 2 Apr 2019 10:47:39 -0600
Subject: [PATCH 2/2] Use state instead of forceUpdate

---
 src/components/views/rooms/RoomBreadcrumbs.js | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index dc1bd3097b..69c36e5a65 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -88,8 +88,12 @@ export default class RoomBreadcrumbs extends React.Component {
 
     onMyMembership = (room, membership) => {
         if (membership === "leave" || membership === "ban") {
-            // Force left rooms to render appropriately
-            this.forceUpdate();
+            const rooms = this.state.rooms.slice();
+            const roomState = rooms.find((r) => r.room.roomId === room.roomId);
+            if (roomState) {
+                roomState.left = true;
+                this.setState({rooms});
+            }
         }
     };
 
@@ -142,24 +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": !['invite', 'join'].includes(room.getMyMembership()),
+                "mx_RoomBreadcrumbs_left": r.left,
             });
 
             let tooltip = null;
-            if (hover) {
-                tooltip = <Tooltip label={room.name} />;
+            if (r.hover) {
+                tooltip = <Tooltip label={r.room.name} />;
             }
 
             return (
-                <AccessibleButton className={classes} key={room.roomId} onClick={() => this._viewRoom(room)}
-                    onMouseEnter={() => this._onMouseEnter(room)} onMouseLeave={() => this._onMouseLeave(room)}>
-                    <RoomAvatar room={room} width={32} height={32} />
+                <AccessibleButton className={classes} key={r.room.roomId} onClick={() => this._viewRoom(r.room)}
+                    onMouseEnter={() => this._onMouseEnter(r.room)} onMouseLeave={() => this._onMouseLeave(r.room)}>
+                    <RoomAvatar room={r.room} width={32} height={32} />
                     {tooltip}
                 </AccessibleButton>
             );