From c708976635805b216834f0dd5d05fb5e690db899 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Thu, 16 Jul 2015 13:49:34 +0100 Subject: [PATCH] Wire up CreateRoom to UI. --- .../base/views/atoms/create_room/RoomAlias.js | 72 +++++++++++++++++++ .../atoms/create_room/RoomNameTextbox.js | 2 +- .../base/views/atoms/create_room/RoomTopic.js | 37 ++++++++++ skins/base/views/molecules/DirectoryMenu.js | 6 +- skins/base/views/organisms/CreateRoom.js | 12 ++-- skins/base/views/pages/MatrixChat.js | 26 +++++-- src/ComponentBroker.js | 2 + .../atoms/create_room/RoomAlias.js | 41 +++++++++++ .../atoms/create_room/RoomTopic.js | 41 +++++++++++ src/controllers/organisms/CreateRoom.js | 4 +- src/controllers/pages/MatrixChat.js | 11 +++ 11 files changed, 241 insertions(+), 13 deletions(-) create mode 100644 skins/base/views/atoms/create_room/RoomAlias.js create mode 100644 skins/base/views/atoms/create_room/RoomTopic.js create mode 100644 src/controllers/atoms/create_room/RoomAlias.js create mode 100644 src/controllers/atoms/create_room/RoomTopic.js diff --git a/skins/base/views/atoms/create_room/RoomAlias.js b/skins/base/views/atoms/create_room/RoomAlias.js new file mode 100644 index 0000000000..f60ec6b329 --- /dev/null +++ b/skins/base/views/atoms/create_room/RoomAlias.js @@ -0,0 +1,72 @@ +/* +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 RoomAliasController = require("../../../../../src/controllers/atoms/create_room/RoomAlias"); + +module.exports = React.createClass({ + displayName: 'RoomAlias', + mixins: [RoomAliasController], + + onValueChanged: function(ev) { + this.setState({room_alias: ev.target.value}) + }, + + onFocus: function(ev) { + var target = ev.target; + var curr_val = ev.target.value; + + if (curr_val == "") { + target.value = "#:example.com"; + setTimeout(function() { + target.setSelectionRange(1, 1); + }, 0); + } else { + setTimeout(function() { + target.setSelectionRange( + curr_val.startsWith("#") ? 1 : 0, + curr_val.endsWith(":example.com") ? (target.value.length - ":example.com".length) : target.value.length + ); + }, 0); + } + }, + + onBlur: function(ev) { + var curr_val = ev.target.value; + + if (curr_val == "#:example.com") { + ev.target.value = ""; + return; + } + + if (curr_val != "") { + var new_val = ev.target.value; + if (!curr_val.startsWith("#")) new_val = "#" + new_val; + if (!curr_val.endsWith(":example.com")) new_val = new_val + ":example.com"; + ev.target.value = new_val; + } + }, + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js index c358a14cb3..038d39a93a 100644 --- a/skins/base/views/atoms/create_room/RoomNameTextbox.js +++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js @@ -30,7 +30,7 @@ module.exports = React.createClass({ render: function() { return ( - + ); } }); diff --git a/skins/base/views/atoms/create_room/RoomTopic.js b/skins/base/views/atoms/create_room/RoomTopic.js new file mode 100644 index 0000000000..134833f905 --- /dev/null +++ b/skins/base/views/atoms/create_room/RoomTopic.js @@ -0,0 +1,37 @@ +/* +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 RoomTopicController = require("../../../../../src/controllers/atoms/create_room/RoomTopic"); + +module.exports = React.createClass({ + displayName: 'RoomTopic', + mixins: [RoomTopicController], + + onValueChanged: function(ev) { + this.setState({room_topic: ev.target.value}) + }, + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/molecules/DirectoryMenu.js b/skins/base/views/molecules/DirectoryMenu.js index f3b9e592b9..60b5542d4b 100644 --- a/skins/base/views/molecules/DirectoryMenu.js +++ b/skins/base/views/molecules/DirectoryMenu.js @@ -33,11 +33,15 @@ module.exports = React.createClass({ dis.dispatch({action: 'view_user_settings'}); }, + onCreateRoomClick: function() { + dis.dispatch({action: 'view_create_room'}); + }, + render: function() { return (
-
+
diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index 36f6e466e5..d7e84cccd6 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -24,6 +24,8 @@ var ComponentBroker = require('../../../../src/ComponentBroker'); var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); +var RoomTopic = ComponentBroker.get("atoms/create_room/RoomTopic"); +var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias"); var Presets = ComponentBroker.get("atoms/create_room/Presets"); var UserSelector = ComponentBroker.get("molecules/UserSelector"); @@ -61,10 +63,12 @@ module.exports = React.createClass({ } return (
- - - - +
+
+
+
+
+
{error_box}
); diff --git a/skins/base/views/pages/MatrixChat.js b/skins/base/views/pages/MatrixChat.js index 27d1a1151a..4ab0e6492b 100644 --- a/skins/base/views/pages/MatrixChat.js +++ b/skins/base/views/pages/MatrixChat.js @@ -25,28 +25,44 @@ var RightPanel = ComponentBroker.get('organisms/RightPanel'); var Login = ComponentBroker.get('templates/Login'); var UserSettings = ComponentBroker.get('organisms/UserSettings'); var Register = ComponentBroker.get('templates/Register'); +var CreateRoom = ComponentBroker.get('organisms/CreateRoom'); var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat"); // should be atomised var Loader = require("react-loader"); +var dis = require("../../../../src/dispatcher"); + module.exports = React.createClass({ displayName: 'MatrixChat', mixins: [MatrixChatController], + onRoomCreated: function(room_id) { + dis.dispatch({ + action: "view_room", + room_id: room_id, + }); + }, + render: function() { if (this.state.logged_in && this.state.ready) { var page_element; var right_panel = ""; - if (this.state.page_type == this.PageTypes.RoomView) { - page_element = - right_panel = - } else if (this.state.page_type == this.PageTypes.UserSettings) { - page_element = + switch (this.state.page_type) { + case this.PageTypes.RoomView: + page_element = + right_panel = + break; + case this.PageTypes.UserSettings: + page_element = + break; + case this.PageTypes.CreateRoom: + page_element = + break; } return ( diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index dfbcf2e217..58e8f2eef9 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -63,6 +63,8 @@ require('../skins/base/views/atoms/EnableNotificationsButton'); require('../skins/base/views/atoms/MessageTimestamp'); require('../skins/base/views/atoms/create_room/CreateRoomButton'); require('../skins/base/views/atoms/create_room/RoomNameTextbox'); +require('../skins/base/views/atoms/create_room/RoomTopic'); +require('../skins/base/views/atoms/create_room/RoomAlias'); require('../skins/base/views/atoms/create_room/Presets'); require('../skins/base/views/atoms/EditableText'); require('../skins/base/views/molecules/MatrixToolbar'); diff --git a/src/controllers/atoms/create_room/RoomAlias.js b/src/controllers/atoms/create_room/RoomAlias.js new file mode 100644 index 0000000000..804b0b29e1 --- /dev/null +++ b/src/controllers/atoms/create_room/RoomAlias.js @@ -0,0 +1,41 @@ +/* +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'); + +module.exports = { + propTypes: { + default_alias: React.PropTypes.string + }, + + getDefaultProps: function() { + return { + default_alias: '', + }; + }, + + getInitialState: function() { + return { + room_alias: this.props.default_alias, + } + }, + + getAlias: function() { + return this.state.room_alias; + }, +}; diff --git a/src/controllers/atoms/create_room/RoomTopic.js b/src/controllers/atoms/create_room/RoomTopic.js new file mode 100644 index 0000000000..cbd21b9b8e --- /dev/null +++ b/src/controllers/atoms/create_room/RoomTopic.js @@ -0,0 +1,41 @@ +/* +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'); + +module.exports = { + propTypes: { + default_topic: React.PropTypes.string + }, + + getDefaultProps: function() { + return { + default_topic: '', + }; + }, + + getInitialState: function() { + return { + room_topic: this.props.default_topic, + } + }, + + getTopic: function() { + return this.state.room_topic; + }, +}; diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index c2112ce58f..048f367950 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -77,11 +77,11 @@ module.exports = { var self = this; - deferred.then(function () { + deferred.then(function (resp) { self.setState({ phase: self.phases.CREATED, }); - self.props.onRoomCreated(); + self.props.onRoomCreated(resp.room_id); }, function(err) { self.setState({ phase: self.phases.ERROR, diff --git a/src/controllers/pages/MatrixChat.js b/src/controllers/pages/MatrixChat.js index 9367872b2a..26bc6cf62b 100644 --- a/src/controllers/pages/MatrixChat.js +++ b/src/controllers/pages/MatrixChat.js @@ -32,6 +32,11 @@ module.exports = { PageTypes: { RoomView: "room_view", UserSettings: "user_settings", + CreateRoom: "create_room", + }, + + AuxPanel: { + RoomSettings: "room_settings", }, getInitialState: function() { @@ -39,6 +44,7 @@ module.exports = { logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials), ready: false, page_type: this.PageTypes.RoomView, + aux_panel: null, }; }, @@ -143,6 +149,11 @@ module.exports = { page_type: this.PageTypes.UserSettings, }); break; + case 'view_create_room': + this.setState({ + page_type: this.PageTypes.CreateRoom, + }); + break; } },