From a25207960c2b4beca4547e3d0ca84c302cb8dc87 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Wed, 28 Oct 2015 01:05:28 +0000 Subject: [PATCH] search bar --- src/controllers/organisms/RoomView.js | 1 + src/skins/vector/css/molecules/SearchBar.css | 64 +++++++++++++++++++ src/skins/vector/skindex.js | 19 +++--- .../vector/views/molecules/RoomHeader.js | 4 +- src/skins/vector/views/molecules/SearchBar.js | 59 +++++++++++++++++ src/skins/vector/views/organisms/RoomView.js | 20 ++++-- 6 files changed, 150 insertions(+), 17 deletions(-) create mode 100644 src/skins/vector/css/molecules/SearchBar.css create mode 100644 src/skins/vector/views/molecules/SearchBar.js diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index 21027cbfa8..640816c2cc 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -38,6 +38,7 @@ module.exports = { uploadingRoomSettings: false, numUnreadMessages: 0, draggingFile: false, + searching: false, } }, diff --git a/src/skins/vector/css/molecules/SearchBar.css b/src/skins/vector/css/molecules/SearchBar.css new file mode 100644 index 0000000000..b116674bc5 --- /dev/null +++ b/src/skins/vector/css/molecules/SearchBar.css @@ -0,0 +1,64 @@ +/* +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. +*/ + +.mx_SearchBar { + padding-top: 5px; + padding-bottom: 5px; + display: flex; + align-items: center; +} + +.mx_SearchBar input { + display: inline block; + border-radius: 3px; + border: 1px solid #f0f0f0; + font-size: 16px; + padding: 9px; + padding-left: 11px; + margin-right: 17px; + width: auto; + flex: 1 1 0; +} + +.mx_SearchBar_button { + display: inline; + border: 0px; + border-radius: 36px; + font-weight: 400; + font-size: 16px; + color: #fff; + background-color: #76cfa6; + width: auto; + margin: auto; + margin-left: 7px; + padding-top: 6px; + padding-bottom: 4px; + padding-left: 24px; + padding-right: 24px; + cursor: pointer; +} + +.mx_SearchBar_unselected { + background-color: #fff; + color: #9fddc1; + border: #9fddc1 1px solid; +} + +.mx_SearchBar_cancel { + padding-left: 14px; + padding-right: 14px; + cursor: pointer; +} diff --git a/src/skins/vector/skindex.js b/src/skins/vector/skindex.js index 8dba10cf30..e715656c0e 100644 --- a/src/skins/vector/skindex.js +++ b/src/skins/vector/skindex.js @@ -23,9 +23,6 @@ limitations under the License. var skin = {}; -skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton'); -skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets'); -skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias'); skin['atoms.EditableText'] = require('./views/atoms/EditableText'); skin['atoms.EnableNotificationsButton'] = require('./views/atoms/EnableNotificationsButton'); skin['atoms.ImageView'] = require('./views/atoms/ImageView'); @@ -33,6 +30,9 @@ skin['atoms.LogoutButton'] = require('./views/atoms/LogoutButton'); skin['atoms.MemberAvatar'] = require('./views/atoms/MemberAvatar'); skin['atoms.MessageTimestamp'] = require('./views/atoms/MessageTimestamp'); skin['atoms.RoomAvatar'] = require('./views/atoms/RoomAvatar'); +skin['atoms.create_room.CreateRoomButton'] = require('./views/atoms/create_room/CreateRoomButton'); +skin['atoms.create_room.Presets'] = require('./views/atoms/create_room/Presets'); +skin['atoms.create_room.RoomAlias'] = require('./views/atoms/create_room/RoomAlias'); skin['atoms.voip.VideoFeed'] = require('./views/atoms/voip/VideoFeed'); skin['molecules.BottomLeftMenu'] = require('./views/molecules/BottomLeftMenu'); skin['molecules.BottomLeftMenuTile'] = require('./views/molecules/BottomLeftMenuTile'); @@ -42,18 +42,18 @@ skin['molecules.ChangePassword'] = require('./views/molecules/ChangePassword'); skin['molecules.DateSeparator'] = require('./views/molecules/DateSeparator'); skin['molecules.EventAsTextTile'] = require('./views/molecules/EventAsTextTile'); skin['molecules.EventTile'] = require('./views/molecules/EventTile'); -skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar'); -skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo'); -skin['molecules.MemberTile'] = require('./views/molecules/MemberTile'); skin['molecules.MEmoteTile'] = require('./views/molecules/MEmoteTile'); -skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer'); -skin['molecules.MessageContextMenu'] = require('./views/molecules/MessageContextMenu'); -skin['molecules.MessageTile'] = require('./views/molecules/MessageTile'); skin['molecules.MFileTile'] = require('./views/molecules/MFileTile'); skin['molecules.MImageTile'] = require('./views/molecules/MImageTile'); skin['molecules.MNoticeTile'] = require('./views/molecules/MNoticeTile'); skin['molecules.MRoomMemberTile'] = require('./views/molecules/MRoomMemberTile'); skin['molecules.MTextTile'] = require('./views/molecules/MTextTile'); +skin['molecules.MatrixToolbar'] = require('./views/molecules/MatrixToolbar'); +skin['molecules.MemberInfo'] = require('./views/molecules/MemberInfo'); +skin['molecules.MemberTile'] = require('./views/molecules/MemberTile'); +skin['molecules.MessageComposer'] = require('./views/molecules/MessageComposer'); +skin['molecules.MessageContextMenu'] = require('./views/molecules/MessageContextMenu'); +skin['molecules.MessageTile'] = require('./views/molecules/MessageTile'); skin['molecules.ProgressBar'] = require('./views/molecules/ProgressBar'); skin['molecules.RoomCreate'] = require('./views/molecules/RoomCreate'); skin['molecules.RoomDropTarget'] = require('./views/molecules/RoomDropTarget'); @@ -61,6 +61,7 @@ skin['molecules.RoomHeader'] = require('./views/molecules/RoomHeader'); skin['molecules.RoomSettings'] = require('./views/molecules/RoomSettings'); skin['molecules.RoomTile'] = require('./views/molecules/RoomTile'); skin['molecules.RoomTooltip'] = require('./views/molecules/RoomTooltip'); +skin['molecules.SearchBar'] = require('./views/molecules/SearchBar'); skin['molecules.SenderProfile'] = require('./views/molecules/SenderProfile'); skin['molecules.ServerConfig'] = require('./views/molecules/ServerConfig'); skin['molecules.UnknownMessageTile'] = require('./views/molecules/UnknownMessageTile'); diff --git a/src/skins/vector/views/molecules/RoomHeader.js b/src/skins/vector/views/molecules/RoomHeader.js index e73b154430..ddd27c209b 100644 --- a/src/skins/vector/views/molecules/RoomHeader.js +++ b/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 }
- Search + Search
diff --git a/src/skins/vector/views/molecules/SearchBar.js b/src/skins/vector/views/molecules/SearchBar.js new file mode 100644 index 0000000000..aa72ee8da8 --- /dev/null +++ b/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 ( +
+ +
This Room
+
All Rooms
+ +
+ ); + } +}); diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index 8132f879f6..1a23eba111 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/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 = ; + aux = ; } - if (this.state.uploadingRoomSettings) { - roomEdit = ; + else if (this.state.uploadingRoomSettings) { + aux = ; + } + else if (this.state.searching) { + aux = ; } var conferenceCallNotification = null; @@ -219,12 +227,12 @@ module.exports = React.createClass({ return (
-
{ conferenceCallNotification } - { roomEdit } + { aux }