collapsible sublists

This commit is contained in:
Matthew Hodgson 2015-11-06 21:25:20 +01:00
parent 886ffbf158
commit 1150e22190
2 changed files with 22 additions and 5 deletions

View File

@ -30,3 +30,7 @@ limitations under the License.
margin-top: 8px; margin-top: 8px;
margin-bottom: 4px; margin-bottom: 4px;
} }
.mx_RoomSubList_chevron {
padding-left: 5px;
}

View File

@ -58,6 +58,7 @@ var RoomSubList = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
hidden: false,
sortedList: [], sortedList: [],
}; };
}, },
@ -71,6 +72,10 @@ var RoomSubList = React.createClass({
this.sortList(newProps.list, newProps.order); this.sortList(newProps.list, newProps.order);
}, },
onClick: function(ev) {
this.setState({ hidden : !this.state.hidden });
},
tsOfNewestEvent: function(room) { tsOfNewestEvent: function(room) {
if (room.timeline.length) { if (room.timeline.length) {
return room.timeline[room.timeline.length - 1].getTs(); 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 }/>; 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) { if (this.state.sortedList.length > 0 || this.props.editable) {
return connectDropTarget( return connectDropTarget(
<div> <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> </div>
); );
} }