Wire up CreateRoom to UI.

pull/1/head
Erik Johnston 2015-07-16 13:49:34 +01:00
parent 5d9db52b32
commit c708976635
11 changed files with 241 additions and 13 deletions

View File

@ -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 (
<input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}/>
);
}
});

View File

@ -30,7 +30,7 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<input type="text" className="mx_RoomNameTextbox" placeholder="ex. MyNewRoom" onChange={this.onValueChanged}/> <input type="text" className="mx_RoomNameTextbox" placeholder="Name" onChange={this.onValueChanged}/>
); );
} }
}); });

View File

@ -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 (
<textarea className="mx_RoomTopic" placeholder="Description" onChange={this.onValueChanged}>
</textarea>
);
}
});

View File

@ -33,11 +33,15 @@ module.exports = React.createClass({
dis.dispatch({action: 'view_user_settings'}); dis.dispatch({action: 'view_user_settings'});
}, },
onCreateRoomClick: function() {
dis.dispatch({action: 'view_create_room'});
},
render: function() { render: function() {
return ( return (
<div className="mx_DirectoryMenu"> <div className="mx_DirectoryMenu">
<div className="mx_DirectoryMenu_options"> <div className="mx_DirectoryMenu_options">
<div className="mx_RoomTile"> <div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
<img src="img/create-big.png" width="42" height="42"/> <img src="img/create-big.png" width="42" height="42"/>
</div> </div>

View File

@ -24,6 +24,8 @@ var ComponentBroker = require('../../../../src/ComponentBroker');
var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); 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 Presets = ComponentBroker.get("atoms/create_room/Presets");
var UserSelector = ComponentBroker.get("molecules/UserSelector"); var UserSelector = ComponentBroker.get("molecules/UserSelector");
@ -61,10 +63,12 @@ module.exports = React.createClass({
} }
return ( return (
<div className="mx_CreateRoom"> <div className="mx_CreateRoom">
<label>Room Name <RoomNameTextbox ref="name_textbox" /></label> <RoomNameTextbox ref="name_textbox" /> <br />
<Presets ref="presets"/> <Presets ref="presets"/> <br />
<UserSelector ref="user_selector"/> <RoomTopic /> <br />
<CreateRoomButton onCreateRoom={this.onCreateRoom} /> <RoomAlias /> <br />
<UserSelector ref="user_selector"/> <br />
<CreateRoomButton onCreateRoom={this.onCreateRoom} /> <br />
{error_box} {error_box}
</div> </div>
); );

View File

@ -25,28 +25,44 @@ var RightPanel = ComponentBroker.get('organisms/RightPanel');
var Login = ComponentBroker.get('templates/Login'); var Login = ComponentBroker.get('templates/Login');
var UserSettings = ComponentBroker.get('organisms/UserSettings'); var UserSettings = ComponentBroker.get('organisms/UserSettings');
var Register = ComponentBroker.get('templates/Register'); var Register = ComponentBroker.get('templates/Register');
var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat"); var MatrixChatController = require("../../../../src/controllers/pages/MatrixChat");
// should be atomised // should be atomised
var Loader = require("react-loader"); var Loader = require("react-loader");
var dis = require("../../../../src/dispatcher");
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'MatrixChat', displayName: 'MatrixChat',
mixins: [MatrixChatController], mixins: [MatrixChatController],
onRoomCreated: function(room_id) {
dis.dispatch({
action: "view_room",
room_id: room_id,
});
},
render: function() { render: function() {
if (this.state.logged_in && this.state.ready) { if (this.state.logged_in && this.state.ready) {
var page_element; var page_element;
var right_panel = ""; var right_panel = "";
if (this.state.page_type == this.PageTypes.RoomView) { switch (this.state.page_type) {
page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} /> case this.PageTypes.RoomView:
right_panel = <RightPanel roomId={this.state.currentRoom} /> page_element = <RoomView roomId={this.state.currentRoom} key={this.state.currentRoom} />
} else if (this.state.page_type == this.PageTypes.UserSettings) { right_panel = <RightPanel roomId={this.state.currentRoom} />
page_element = <UserSettings /> break;
case this.PageTypes.UserSettings:
page_element = <UserSettings />
break;
case this.PageTypes.CreateRoom:
page_element = <CreateRoom onRoomCreated={this.onRoomCreated}/>
break;
} }
return ( return (

View File

@ -63,6 +63,8 @@ require('../skins/base/views/atoms/EnableNotificationsButton');
require('../skins/base/views/atoms/MessageTimestamp'); require('../skins/base/views/atoms/MessageTimestamp');
require('../skins/base/views/atoms/create_room/CreateRoomButton'); require('../skins/base/views/atoms/create_room/CreateRoomButton');
require('../skins/base/views/atoms/create_room/RoomNameTextbox'); 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/create_room/Presets');
require('../skins/base/views/atoms/EditableText'); require('../skins/base/views/atoms/EditableText');
require('../skins/base/views/molecules/MatrixToolbar'); require('../skins/base/views/molecules/MatrixToolbar');

View File

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

View File

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

View File

@ -77,11 +77,11 @@ module.exports = {
var self = this; var self = this;
deferred.then(function () { deferred.then(function (resp) {
self.setState({ self.setState({
phase: self.phases.CREATED, phase: self.phases.CREATED,
}); });
self.props.onRoomCreated(); self.props.onRoomCreated(resp.room_id);
}, function(err) { }, function(err) {
self.setState({ self.setState({
phase: self.phases.ERROR, phase: self.phases.ERROR,

View File

@ -32,6 +32,11 @@ module.exports = {
PageTypes: { PageTypes: {
RoomView: "room_view", RoomView: "room_view",
UserSettings: "user_settings", UserSettings: "user_settings",
CreateRoom: "create_room",
},
AuxPanel: {
RoomSettings: "room_settings",
}, },
getInitialState: function() { getInitialState: function() {
@ -39,6 +44,7 @@ module.exports = {
logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials), logged_in: !!(MatrixClientPeg.get() && MatrixClientPeg.get().credentials),
ready: false, ready: false,
page_type: this.PageTypes.RoomView, page_type: this.PageTypes.RoomView,
aux_panel: null,
}; };
}, },
@ -143,6 +149,11 @@ module.exports = {
page_type: this.PageTypes.UserSettings, page_type: this.PageTypes.UserSettings,
}); });
break; break;
case 'view_create_room':
this.setState({
page_type: this.PageTypes.CreateRoom,
});
break;
} }
}, },