gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Collapsing and truncation initial state and onClick event logic

This commit is contained in:
wmwragg 2016-08-22 15:50:36 +01:00
parent 97daca4b31
commit 71f73d8df2
1 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/structures/RoomSubList.js
View File

@ -27,6 +27,8 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
// turn this on for drop & drag console debugging galore // turn this on for drop & drag console debugging galore
var debug = false; var debug = false;
const TRUNCATE_AT = 6;
var roomListTarget = { var roomListTarget = {
canDrop: function() { canDrop: function() {
return true; return true;
@ -81,7 +83,8 @@ var RoomSubList = React.createClass({
getInitialState: function() { getInitialState: function() {
return { return {
hidden: this.props.startAsHidden || false, hidden: this.props.startAsHidden || false,
truncateAt: 20, capTruncate: this.props.list.length > TRUNCATE_AT,
truncateAt: this.props.list.length > TRUNCATE_AT ? TRUNCATE_AT : -1,
sortedList: [], sortedList: [],
}; };
}, },
@ -111,15 +114,32 @@ var RoomSubList = React.createClass({
}, },
onClick: function(ev) { onClick: function(ev) {
var isHidden = !this.state.hidden; // Collapse and truncation logic
this.setState({ hidden : isHidden }); var isHidden = false;
var isTruncatable = this.props.list.length > TRUNCATE_AT;
if (isHidden) { if (this.state.hidden && (this.state.capTruncate && isTruncatable)) {
// as good a way as any to reset the truncate state isHidden = false;
this.setState({ truncateAt : 20 }); this.setState({ hidden : isHidden });
this.props.onShowMoreRooms(); this.setState({ capTruncate : true });
// Show truncated list
this.setState({ truncateAt : TRUNCATE_AT });
} else if ((!this.state.hidden && this.state.capTruncate) ||
(this.state.hidden && (this.state.capTruncate && !isTruncatable))) {
isHidden = false;
this.setState({ hidden : isHidden });
this.setState({ capTruncate : false });
// Show full list
this.setState({ truncateAt : -1 });
} else if (!this.state.hidden && !this.state.capTruncate) {
isHidden = true;
this.setState({ hidden : isHidden });
this.setState({ capTruncate : true });
// Truncated list
this.setState({ truncateAt : TRUNCATE_AT });
} }
this.props.onShowMoreRooms();
this.props.onHeaderClick(isHidden); this.props.onHeaderClick(isHidden);
}, },
@ -304,7 +324,8 @@ var RoomSubList = React.createClass({
var classes = classNames({ var classes = classNames({
'mx_RoomSubList_chevron': true, 'mx_RoomSubList_chevron': true,
'mx_RoomSubList_chevronUp': this.state.hidden, 'mx_RoomSubList_chevronUp': this.state.hidden,
'mx_RoomSubList_chevronDown': !this.state.hidden, 'mx_RoomSubList_chevronRight': !this.state.hidden && this.state.capTruncate,
'mx_RoomSubList_chevronDown': !this.state.hidden && !this.state.capTruncate,
}); });
return ( return (
<div onClick={ this.onClick } className="mx_RoomSubList_label"> <div onClick={ this.onClick } className="mx_RoomSubList_label">
@ -314,25 +335,7 @@ var RoomSubList = React.createClass({
); );
}, },
_createOverflowTile: function(overflowCount, totalCount) { _createOverflowTile: function() {}, // NOP
var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
// XXX: this is duplicated from RoomTile - factor it out
return (
<div className="mx_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
<div className="mx_RoomTile_avatar">
<BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
</div>
<div className="mx_RoomTile_name">and { overflowCount } others...</div>
</div>
);
},
_showFullMemberList: function() {
this.setState({
truncateAt: -1
});
this.props.onShowMoreRooms();
},
// Fix any undefined order elements of a room in a manual ordered list // Fix any undefined order elements of a room in a manual ordered list
// room.tag[tagname].order // room.tag[tagname].order