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;
}
},