collapsible sublists

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;
+}

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>
+                    <h2 onClick={ this.onClick } className="mx_RoomSubList_label">{ this.props.collapsed ? '' : this.props.label }
-                    <div className="mx_RoomSubList">
+                        <img className="mx_RoomSubList_chevron" src={ this.state.hidden ? "/img/list-open.png" : "/img/list-close.png" } width="10" height="10"/>
-                        { target }
+                    </h2>
-                        { this.makeRoomTiles() }
+                    { subList }
-                    </div>
                 </div>
             );
         }