From 0ee1892a0b9837c695e1cb95323a13c7c188707a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 22 Jan 2016 15:31:42 +0000 Subject: [PATCH] truncate room list --- src/components/structures/RoomSubList.js | 37 +++++++++++++++++-- .../matrix-react-sdk/views/rooms/RoomTile.css | 5 +++ 2 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index c49a43db9c..ebd8373ce6 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -78,6 +78,7 @@ var RoomSubList = React.createClass({ getInitialState: function() { return { hidden: this.props.startAsHidden || false, + truncateAt: 20, sortedList: [], }; }, @@ -96,6 +97,10 @@ var RoomSubList = React.createClass({ // order the room list appropriately before we re-render //if (debug) console.log("received new props, list = " + newProps.list); this.sortList(newProps.list, newProps.order); + + if (newProps.collapsed) { // as good a way as any to reset the truncate state + this.setState({ truncateAt : 20 }); + } }, onClick: function(ev) { @@ -272,9 +277,32 @@ var RoomSubList = React.createClass({ ); }, + _createOverflowTile: function(overflowCount, totalCount) { + var BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); + // XXX: this is duplicated from RoomTile - factor it out + return ( +
+
+ +
+
and { overflowCount } others...
+
+ ); + }, + + _showFullMemberList: function() { + this.setState({ + truncateAt: -1 + }); + // kick gemini in the balls to get it to wake up + // XXX: uuuuuuugh. + this.props.list.forceUpdate(); + }, + render: function() { var connectDropTarget = this.props.connectDropTarget; var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget'); + var TruncatedList = sdk.getComponent('elements.TruncatedList'); var label = this.props.collapsed ? null : this.props.label; @@ -290,14 +318,15 @@ var RoomSubList = React.createClass({ var classes = "mx_RoomSubList"; if (!this.state.hidden) { - subList =
+ subList = { target } { this.makeRoomTiles() } -
; + ; } else { - subList =
-
; + subList = + ; } return connectDropTarget( diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css index 44b884e859..3a7756135b 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css @@ -43,6 +43,11 @@ limitations under the License. color: rgba(69, 69, 69, 0.8); } +.mx_RoomTile_ellipsis .mx_RoomTile_name { + font-style: italic; + color: #454545; +} + .mx_RoomTile_invite { /* color: rgba(69, 69, 69, 0.5); */