From 869c08a790e62ddb3f11189bc7eae8f658487688 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 11:56:22 +0000 Subject: [PATCH 1/4] Add onHeaderClick and alwaysShowHeader props to RoomSubList for archived room clicking --- src/components/structures/RoomSubList.js | 30 ++++++++++++++++++++---- 1 file changed, 25 insertions(+), 5 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f7efb425..f6f10ec6 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,7 +64,9 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, - collapsed: React.PropTypes.bool.isRequired + collapsed: React.PropTypes.bool.isRequired, + onHeaderClick: React.PropTypes.func, + alwaysShowHeader: React.PropTypes.bool }, getInitialState: function() { @@ -74,6 +76,12 @@ var RoomSubList = React.createClass({ }; }, + getDefaultProps: function() { + return { + onHeaderClick: function() {} // NOP + }; + }, + componentWillMount: function() { this.sortList(this.props.list, this.props.order); }, @@ -85,7 +93,9 @@ var RoomSubList = React.createClass({ }, onClick: function(ev) { - this.setState({ hidden : !this.state.hidden }); + var isHidden = !this.state.hidden; + this.setState({ hidden : isHidden }); + this.props.onHeaderClick(isHidden); }, tsOfNewestEvent: function(room) { @@ -244,6 +254,17 @@ var RoomSubList = React.createClass({ }); }, + _getHeaderJsx: function() { + return ( +

+ { this.props.collapsed ? '' : this.props.label } + +

+ ); + }, + render: function() { var connectDropTarget = this.props.connectDropTarget; var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); @@ -275,9 +296,7 @@ var RoomSubList = React.createClass({ return connectDropTarget(
-

{ this.props.collapsed ? '' : this.props.label } - -

+ { this._getHeaderJsx() } { subList }
); @@ -285,6 +304,7 @@ var RoomSubList = React.createClass({ else { return (
+ { this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined }
); } From f7c4cca67535810ee0c561a6dc3d1e4e9b0f1ebb Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 13:32:22 +0000 Subject: [PATCH 2/4] Add TODO after spending 15 mins trying to figure out the difference between props.collapsed and state.hidden --- src/components/structures/RoomSubList.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index f6f10ec6..b71d3285 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,6 +64,11 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, + + // TODO: Fix the name of this. This is too easily confused with the + // "hidden" state which is the expanded (or not) view of the list of rooms. + // What this prop *really* does is control whether the room name is displayed + // so it should be named as such. collapsed: React.PropTypes.bool.isRequired, onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool From 7cc1573f335ef19527a022509e883244fc27a83d Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 15:17:18 +0000 Subject: [PATCH 3/4] Add startAsHidden and showSpinner props to RoomSubList startAsHidden: Previously we never started in the hidden state and all was well. But with archived rooms you DO want to start hidden as you haven't fetched the room list yet. Without this, you need to click twice (close/open) before the archived room list will load. showSpinner: If true, will show a spinner iff there are 0 elements being displayed. Used when fetching the archived room list in RoomList. --- src/components/structures/RoomSubList.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index b71d3285..7ebedbe1 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -64,6 +64,8 @@ var RoomSubList = React.createClass({ bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, + startAsHidden: React.PropTypes.bool, + showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded // TODO: Fix the name of this. This is too easily confused with the // "hidden" state which is the expanded (or not) view of the list of rooms. @@ -76,7 +78,7 @@ var RoomSubList = React.createClass({ getInitialState: function() { return { - hidden: false, + hidden: this.props.startAsHidden || false, sortedList: [], }; }, @@ -307,9 +309,11 @@ var RoomSubList = React.createClass({ ); } else { + var Loader = sdk.getComponent("elements.Spinner"); return (
{ this.props.alwaysShowHeader ? this._getHeaderJsx() : undefined } + { (this.props.showSpinner && !this.state.hidden) ? : undefined }
); } From dcea0dd601d314c40a77bdcfe6e9666a4f1ab2ed Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Fri, 18 Dec 2015 17:13:57 +0000 Subject: [PATCH 4/4] Move min-height to RoomList; remove bottommost prop --- src/components/structures/RoomSubList.js | 4 +--- src/skins/vector/css/organisms/RoomList.css | 1 + src/skins/vector/css/organisms/RoomSubList.css | 5 ----- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index afa4fdaa..461c87fb 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -61,7 +61,6 @@ var RoomSubList = React.createClass({ tagName: React.PropTypes.string, editable: React.PropTypes.bool, order: React.PropTypes.string.isRequired, - bottommost: React.PropTypes.bool, selectedRoom: React.PropTypes.string.isRequired, activityMap: React.PropTypes.object.isRequired, startAsHidden: React.PropTypes.bool, @@ -290,8 +289,7 @@ var RoomSubList = React.createClass({ if (this.state.sortedList.length > 0 || this.props.editable) { var subList; - var classes = "mx_RoomSubList" + - (this.props.bottommost ? " mx_RoomSubList_bottommost" : ""); + var classes = "mx_RoomSubList"; if (!this.state.hidden) { subList =
diff --git a/src/skins/vector/css/organisms/RoomList.css b/src/skins/vector/css/organisms/RoomList.css index bb81686c..6b8152e0 100644 --- a/src/skins/vector/css/organisms/RoomList.css +++ b/src/skins/vector/css/organisms/RoomList.css @@ -17,6 +17,7 @@ limitations under the License. .mx_RoomList { padding-top: 24px; padding-bottom: 12px; + min-height: 400px; } .mx_RoomList_expandButton { diff --git a/src/skins/vector/css/organisms/RoomSubList.css b/src/skins/vector/css/organisms/RoomSubList.css index b143c998..46bcc64a 100644 --- a/src/skins/vector/css/organisms/RoomSubList.css +++ b/src/skins/vector/css/organisms/RoomSubList.css @@ -20,11 +20,6 @@ limitations under the License. width: 100%; } -.mx_RoomSubList_bottommost { - /* XXX: this should really be 100% of the RoomList height, but can't seem to get at it */ - min-height: 400px; -} - .mx_RoomSubList_label { text-transform: uppercase; color: #3d3b39;