From aaea40a93d7f684b3c4c1593c5ab99730b766285 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 11:04:25 +0100
Subject: [PATCH] add breadcrumbs component

---
 res/css/_components.scss                      |  1 +
 res/css/views/rooms/_RoomBreadcrumbs.scss     | 47 +++++++++++
 src/components/structures/LeftPanel.js        |  2 +
 src/components/views/rooms/RoomBreadcrumbs.js | 84 +++++++++++++++++++
 4 files changed, 134 insertions(+)
 create mode 100644 res/css/views/rooms/_RoomBreadcrumbs.scss
 create mode 100644 src/components/views/rooms/RoomBreadcrumbs.js

diff --git a/res/css/_components.scss b/res/css/_components.scss
index 57a34023c0..62c6186152 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -126,6 +126,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";
diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
new file mode 100644
index 0000000000..41149fc0b2
--- /dev/null
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -0,0 +1,47 @@
+/*
+Copyright 2015, 2016 OpenMarket 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;
+
+    > div {
+        display: flex;
+        flex-direction: row;
+        position: absolute;
+        right: 0;
+        top: 0;
+        height: 32px;
+
+        > * {
+            margin-right: 4px;
+        }
+    }
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: 15px;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: linear-gradient(to left, rgba(242,245,248,0), rgba(242,245,248,1));
+    }
+}
+
diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index bd49f8acd4..49956265f6 100644
--- a/src/components/structures/LeftPanel.js
+++ b/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');
@@ -221,6 +222,7 @@ const LeftPanel = React.createClass({
                 { tagPanelContainer }
                 <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    <RoomBreadcrumbs />
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
new file mode 100644
index 0000000000..7405f9efed
--- /dev/null
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -0,0 +1,84 @@
+/*
+Copyright 2019 Vector Creations 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';
+
+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);
+    }
+
+    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.roomId === room.roomId);
+        if (existingIdx !== -1) {
+            rooms.splice(existingIdx, 1);
+        }
+        rooms.push(room);
+        if (rooms.length > MAX_ROOMS) {
+            rooms.splice(0, rooms.length - MAX_ROOMS);
+        }
+        this.setState({rooms});
+    }
+
+    _viewRoom(room) {
+        dis.dispatch({action: "view_room", room_id: room.roomId});
+    }
+
+    render() {
+        const avatars = this.state.rooms.map((room) => {
+            return (
+                <AccessibleButton key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>
+                    <RoomAvatar room={room} width={32} height={32} />
+                </AccessibleButton>
+            );
+        });
+        return (<div className="mx_RoomBreadcrumbs"><div>{ avatars }</div></div>);
+    }
+}