From ed52cdf6dfd81f77593deb6a326b725e0f8002f7 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 15:14:26 +0100 Subject: [PATCH 1/9] Add basic CreateRoom organism. Supports setting room name and selecting preset --- .../atoms/create_room/CreateRoomButton.js | 32 +++++++++++++ skins/base/views/atoms/create_room/Presets.js | 35 +++++++++++++++ .../atoms/create_room/RoomNameTextbox.js | 32 +++++++++++++ skins/base/views/organisms/CreateRoom.js | 43 ++++++++++++++++++ src/ComponentBroker.js | 4 ++ .../atoms/create_room/CreateRoomButton.js | 35 +++++++++++++++ src/controllers/atoms/create_room/Presets.js | 45 +++++++++++++++++++ .../atoms/create_room/RoomNameTextbox.js | 45 +++++++++++++++++++ src/controllers/organisms/CreateRoom.js | 44 ++++++++++++++++++ 9 files changed, 315 insertions(+) create mode 100644 skins/base/views/atoms/create_room/CreateRoomButton.js create mode 100644 skins/base/views/atoms/create_room/Presets.js create mode 100644 skins/base/views/atoms/create_room/RoomNameTextbox.js create mode 100644 skins/base/views/organisms/CreateRoom.js create mode 100644 src/controllers/atoms/create_room/CreateRoomButton.js create mode 100644 src/controllers/atoms/create_room/Presets.js create mode 100644 src/controllers/atoms/create_room/RoomNameTextbox.js create mode 100644 src/controllers/organisms/CreateRoom.js diff --git a/skins/base/views/atoms/create_room/CreateRoomButton.js b/skins/base/views/atoms/create_room/CreateRoomButton.js new file mode 100644 index 0000000000..2f9ccae030 --- /dev/null +++ b/skins/base/views/atoms/create_room/CreateRoomButton.js @@ -0,0 +1,32 @@ +/* +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 CreateRoomButtonController = require("../../../../../src/controllers/atoms/create_room/CreateRoomButton"); + +module.exports = React.createClass({ + displayName: 'CreateRoomButton', + mixins: [CreateRoomButtonController], + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js new file mode 100644 index 0000000000..66cbcc323b --- /dev/null +++ b/skins/base/views/atoms/create_room/Presets.js @@ -0,0 +1,35 @@ +/* +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 PresetsController = require("../../../../../src/controllers/atoms/create_room/Presets"); + +module.exports = React.createClass({ + displayName: 'CreateRoomPresets', + mixins: [PresetsController], + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js new file mode 100644 index 0000000000..e8a877362a --- /dev/null +++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js @@ -0,0 +1,32 @@ +/* +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 RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox"); + +module.exports = React.createClass({ + displayName: 'CreateRoomButton', + mixins: [RoomNameTextboxController], + + render: function() { + return ( + + ); + } +}); diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js new file mode 100644 index 0000000000..7d91326fbd --- /dev/null +++ b/skins/base/views/organisms/CreateRoom.js @@ -0,0 +1,43 @@ +/* +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 CreateRoomController = require("../../../../src/controllers/organisms/CreateRoom"); + +var ComponentBroker = require('../../../../src/ComponentBroker'); + +var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); +var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); +var Presets = ComponentBroker.get("atoms/create_room/Presets"); + + +module.exports = React.createClass({ + displayName: 'CreateRoom', + mixins: [CreateRoomController], + + render: function() { + return ( +
+ + + +
+ ); + } +}); diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 32b07a0335..935d304d61 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -61,6 +61,9 @@ if (0) { require('../skins/base/views/atoms/LogoutButton'); 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/Presets'); require('../skins/base/views/molecules/MatrixToolbar'); require('../skins/base/views/molecules/RoomTile'); require('../skins/base/views/molecules/MessageTile'); @@ -82,4 +85,5 @@ require('../skins/base/views/organisms/RoomList'); require('../skins/base/views/organisms/RoomView'); require('../skins/base/views/templates/Login'); require('../skins/base/views/organisms/Notifier'); +require('../skins/base/views/organisms/CreateRoom'); } diff --git a/src/controllers/atoms/create_room/CreateRoomButton.js b/src/controllers/atoms/create_room/CreateRoomButton.js new file mode 100644 index 0000000000..f03dd56c97 --- /dev/null +++ b/src/controllers/atoms/create_room/CreateRoomButton.js @@ -0,0 +1,35 @@ +/* +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: { + onCreateRoom: React.PropTypes.func, + }, + + getDefaultProps: function() { + return { + onCreateRoom: function() {}, + }; + }, + + onClick: function() { + this.props.onCreateRoom(); + }, +}; diff --git a/src/controllers/atoms/create_room/Presets.js b/src/controllers/atoms/create_room/Presets.js new file mode 100644 index 0000000000..0ae0ffb40a --- /dev/null +++ b/src/controllers/atoms/create_room/Presets.js @@ -0,0 +1,45 @@ +/* +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_preset: React.PropTypes.string + }, + + onValueChanged: function(ev) { + this.setState({preset: ev.target.value}) + }, + + getDefaultProps: function() { + return { + default_preset: 'private_chat', + }; + }, + + getInitialState: function() { + return { + preset: this.props.default_preset, + } + }, + + getPreset: function() { + return this.state.preset; + }, +}; diff --git a/src/controllers/atoms/create_room/RoomNameTextbox.js b/src/controllers/atoms/create_room/RoomNameTextbox.js new file mode 100644 index 0000000000..a5017c89cc --- /dev/null +++ b/src/controllers/atoms/create_room/RoomNameTextbox.js @@ -0,0 +1,45 @@ +/* +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_name: React.PropTypes.string + }, + + onValueChanged: function(ev) { + this.setState({room_name: ev.target.value}) + }, + + getDefaultProps: function() { + return { + default_name: '', + }; + }, + + getInitialState: function() { + return { + room_name: this.props.default_name, + } + }, + + getName: function() { + return this.state.room_name; + }, +}; diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js new file mode 100644 index 0000000000..e24a75cff7 --- /dev/null +++ b/src/controllers/organisms/CreateRoom.js @@ -0,0 +1,44 @@ +/* +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("../../MatrixClientPeg"); + +module.exports = { + onCreateRoom: function() { + var room_name = this.refs.name_textbox.getName(); + console.log("Create room clicked. Name: " + room_name); + + var options = { + preset: this.refs.presets.getPreset(), + }; + + if (room_name) { + options.name = room_name; + } + + var cli = MatrixClientPeg.get(); + if (!cli) { + // TODO: Error. + console.error("Cannot create room: No matrix client."); + return; + } + + var deferred = MatrixClientPeg.get().createRoom(options); + } +}; From b53e710d20136087cdb43a11dcd5cfc13b3a5d50 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 16:53:49 +0100 Subject: [PATCH 2/9] Add invite selection to create room dialog --- skins/base/views/molecules/UserSelector.js | 45 +++++++++++++++++ skins/base/views/organisms/CreateRoom.js | 14 ++++++ src/ComponentBroker.js | 1 + src/controllers/molecules/UserSelector.js | 57 ++++++++++++++++++++++ src/controllers/organisms/CreateRoom.js | 18 ++++--- 5 files changed, 129 insertions(+), 6 deletions(-) create mode 100644 skins/base/views/molecules/UserSelector.js create mode 100644 src/controllers/molecules/UserSelector.js diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js new file mode 100644 index 0000000000..3053bfeb77 --- /dev/null +++ b/skins/base/views/molecules/UserSelector.js @@ -0,0 +1,45 @@ +/* +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 UserSelectorController = require("../../../../src/controllers/molecules/UserSelector"); + +module.exports = React.createClass({ + displayName: 'UserSelector', + mixins: [UserSelectorController], + + onAddUserId: function() { + this.addUser(this.refs.user_id_input.getDOMNode().value); + }, + + render: function() { + console.log("Render"); + return ( +
+
    + {this.state.selected_users.map(function(user_id, i) { + return
  • {user_id}
    • + })} +
+ + +
+ ); + } +}); diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index 7d91326fbd..e6115f2579 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -25,17 +25,31 @@ var ComponentBroker = require('../../../../src/ComponentBroker'); var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton"); var RoomNameTextbox = ComponentBroker.get("atoms/create_room/RoomNameTextbox"); var Presets = ComponentBroker.get("atoms/create_room/Presets"); +var UserSelector = ComponentBroker.get("molecules/UserSelector"); module.exports = React.createClass({ displayName: 'CreateRoom', mixins: [CreateRoomController], + getPreset: function() { + return this.refs.presets.getPreset(); + }, + + getName: function() { + return this.refs.name_textbox.getName(); + }, + + getInvitedUsers: function() { + return this.refs.user_selector.getUserIds(); + }, + render: function() { return (
+
); diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 935d304d61..8f818a657a 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -86,4 +86,5 @@ require('../skins/base/views/organisms/RoomView'); require('../skins/base/views/templates/Login'); require('../skins/base/views/organisms/Notifier'); require('../skins/base/views/organisms/CreateRoom'); +require('../skins/base/views/molecules/UserSelector'); } diff --git a/src/controllers/molecules/UserSelector.js b/src/controllers/molecules/UserSelector.js new file mode 100644 index 0000000000..e7e0509690 --- /dev/null +++ b/src/controllers/molecules/UserSelector.js @@ -0,0 +1,57 @@ +/* +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: { + initially_selected: React.PropTypes.arrayOf(React.PropTypes.string), + }, + + getDefaultProps: function() { + return { + initially_selected: [], + }; + }, + + getInitialState: function() { + return { + selected_users: this.props.initially_selected, + } + }, + + addUser: function(user_id) { + if (this.state.selected_users.indexOf(user_id == -1)) { + this.setState({ + selected_users: this.state.selected_users.concat([user_id]), + }); + } + }, + + removeUser: function(user_id) { + this.setState({ + selected_users: this.state.selected_users.filter(function(e) { + return e != user_id; + }), + }); + }, + + getUserIds: function() { + return this.state.selected_users; + } +}; diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index e24a75cff7..d97f24939b 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -21,17 +21,23 @@ var MatrixClientPeg = require("../../MatrixClientPeg"); module.exports = { onCreateRoom: function() { - var room_name = this.refs.name_textbox.getName(); - console.log("Create room clicked. Name: " + room_name); - - var options = { - preset: this.refs.presets.getPreset(), - }; + var options = {}; + var room_name = this.getName(); if (room_name) { options.name = room_name; } + var preset = this.getPreset(); + if (preset) { + options.preset = preset; + } + + var invited_users = this.getInvitedUsers(); + if (invited_users) { + options.invite = invited_users; + } + var cli = MatrixClientPeg.get(); if (!cli) { // TODO: Error. From a748c090fb6d2b0d2f0124f2620b2469a539c2d5 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 16:59:11 +0100 Subject: [PATCH 3/9] Move all element specific code into skins/ --- skins/base/views/atoms/create_room/Presets.js | 4 ++++ skins/base/views/atoms/create_room/RoomNameTextbox.js | 4 ++++ src/controllers/atoms/create_room/Presets.js | 4 ---- src/controllers/atoms/create_room/RoomNameTextbox.js | 4 ---- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js index 66cbcc323b..db980dad4e 100644 --- a/skins/base/views/atoms/create_room/Presets.js +++ b/skins/base/views/atoms/create_room/Presets.js @@ -24,6 +24,10 @@ module.exports = React.createClass({ displayName: 'CreateRoomPresets', mixins: [PresetsController], + onValueChanged: function(ev) { + this.setState({preset: ev.target.value}) + }, + render: function() { return ( diff --git a/src/controllers/atoms/create_room/Presets.js b/src/controllers/atoms/create_room/Presets.js index 0ae0ffb40a..5ff7327e5a 100644 --- a/src/controllers/atoms/create_room/Presets.js +++ b/src/controllers/atoms/create_room/Presets.js @@ -23,10 +23,6 @@ module.exports = { default_preset: React.PropTypes.string }, - onValueChanged: function(ev) { - this.setState({preset: ev.target.value}) - }, - getDefaultProps: function() { return { default_preset: 'private_chat', diff --git a/src/controllers/atoms/create_room/RoomNameTextbox.js b/src/controllers/atoms/create_room/RoomNameTextbox.js index a5017c89cc..e78692d992 100644 --- a/src/controllers/atoms/create_room/RoomNameTextbox.js +++ b/src/controllers/atoms/create_room/RoomNameTextbox.js @@ -23,10 +23,6 @@ module.exports = { default_name: React.PropTypes.string }, - onValueChanged: function(ev) { - this.setState({room_name: ev.target.value}) - }, - getDefaultProps: function() { return { default_name: '', From 03b715b8bfff3a77f00a2a645d2da9e7bd37ccf1 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 17:01:06 +0100 Subject: [PATCH 4/9] Add onRoomCreated callback to CreateRoom organism --- src/controllers/organisms/CreateRoom.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index d97f24939b..499585b0e2 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -20,6 +20,16 @@ var React = require("react"); var MatrixClientPeg = require("../../MatrixClientPeg"); module.exports = { + propTypes: { + onRoomCreated: React.PropTypes.func, + }, + + getDefaultProps: function() { + return { + onRoomCreated: function() {}, + }; + }, + onCreateRoom: function() { var options = {}; @@ -46,5 +56,9 @@ module.exports = { } var deferred = MatrixClientPeg.get().createRoom(options); + + deferred.done(function () { + this.props.onRoomCreated(); + }); } }; From a077abfb9918ae8a2c4499a967196bcd51f91509 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 17:04:44 +0100 Subject: [PATCH 5/9] Remove console.log --- skins/base/views/molecules/UserSelector.js | 1 - 1 file changed, 1 deletion(-) diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js index 3053bfeb77..e22b1e3a55 100644 --- a/skins/base/views/molecules/UserSelector.js +++ b/skins/base/views/molecules/UserSelector.js @@ -29,7 +29,6 @@ module.exports = React.createClass({ }, render: function() { - console.log("Render"); return (
    From c4764af9a28f860eabcb23e359254d6250174859 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 17:27:22 +0100 Subject: [PATCH 6/9] Add phases to CreateRoom organism --- skins/base/views/organisms/CreateRoom.js | 32 ++++++++++++++++++------ src/controllers/organisms/CreateRoom.js | 32 ++++++++++++++++++++++-- 2 files changed, 54 insertions(+), 10 deletions(-) diff --git a/skins/base/views/organisms/CreateRoom.js b/skins/base/views/organisms/CreateRoom.js index e6115f2579..36f6e466e5 100644 --- a/skins/base/views/organisms/CreateRoom.js +++ b/skins/base/views/organisms/CreateRoom.js @@ -45,13 +45,29 @@ module.exports = React.createClass({ }, render: function() { - return ( -
    - - - - -
    - ); + var curr_phase = this.state.phase; + if (curr_phase == this.phases.CREATING) { + return ( +
    Creating...
    + ); + } else { + var error_box = ""; + if (curr_phase == this.phases.ERROR) { + error_box = ( +
    + An error occured: {this.state.error_string} +
    + ); + } + return ( +
    + + + + + {error_box} +
    + ); + } } }); diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index 499585b0e2..f66893d9c7 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -24,12 +24,26 @@ module.exports = { onRoomCreated: React.PropTypes.func, }, + phases: { + CONFIG: "CONFIG", + CREATING: "CREATING", + CREATED: "CREATED", + ERROR: "ERROR", + }, + getDefaultProps: function() { return { onRoomCreated: function() {}, }; }, + getInitialState: function() { + return { + phase: this.phases.CONFIG, + error_string: "", + }; + }, + onCreateRoom: function() { var options = {}; @@ -57,8 +71,22 @@ module.exports = { var deferred = MatrixClientPeg.get().createRoom(options); - deferred.done(function () { - this.props.onRoomCreated(); + this.setState({ + phase: this.phases.CREATING, + }); + + var self = this; + + deferred.then(function () { + self.setState({ + phase: self.phases.CREATED, + }); + self.props.onRoomCreated(); + }, function(err) { + self.setState({ + phase: self.phases.ERROR, + error_string: err.toString(), + }); }); } }; From bb06b752b47f525cc5f4283c4577cb5153caa5a6 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 17:40:49 +0100 Subject: [PATCH 7/9] Document CreateRoom phases --- src/controllers/organisms/CreateRoom.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/controllers/organisms/CreateRoom.js b/src/controllers/organisms/CreateRoom.js index f66893d9c7..c2112ce58f 100644 --- a/src/controllers/organisms/CreateRoom.js +++ b/src/controllers/organisms/CreateRoom.js @@ -25,10 +25,10 @@ module.exports = { }, phases: { - CONFIG: "CONFIG", - CREATING: "CREATING", - CREATED: "CREATED", - ERROR: "ERROR", + CONFIG: "CONFIG", // We're waiting for user to configure and hit create. + CREATING: "CREATING", // We're sending the request. + CREATED: "CREATED", // We successfully created the room. + ERROR: "ERROR", // There was an error while trying to create room. }, getDefaultProps: function() { From 4f7dcdf5669f6c5b4a18e92d541313ff145bed7d Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Tue, 14 Jul 2015 17:48:12 +0100 Subject: [PATCH 8/9] Naming conventions --- skins/base/views/atoms/create_room/Presets.js | 2 +- skins/base/views/atoms/create_room/RoomNameTextbox.js | 2 +- skins/base/views/molecules/UserSelector.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/skins/base/views/atoms/create_room/Presets.js b/skins/base/views/atoms/create_room/Presets.js index db980dad4e..83fe61bdbb 100644 --- a/skins/base/views/atoms/create_room/Presets.js +++ b/skins/base/views/atoms/create_room/Presets.js @@ -30,7 +30,7 @@ module.exports = React.createClass({ render: function() { return ( - diff --git a/skins/base/views/atoms/create_room/RoomNameTextbox.js b/skins/base/views/atoms/create_room/RoomNameTextbox.js index 9d0ddfdf35..c358a14cb3 100644 --- a/skins/base/views/atoms/create_room/RoomNameTextbox.js +++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js @@ -21,7 +21,7 @@ var React = require('react'); var RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox"); module.exports = React.createClass({ - displayName: 'CreateRoomButton', + displayName: 'RoomNameTextbox', mixins: [RoomNameTextboxController], onValueChanged: function(ev) { diff --git a/skins/base/views/molecules/UserSelector.js b/skins/base/views/molecules/UserSelector.js index e22b1e3a55..7517e29d0f 100644 --- a/skins/base/views/molecules/UserSelector.js +++ b/skins/base/views/molecules/UserSelector.js @@ -31,13 +31,13 @@ module.exports = React.createClass({ render: function() { return (
    -
      +
        {this.state.selected_users.map(function(user_id, i) { return
      • {user_id}
        • })}
      - - + +
    ); } From 5cd92229ebdee3795be10e0d14f8ca735843a411 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Wed, 15 Jul 2015 13:52:27 +0100 Subject: [PATCH 9/9] Add an editable text atom --- skins/base/views/atoms/EditableText.js | 68 ++++++++++++++++++++++++++ src/ComponentBroker.js | 1 + src/controllers/atoms/EditableText.js | 68 ++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) create mode 100644 skins/base/views/atoms/EditableText.js create mode 100644 src/controllers/atoms/EditableText.js diff --git a/skins/base/views/atoms/EditableText.js b/skins/base/views/atoms/EditableText.js new file mode 100644 index 0000000000..a8f55814e7 --- /dev/null +++ b/skins/base/views/atoms/EditableText.js @@ -0,0 +1,68 @@ +/* +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 EditableTextController = require("../../../../src/controllers/atoms/EditableText"); + +module.exports = React.createClass({ + displayName: 'EditableText', + mixins: [EditableTextController], + + onKeyUp: function(ev) { + if (ev.key == "Enter") { + this.onFinish(ev); + } else if (ev.key == "Escape") { + this.cancelEdit(); + } + }, + + onClickDiv: function() { + this.setState({ + phase: this.Phases.Edit, + }) + }, + + onFocus: function(ev) { + ev.target.setSelectionRange(0, ev.target.value.length); + }, + + onFinish: function(ev) { + this.setValue(ev.target.value); + }, + + render: function() { + var editable_el; + + if (this.state.phase == this.Phases.Display) { + editable_el =
    {this.state.value}
    ; + } else if (this.state.phase == this.Phases.Edit) { + editable_el = ( +
    + +
    + ); + } + + return ( +
    + {editable_el} +
    + ); + } +}); diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 8f818a657a..1332627afa 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -64,6 +64,7 @@ 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/Presets'); +require('../skins/base/views/atoms/EditableText'); require('../skins/base/views/molecules/MatrixToolbar'); require('../skins/base/views/molecules/RoomTile'); require('../skins/base/views/molecules/MessageTile'); diff --git a/src/controllers/atoms/EditableText.js b/src/controllers/atoms/EditableText.js new file mode 100644 index 0000000000..ac46973613 --- /dev/null +++ b/src/controllers/atoms/EditableText.js @@ -0,0 +1,68 @@ +/* +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: { + onValueChanged: React.PropTypes.func, + initalValue: React.PropTypes.string, + }, + + Phases: { + Display: "display", + Edit: "edit", + }, + + getDefaultProps: function() { + return { + onValueChanged: function() {}, + initalValue: '', + }; + }, + + getInitialState: function() { + return { + value: this.props.initalValue, + phase: this.Phases.Display, + } + }, + + getValue: function() { + return this.state.value; + }, + + setValue: function(val) { + this.setState({ + value: val, + phase: this.Phases.Display, + }); + + this.onValueChanged(); + }, + + cancelEdit: function() { + this.setState({ + phase: this.Phases.Display, + }); + }, + + onValueChanged: function() { + this.props.onValueChanged(this.state.value); + }, +};