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 43f453fb..0580f574 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 27cfb2ae..47e412f3 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>
);
}