Merge pull request #2615 from matrix-org/bwindels/breadcrumbs

Labs feature: recent room breadcrumbs

res/css/_components.scss

@@ -127,6 +127,7 @@
 @import "./views/rooms/_PinnedEventsPanel.scss";
 @import "./views/rooms/_PresenceLabel.scss";
 @import "./views/rooms/_ReplyPreview.scss";
+@import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomDropTarget.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";

res/css/views/rooms/_RoomBreadcrumbs.scss

@@ -0,0 +1,54 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomBreadcrumbs {
+    overflow-x: auto;
+    position: relative;
+    height: 32px;
+    margin: 8px;
+    margin-bottom: 0;
+
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: row;
+
+    > * {
+        margin-left: 4px;
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 15px;
+        top: 0;
+        right: 0;
+        height: 100%;
+        background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
+    }
+
+    .mx_RoomBreadcrumbs_animate {
+        margin-left: 0;
+        transition: transform 0.3s, width 0.3s;
+        width: 32px;
+        transform: scale(1);
+    }
+
+    .mx_RoomBreadcrumbs_preAnimate {
+        width: 0;
+        transform: scale(0);
+    }
+}
+

src/components/structures/LeftPanel.js

@@ -182,6 +182,7 @@ const LeftPanel = React.createClass({
 
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
+        const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
         const TagPanel = sdk.getComponent('structures.TagPanel');
         const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
         const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
@@ -215,12 +216,17 @@ const LeftPanel = React.createClass({
             onCleared={ this.onSearchCleared }
             collapsed={this.props.collapsed} />);
 
+        let breadcrumbs;
+        if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+            breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
+        }
 
         return (
             <div className={containerClasses}>
                 { tagPanelContainer }
                 <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    { breadcrumbs }
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList

src/components/views/rooms/RoomBreadcrumbs.js

@@ -0,0 +1,109 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+import React from "react";
+import dis from "../../../dispatcher";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import AccessibleButton from '../elements/AccessibleButton';
+import RoomAvatar from '../avatars/RoomAvatar';
+import classNames from 'classnames';
+
+const MAX_ROOMS = 20;
+
+export default class RoomBreadcrumbs extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {rooms: []};
+        this.onAction = this.onAction.bind(this);
+        this._previousRoomId = null;
+        this._dispatcherRef = null;
+    }
+
+    componentWillMount() {
+        this._dispatcherRef = dis.register(this.onAction);
+    }
+
+    componentWillUnmount() {
+        dis.unregister(this._dispatcherRef);
+    }
+
+    componentDidUpdate() {
+        const rooms = this.state.rooms.slice();
+        if (rooms.length) {
+            const {room, animated} = rooms[0];
+            if (!animated) {
+                rooms[0] = {room, animated: true};
+                setTimeout(() => this.setState({rooms}), 0);
+            }
+        }
+    }
+
+    onAction(payload) {
+        switch (payload.action) {
+            case 'view_room':
+                if (this._previousRoomId) {
+                    this._appendRoomId(this._previousRoomId);
+                }
+                this._previousRoomId = payload.room_id;
+        }
+    }
+
+    _appendRoomId(roomId) {
+        const room = MatrixClientPeg.get().getRoom(roomId);
+        if (!room) {
+            return;
+        }
+        const rooms = this.state.rooms.slice();
+        const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId);
+        if (existingIdx !== -1) {
+            rooms.splice(existingIdx, 1);
+        }
+        rooms.splice(0, 0, {room, animated: false});
+        if (rooms.length > MAX_ROOMS) {
+            rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
+        }
+        this.setState({rooms});
+    }
+
+    _viewRoom(room) {
+        dis.dispatch({action: "view_room", room_id: room.roomId});
+    }
+
+    render() {
+        // check for collapsed here and
+        // not at parent so we keep
+        // rooms in our state
+        // when collapsing and expanding
+        if (this.props.collapsed) {
+            return null;
+        }
+        const rooms = this.state.rooms;
+        const avatars = rooms.map(({room, animated}, i) => {
+            const isFirst = i === 0;
+            const classes = classNames({
+                "mx_RoomBreadcrumbs_preAnimate": isFirst && !animated,
+                "mx_RoomBreadcrumbs_animate": isFirst,
+            });
+            return (
+                <AccessibleButton className={classes} key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>
+                    <RoomAvatar room={room} width={32} height={32} />
+                </AccessibleButton>
+            );
+        });
+        return (<div className="mx_RoomBreadcrumbs">{ avatars }</div>);
+    }
+}

src/i18n/strings/en_EN.json

@@ -270,6 +270,7 @@
     "Failed to join room": "Failed to join room",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",
+    "Show recent room avatars above the room list (refresh to apply changes)": "Show recent room avatars above the room list (refresh to apply changes)",
     "Group & filter rooms by custom tags (refresh to apply changes)": "Group & filter rooms by custom tags (refresh to apply changes)",
     "Render simple counters in room header": "Render simple counters in room header",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",

src/settings/Settings.js

@@ -99,6 +99,12 @@ export const SETTINGS = {
         default: false,
         controller: new CustomStatusController(),
     },
+    "feature_room_breadcrumbs": {
+        isFeature: true,
+        displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_custom_tags": {
         isFeature: true,
         displayName: _td("Group & filter rooms by custom tags (refresh to apply changes)"),