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 ? <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div> : 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 = <input type="text" defaultValue={this.props.room.name} ref="name_edit"/>;
+ // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
+ save_button = (
+ <div className="mx_RoomHeader_button"onClick={this.props.onSaveClick}>
+ Save
+ </div>
+ );
+ } else {
+ name = <EditableText initialValue={this.props.room.name} onValueChanged={this.onNameChange} />;
+ if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
+ settings_button = (
+ <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
+ <img src="img/settings.png" width="32" height="32"/>
+ </div>
+ );
+ }
+
return (
<div className="mx_RoomHeader">
<div className="mx_RoomHeader_wrapper">
@@ -61,15 +86,14 @@ module.exports = React.createClass({
</div>
<div className="mx_RoomHeader_info">
<div className="mx_RoomHeader_name">
- <EditableText initialValue={this.props.room.name} onValueChanged={this.onNameChange} />
+ { name }
</div>
- { topic }
+ { topic_el }
</div>
</div>
<div className="mx_RoomHeader_rightRow">
- <div className="mx_RoomHeader_button">
- <img src="img/settings.png" width="32" height="32"/>
- </div>
+ { save_button }
+ { settings_button }
<div className="mx_RoomHeader_button">
<img src="img/search.png" width="32" height="32"/>
</div>
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 = <RoomSettings ref="room_settings" room={this.state.room} />;
+ }
+
return (
<div className="mx_RoomView">
- <RoomHeader room={this.state.room} />
+ <RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
+ onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick}/>
<div className="mx_RoomView_auxPanel">
<CallView room={this.state.room}/>
+ { roomEdit }
</div>
<div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}>
<div className="mx_RoomView_messageListWrapper">
@@ -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 = <DateSeparator key={ts1} ts={ts1}/>;
continuation = false;
}
- }
+ }
if (!TileType) continue;
ret.unshift(
<TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
@@ -313,4 +314,3 @@ module.exports = {
return ret;
}
};
-