From 1150e22190178f5a64246414232bdefb96cef47b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 6 Nov 2015 21:25:20 +0100
Subject: [PATCH] collapsible sublists

---
 .../vector/css/organisms/RoomSubList.css      |  4 ++++
 .../vector/views/organisms/RoomSubList.js     | 23 +++++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/skins/vector/css/organisms/RoomSubList.css b/src/skins/vector/css/organisms/RoomSubList.css
index 43f453fb54..0580f574e3 100644
--- a/src/skins/vector/css/organisms/RoomSubList.css
+++ b/src/skins/vector/css/organisms/RoomSubList.css
@@ -30,3 +30,7 @@ limitations under the License.
     margin-top: 8px;
     margin-bottom: 4px;
 }
+
+.mx_RoomSubList_chevron {
+    padding-left: 5px;
+}
\ No newline at end of file
diff --git a/src/skins/vector/views/organisms/RoomSubList.js b/src/skins/vector/views/organisms/RoomSubList.js
index 27cfb2ae52..47e412f3e2 100644
--- a/src/skins/vector/views/organisms/RoomSubList.js
+++ b/src/skins/vector/views/organisms/RoomSubList.js
@@ -58,6 +58,7 @@ var RoomSubList = React.createClass({
 
     getInitialState: function() {
         return {
+            hidden: false,
             sortedList: [],
         };
     },
@@ -71,6 +72,10 @@ var RoomSubList = React.createClass({
         this.sortList(newProps.list, newProps.order);
     },
 
+    onClick: function(ev) {
+        this.setState({ hidden : !this.state.hidden });
+    },
+
     tsOfNewestEvent: function(room) {
         if (room.timeline.length) {
             return room.timeline[room.timeline.length - 1].getTs();
@@ -229,14 +234,22 @@ var RoomSubList = React.createClass({
             target = <RoomDropTarget label={ 'Drop here to ' + this.props.verb }/>;
         }
 
+        var subList;
+        if (!this.state.hidden) {
+            subList = <div className="mx_RoomSubList">
+                            { target }
+                            { this.makeRoomTiles() }
+                        </div>;
+        }
+
+
         if (this.state.sortedList.length > 0 || this.props.editable) {
             return connectDropTarget(
                 <div>
-                    <h2 className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }</h2>
-                    <div className="mx_RoomSubList">
-                        { target }
-                        { this.makeRoomTiles() }
-                    </div>
+                    <h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
+                        <img className="mx_RoomSubList_chevron" src={ this.state.hidden ? "/img/list-open.png" : "/img/list-close.png" } width="10" height="10"/>
+                    </h2>
+                    { subList }
                 </div>
             );
         }