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 1/8] 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>);
+    }
+}

From 5efd92f3ecae8049559bdb94624faf74ca2346f9 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 11:26:46 +0100
Subject: [PATCH 2/8] make rooms come in from left rather than the right

---
 res/css/views/rooms/_RoomBreadcrumbs.scss     | 19 +++++++------------
 src/components/views/rooms/RoomBreadcrumbs.js |  6 +++---
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index 41149fc0b2..3cfec40cc4 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -21,17 +21,12 @@ limitations under the License.
     margin: 8px;
     margin-bottom: 0;
 
-    > div {
-        display: flex;
-        flex-direction: row;
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 32px;
+    overflow-x: hidden;
+    display: flex;
+    flex-direction: row;
 
-        > * {
-            margin-right: 4px;
-        }
+    > * {
+        margin-right: 4px;
     }
 
     &::after {
@@ -39,9 +34,9 @@ limitations under the License.
         position: absolute;
         width: 15px;
         top: 0;
-        left: 0;
+        right: 0;
         height: 100%;
-        background: linear-gradient(to left, rgba(242,245,248,0), rgba(242,245,248,1));
+        background: linear-gradient(to right, rgba(242,245,248,0), rgba(242,245,248,1));
     }
 }
 
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 7405f9efed..304a92934a 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -60,9 +60,9 @@ export default class RoomBreadcrumbs extends React.Component {
         if (existingIdx !== -1) {
             rooms.splice(existingIdx, 1);
         }
-        rooms.push(room);
+        rooms.splice(0, 0, room);
         if (rooms.length > MAX_ROOMS) {
-            rooms.splice(0, rooms.length - MAX_ROOMS);
+            rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
         }
         this.setState({rooms});
     }
@@ -79,6 +79,6 @@ export default class RoomBreadcrumbs extends React.Component {
                 </AccessibleButton>
             );
         });
-        return (<div className="mx_RoomBreadcrumbs"><div>{ avatars }</div></div>);
+        return (<div className="mx_RoomBreadcrumbs">{ avatars }</div>);
     }
 }

From 735c9d1121249f96aaaa6749adade710cc296f70 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 11:31:50 +0100
Subject: [PATCH 3/8] hide breadcrumbs when collapsed

---
 src/components/structures/LeftPanel.js        | 3 +--
 src/components/views/rooms/RoomBreadcrumbs.js | 7 +++++++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 49956265f6..55b8c34ae6 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -216,13 +216,12 @@ const LeftPanel = React.createClass({
             onCleared={ this.onSearchCleared }
             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 } />
-                    <RoomBreadcrumbs />
+                    <RoomBreadcrumbs collapsed={this.props.collapsed} />
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 304a92934a..9bba5434b4 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -72,6 +72,13 @@ export default class RoomBreadcrumbs extends React.Component {
     }
 
     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 avatars = this.state.rooms.map((room) => {
             return (
                 <AccessibleButton key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>

From 03c491416e724c30a099635b19c2cfc3cdb7ecaf Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 11:41:24 +0100
Subject: [PATCH 4/8] put breadcrumbs behind feature flag

---
 src/components/structures/LeftPanel.js | 7 ++++++-
 src/i18n/strings/en_EN.json            | 1 +
 src/settings/Settings.js               | 6 ++++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js
index 55b8c34ae6..000195d349 100644
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@@ -216,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 } />
-                    <RoomBreadcrumbs collapsed={this.props.collapsed} />
+                    { breadcrumbs }
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 3cc6e71436..6994d5d70b 100644
--- a/src/i18n/strings/en_EN.json
+++ b/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": "Show recent room avatars above the room list",
     "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",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 9dfbc7d51e..7897342d72 100644
--- a/src/settings/Settings.js
+++ b/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"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_custom_tags": {
         isFeature: true,
         displayName: _td("Group & filter rooms by custom tags (refresh to apply changes)"),

From 2315e4bfb482460fe24ff78998e86af65850b9b4 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 12:16:56 +0100
Subject: [PATCH 5/8] add animation when adding a room

---
 res/css/views/rooms/_RoomBreadcrumbs.scss     | 12 +++++++++
 src/components/views/rooms/RoomBreadcrumbs.js | 26 ++++++++++++++++---
 2 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index 3cfec40cc4..ce9dca79b3 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -38,5 +38,17 @@ limitations under the License.
         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);
+    }
 }
 
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 9bba5434b4..4b8fb73247 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -20,6 +20,7 @@ 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;
 
@@ -40,6 +41,17 @@ export default class RoomBreadcrumbs extends React.Component {
         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':
@@ -56,11 +68,11 @@ export default class RoomBreadcrumbs extends React.Component {
             return;
         }
         const rooms = this.state.rooms.slice();
-        const existingIdx = rooms.findIndex((r) => r.roomId === room.roomId);
+        const existingIdx = rooms.findIndex((r) => r.room.roomId === room.roomId);
         if (existingIdx !== -1) {
             rooms.splice(existingIdx, 1);
         }
-        rooms.splice(0, 0, room);
+        rooms.splice(0, 0, {room, animated: false});
         if (rooms.length > MAX_ROOMS) {
             rooms.splice(MAX_ROOMS, rooms.length - MAX_ROOMS);
         }
@@ -79,9 +91,15 @@ export default class RoomBreadcrumbs extends React.Component {
         if (this.props.collapsed) {
             return null;
         }
-        const avatars = this.state.rooms.map((room) => {
+        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 key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>
+                <AccessibleButton className={classes} key={room.roomId} title={room.name} onClick={() => this._viewRoom(room)}>
                     <RoomAvatar room={room} width={32} height={32} />
                 </AccessibleButton>
             );

From 229d9058359c941552ac4029e192c7600f96723b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 12:21:40 +0100
Subject: [PATCH 6/8] copyright

---
 res/css/views/rooms/_RoomBreadcrumbs.scss     | 2 +-
 src/components/views/rooms/RoomBreadcrumbs.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index ce9dca79b3..b8aca9b4a6 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+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.
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 4b8fb73247..d661d439bf 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 Vector Creations Ltd
+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.

From 24cb46a991ce68ce2fedb12c692f0a837a226245 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 12:22:50 +0100
Subject: [PATCH 7/8] should be on the left with animations so the animate
 class can clear it

---
 res/css/views/rooms/_RoomBreadcrumbs.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_RoomBreadcrumbs.scss b/res/css/views/rooms/_RoomBreadcrumbs.scss
index b8aca9b4a6..ba4aec3b6e 100644
--- a/res/css/views/rooms/_RoomBreadcrumbs.scss
+++ b/res/css/views/rooms/_RoomBreadcrumbs.scss
@@ -26,7 +26,7 @@ limitations under the License.
     flex-direction: row;
 
     > * {
-        margin-right: 4px;
+        margin-left: 4px;
     }
 
     &::after {

From b467bfdced47665f9c11d9803f7b4c469ed76d24 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Tue, 12 Feb 2019 12:48:48 +0100
Subject: [PATCH 8/8] mention it only shows up after refresh (actually
 rerender)

---
 src/i18n/strings/en_EN.json | 2 +-
 src/settings/Settings.js    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 6994d5d70b..63121cb681 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -270,7 +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": "Show recent room avatars above the room list",
+    "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",
diff --git a/src/settings/Settings.js b/src/settings/Settings.js
index 7897342d72..671f46b366 100644
--- a/src/settings/Settings.js
+++ b/src/settings/Settings.js
@@ -101,7 +101,7 @@ export const SETTINGS = {
     },
     "feature_room_breadcrumbs": {
         isFeature: true,
-        displayName: _td("Show recent room avatars above the room list"),
+        displayName: _td("Show recent room avatars above the room list (refresh to apply changes)"),
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },