gaja-group
/
element-web
forked from matrix/element-web
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add ability to edit room settings

This commit is contained in:
Erik Johnston 2015-07-20 15:07:51 +01:00
parent 87dd9e8bb4
commit 0039ccf203
6 changed files with 125 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
skins/base/css/organisms/RoomView.css
View File

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

36
skins/base/views/molecules/RoomHeader.js
View File

@ -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>

74
skins/base/views/organisms/RoomView.js
View File

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

1
src/ComponentBroker.js
View File

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

18
src/controllers/molecules/RoomHeader.js
View File

@ -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 = {
});
}
};

8
src/controllers/organisms/RoomView.js
View File

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