OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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.
pull/21833/head
Travis Ralston 2019-03-28 19:19:12 -06:00
parent 57d72b4deb
commit 7e2291592c
2 changed files with 16 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
res/css/views/rooms/_RoomBreadcrumbs.scss
View File

@ -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

13
src/components/views/rooms/RoomBreadcrumbs.js
View File

@ -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;