search bar

src/skins/vector/views/molecules/RoomHeader.js

@@ -41,7 +41,7 @@ module.exports = React.createClass({
     onFullscreenClick: function() {
         dis.dispatch({action: 'video_fullscreen'}, true);
     },
-
+    
     render: function() {
         var EditableText = sdk.getComponent("atoms.EditableText");
         var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
@@ -166,7 +166,7 @@ module.exports = React.createClass({
                         { voice_button }
                         { zoom_button }
                         <div className="mx_RoomHeader_button">
-                            <img src="img/search.png" title="Search" alt="Search" width="21" height="19"/>
+                            <img src="img/search.png" title="Search" alt="Search" width="21" height="19" onClick={this.props.onSearchClick}/>
                         </div>
                     </div>
                 </div>

src/skins/vector/views/molecules/SearchBar.js

@@ -0,0 +1,59 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var sdk = require('matrix-react-sdk');
+
+module.exports = React.createClass({
+    displayName: 'SearchBar',
+
+    Scope : {
+        Room: 'Room',
+        All: 'All',
+    },
+
+    getInitialState: function() {
+        return ({
+            scope: this.Scope.Room
+        });
+    },
+
+    onThisRoomClick: function() {
+        this.setState({ scope: this.Scope.Room });
+    },
+
+    onAllRoomsClick: function() {
+        this.setState({ scope: this.Scope.All });
+    },
+
+    onSearchChange: function(e) {
+
+    },
+
+    render: function() {
+        return (
+            <div className="mx_SearchBar">
+                <input className="mx_SearchBar_input" type="text" placeholder="Search..." onChange={this.onSearchChange}/>
+                <div className={"mx_SearchBar_button" + (this.state.scope !== this.Scope.Room ? " mx_SearchBar_unselected" : "")} onClick={this.onThisRoomClick}>This Room</div>
+                <div className={"mx_SearchBar_button" + (this.state.scope !== this.Scope.All ? " mx_SearchBar_unselected" : "")} onClick={this.onAllRoomsClick}>All Rooms</div>
+                <img className="mx_SearchBar_cancel" src="img/cancel-black.png" width="18" height="18" onClick={this.props.onCancelClick} />
+            </div>
+        );
+    }
+});

src/skins/vector/views/organisms/RoomView.js

@@ -63,6 +63,10 @@ module.exports = React.createClass({
         this.setState(this.getInitialState());
     },
 
+    onSearchClick: function() {
+        this.setState({searching: true});
+    },
+
     onConferenceNotificationClick: function() {
         dis.dispatch({
             action: 'place_call',
@@ -89,6 +93,7 @@ module.exports = React.createClass({
         var MessageComposer = sdk.getComponent('molecules.MessageComposer');
         var CallView = sdk.getComponent("molecules.voip.CallView");
         var RoomSettings = sdk.getComponent("molecules.RoomSettings");
+        var SearchBar = sdk.getComponent("molecules.SearchBar");
 
         if (!this.state.room) {
             if (this.props.roomId) {
@@ -190,12 +195,15 @@ module.exports = React.createClass({
                 }
             }
 
-            var roomEdit = null;
+            var aux = null;
             if (this.state.editingRoomSettings) {
-                roomEdit = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
+                aux = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
             }
-            if (this.state.uploadingRoomSettings) {
-                roomEdit = <Loader/>;
+            else if (this.state.uploadingRoomSettings) {
+                aux = <Loader/>;
+            }
+            else if (this.state.searching) {
+                aux = <SearchBar onCancelClick={this.onCancelClick}/>;
             }
 
             var conferenceCallNotification = null;
@@ -219,12 +227,12 @@ module.exports = React.createClass({
 
             return (
                 <div className="mx_RoomView">
-                    <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
+                    <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings} onSearchClick={this.onSearchClick}
                         onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick} onCancelClick={this.onCancelClick} />
                     <div className="mx_RoomView_auxPanel">
                         <CallView room={this.state.room}/>
                         { conferenceCallNotification }
-                        { roomEdit }
+                        { aux }
                     </div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={ this.onMessageListScroll }>
                         <div className="mx_RoomView_messageListWrapper">