Add ability to edit room settings

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;
 

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">
+                        { save_button }
-                            <img src="img/settings.png" width="32" height="32"/>
+                        { settings_button }
-                        </div>
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>

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({
         }
     },
 });
-

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');

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);
@@ -78,4 +93,3 @@ module.exports = {
         });
     }
 };
-

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,
         }
     },
 
@@ -313,4 +314,3 @@ module.exports = {
         return ret;
     }
 };
-