From 26d12bebe47d635a90455f576bab5ba567aa569a Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Apr 2016 17:54:48 +0100 Subject: [PATCH] wire up searchbox filtering, and some minor overall tweaks --- src/components/structures/LeftPanel.js | 8 ++- src/components/structures/RoomSubList.js | 21 +++--- src/components/structures/SearchBox.js | 68 ++++++++++++++++--- .../structures/RoomStatusBar.css | 7 +- .../matrix-react-sdk/structures/SearchBox.css | 12 ++++ 5 files changed, 92 insertions(+), 24 deletions(-) diff --git a/src/components/structures/LeftPanel.js b/src/components/structures/LeftPanel.js index f8a68a88d9..58347a068d 100644 --- a/src/components/structures/LeftPanel.js +++ b/src/components/structures/LeftPanel.js @@ -31,6 +31,7 @@ var LeftPanel = React.createClass({ getInitialState: function() { return { showCallElement: null, + searchFilter: '', }; }, @@ -84,6 +85,10 @@ var LeftPanel = React.createClass({ } }, + onSearch: function(term) { + this.setState({ searchFilter: term }); + }, + render: function() { var RoomList = sdk.getComponent('rooms.RoomList'); var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu'); @@ -111,12 +116,13 @@ var LeftPanel = React.createClass({ return ( diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index ab89fd0f5b..497acdec07 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -65,16 +65,12 @@ var RoomSubList = React.createClass({ selectedRoom: React.PropTypes.string.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. - // 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, + collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed? onHeaderClick: React.PropTypes.func, alwaysShowHeader: React.PropTypes.bool, incomingCall: React.PropTypes.object, - onShowMoreRooms: React.PropTypes.func + onShowMoreRooms: React.PropTypes.func, + searchFilter: React.PropTypes.string, }, getInitialState: function() { @@ -93,13 +89,20 @@ var RoomSubList = React.createClass({ }, componentWillMount: function() { - this.sortList(this.props.list, this.props.order); + this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order); }, componentWillReceiveProps: function(newProps) { // 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); + this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order); + }, + + applySearchFilter: function(list, filter) { + if (filter === "") return list; + return list.filter((room) => { + return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0 + }); }, onClick: function(ev) { diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 69434dc2a0..553feffe0c 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -19,32 +19,78 @@ limitations under the License. var React = require('react'); var sdk = require('matrix-react-sdk') var dis = require('matrix-react-sdk/lib/dispatcher'); +var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc'); module.exports = React.createClass({ displayName: 'SearchBox', + propTypes: { + collapsed: React.PropTypes.bool, + onSearch: React.PropTypes.func, + }, + + onChange: new rate_limited_func( + function() { + if (this.refs.search) { + this.props.onSearch(this.refs.search.value); + } + }, + 100 + ), + + onToggleCollapse: function(show) { + if (show) { + dis.dispatch({ + action: 'show_left_panel', + }); + } + else { + dis.dispatch({ + action: 'hide_left_panel', + }); + } + }, + render: function() { var TintableSvg = sdk.getComponent('elements.TintableSvg'); var toggleCollapse; if (this.props.collapsed) { - toggleCollapse = <; + toggleCollapse = +
+ +
} else { - toggleCollapse = <; + toggleCollapse = +
+ +
} + var searchControls; + if (!this.props.collapsed) { + searchControls = [ + , + + ]; + } + + var self = this; return (
- - + { searchControls } { toggleCollapse }
); diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css index dfbc354aed..4d91755c3f 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css @@ -15,9 +15,9 @@ limitations under the License. */ .mx_RoomStatusBar { - margin-top: 12px; + margin-top: 15px; margin-left: 65px; - min-height: 37px; + min-height: 34px; } /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */ @@ -33,8 +33,9 @@ limitations under the License. .mx_RoomStatusBar_placeholderIndicator span { color: #4a4a4a; opacity: 0.5; -/* position: relative; + top: -4px; +/* animation-duration: 1s; animation-name: bounce; animation-direction: alternate; diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css index 8c8c470a37..d94efd9826 100644 --- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css +++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css @@ -45,5 +45,17 @@ limitations under the License. .mx_SearchBox_minimise, .mx_SearchBox_maximise { + cursor: pointer; +} + +.mx_SearchBox_minimise { margin-left: 10px; } + +.mx_SearchBox_maximise { + margin-left: 6px; +} + +.mx_SearchBox object { + pointer-events: none; +} \ No newline at end of file