From 0039ccf20338869e0ae465d5cd879757b3c1b3d3 Mon Sep 17 00:00:00 2001 From: Erik Johnston Date: Mon, 20 Jul 2015 15:07:51 +0100 Subject: [PATCH] Add ability to edit room settings --- skins/base/css/organisms/RoomView.css | 4 +- skins/base/views/molecules/RoomHeader.js | 36 ++++++++++-- skins/base/views/organisms/RoomView.js | 74 +++++++++++++++++++++++- src/ComponentBroker.js | 1 + src/controllers/molecules/RoomHeader.js | 18 +++++- src/controllers/organisms/RoomView.js | 8 +-- 6 files changed, 125 insertions(+), 16 deletions(-) diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 9341f213..88f52aa6 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/skins/base/css/organisms/RoomView.css @@ -60,7 +60,7 @@ limitations under the License. order: 3; width: 100%; - height: 100%; + flex: 1; margin-top: 18px; margin-bottom: 18px; @@ -101,7 +101,7 @@ limitations under the License. .mx_RoomView_statusAreaBox { max-width: 720px; - margin: auto; + margin: auto; border-top: 1px solid #a8dbf3; } diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js index a6769977..6d01c6a4 100644 --- a/skins/base/views/molecules/RoomHeader.js +++ b/skins/base/views/molecules/RoomHeader.js @@ -33,10 +33,13 @@ module.exports = React.createClass({ } }, + getRoomName: function() { + return this.refs.name_edit.getDOMNode().value; + }, + render: function() { var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); - topic = topic ?
{ topic.getContent().topic }
: null; var callButtons; if (this.state) { @@ -52,6 +55,28 @@ module.exports = React.createClass({ } } + var name = null; + var topic_el = null; + var save_button = null; + var settings_button = null; + if (this.props.editing) { + name = ; + // if (topic) topic_el =
+ save_button = ( +
+ Save +
+ ); + } else { + name = ; + if (topic) topic_el =
{ topic.getContent().topic }
; + settings_button = ( +
+ +
+ ); + } + return (
@@ -61,15 +86,14 @@ module.exports = React.createClass({
- + { name }
- { topic } + { topic_el }
-
- -
+ { save_button } + { settings_button }
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js index a93937f0..3e1fb6c6 100644 --- a/skins/base/views/organisms/RoomView.js +++ b/skins/base/views/organisms/RoomView.js @@ -28,6 +28,7 @@ var MessageTile = ComponentBroker.get('molecules/MessageTile'); var RoomHeader = ComponentBroker.get('molecules/RoomHeader'); var MessageComposer = ComponentBroker.get('molecules/MessageComposer'); var CallView = ComponentBroker.get("molecules/voip/CallView"); +var RoomSettings = ComponentBroker.get("molecules/RoomSettings"); var RoomViewController = require("../../../../src/controllers/organisms/RoomView"); @@ -38,6 +39,68 @@ module.exports = React.createClass({ displayName: 'RoomView', mixins: [RoomViewController], + onSettingsClick: function() { + this.setState({editingRoomSettings: true}); + }, + + onSaveClick: function() { + this.setState({editingRoomSettings: false}); + + var new_name = this.refs.header.getRoomName(); + var new_topic = this.refs.room_settings.getTopic(); + var new_join_rule = this.refs.room_settings.getJoinRules(); + var new_history_visibility = this.refs.room_settings.getHistoryVisibility(); + + var old_name = this.state.room.name; + + var old_topic = this.state.room.currentState.getStateEvents('m.room.topic', ''); + if (old_topic) { + old_topic = old_topic.getContent().topic; + } else { + old_topic = ""; + } + + var old_join_rule = this.state.room.currentState.getStateEvents('m.room.join_rules', ''); + if (old_join_rule) { + old_join_rule = old_join_rule.getContent().join_rule; + } else { + old_join_rule = "invite"; + } + + var old_history_visibility = this.state.room.currentState.getStateEvents('m.room.history_visibility', ''); + console.log(old_history_visibility); + if (old_history_visibility) { + old_history_visibility = old_history_visibility.getContent().history_visibility; + } else { + old_history_visibility = "shared"; + } + + + if (old_name != new_name && new_name != undefined) { + MatrixClientPeg.get().setRoomName(this.state.room.roomId, new_name); + } + + if (old_topic != new_topic && new_topic != undefined) { + MatrixClientPeg.get().setRoomTopic(this.state.room.roomId, new_topic); + } + + if (old_join_rule != new_join_rule && new_join_rule != undefined) { + MatrixClientPeg.get().sendStateEvent( + this.state.room.roomId, "m.room.join_rules", { + join_rule: new_join_rule, + }, "" + ); + } + + if (old_history_visibility != new_history_visibility && new_history_visibility != undefined) { + MatrixClientPeg.get().sendStateEvent( + this.state.room.roomId, "m.room.history_visibility", { + history_visibility: new_history_visibility, + }, "" + ); + } + }, + render: function() { if (!this.state.room) { return ( @@ -103,11 +166,19 @@ module.exports = React.createClass({ } } + var roomEdit = null; + + if (this.state.editingRoomSettings) { + roomEdit = ; + } + return (
- +
+ { roomEdit }
@@ -129,4 +200,3 @@ module.exports = React.createClass({ } }, }); - diff --git a/src/ComponentBroker.js b/src/ComponentBroker.js index 8a7bd663..56164d3d 100644 --- a/src/ComponentBroker.js +++ b/src/ComponentBroker.js @@ -92,6 +92,7 @@ require('../skins/base/views/molecules/UserSelector'); require('../skins/base/views/organisms/UserSettings'); require('../skins/base/views/molecules/ChangeAvatar'); require('../skins/base/views/molecules/ChangePassword'); +require('../skins/base/views/molecules/RoomSettings'); // new for vector require('../skins/base/views/organisms/LeftPanel'); require('../skins/base/views/organisms/RightPanel'); diff --git a/src/controllers/molecules/RoomHeader.js b/src/controllers/molecules/RoomHeader.js index 5bd51e44..2ef99953 100644 --- a/src/controllers/molecules/RoomHeader.js +++ b/src/controllers/molecules/RoomHeader.js @@ -21,10 +21,25 @@ limitations under the License. * this.state.call_state = the UI state of the call (see CallHandler) */ +var React = require('react'); var dis = require("../../dispatcher"); var CallHandler = require("../../CallHandler"); module.exports = { + propTypes: { + room: React.PropTypes.object.isRequired, + editing: React.PropTypes.bool, + onSettingsClick: React.PropTypes.func, + onSaveClick: React.PropTypes.func, + }, + + getDefaultProps: function() { + return { + editing: false, + onSettingsClick: function() {}, + onSaveClick: function() {}, + }; + }, componentDidMount: function() { this.dispatcherRef = dis.register(this.onAction); @@ -43,7 +58,7 @@ module.exports = { onAction: function(payload) { // if we were given a room_id to track, don't handle anything else. - if (payload.room_id && this.props.room && + if (payload.room_id && this.props.room && this.props.room.roomId !== payload.room_id) { return; } @@ -78,4 +93,3 @@ module.exports = { }); } }; - diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js index a5bae754..4f6c4d3c 100644 --- a/src/controllers/organisms/RoomView.js +++ b/src/controllers/organisms/RoomView.js @@ -44,7 +44,8 @@ module.exports = { getInitialState: function() { return { room: this.props.roomId ? MatrixClientPeg.get().getRoom(this.props.roomId) : null, - messageCap: INITIAL_SIZE + messageCap: INITIAL_SIZE, + editingRoomSettings: false, } }, @@ -99,7 +100,7 @@ module.exports = { // we'll only be showing a spinner. if (this.state.joining) return; if (room.roomId != this.props.roomId) return; - + if (this.refs.messageWrapper) { var messageWrapper = this.refs.messageWrapper.getDOMNode(); this.atBottom = messageWrapper.scrollHeight - messageWrapper.scrollTop <= messageWrapper.clientHeight; @@ -300,7 +301,7 @@ module.exports = { dateSeparator = ; continuation = false; } - } + } if (!TileType) continue; ret.unshift( @@ -313,4 +314,3 @@ module.exports = { return ret; } }; -