Merge pull request #141 from matrix-org/kegan/room-settings-refactor

Refactor room settings
This commit is contained in:
Kegsay 2016-02-05 15:50:39 +00:00
commit 4ce41f7f6c
5 changed files with 415 additions and 403 deletions

View file

@ -17,23 +17,9 @@ limitations under the License.
var q = require("q");
var React = require('react');
var MatrixClientPeg = require('../../../MatrixClientPeg');
var Tinter = require('../../../Tinter');
var sdk = require('../../../index');
var Modal = require('../../../Modal');
var room_colors = [
// magic room default values courtesy of Ribot
["#76cfa6", "#eaf5f0"],
["#81bddb", "#eaf1f4"],
["#bd79cb", "#f3eaf5"],
["#c65d94", "#f5eaef"],
["#e55e5e", "#f5eaea"],
["#eca46f", "#f5eeea"],
["#dad658", "#f5f4ea"],
["#80c553", "#eef5ea"],
["#bb814e", "#eee8e3"],
["#595959", "#ececec"],
];
var ObjectUtils = require("../../../ObjectUtils");
module.exports = React.createClass({
displayName: 'RoomSettings',
@ -45,87 +31,171 @@ module.exports = React.createClass({
},
getInitialState: function() {
// work out the initial color index
var room_color_index = undefined;
var color_scheme_event = this.props.room.getAccountData("org.matrix.room.color_scheme");
if (color_scheme_event) {
var color_scheme = color_scheme_event.getContent();
if (color_scheme.primary_color) color_scheme.primary_color = color_scheme.primary_color.toLowerCase();
if (color_scheme.secondary_color) color_scheme.secondary_color = color_scheme.secondary_color.toLowerCase();
// XXX: we should validate these values
for (var i = 0; i < room_colors.length; i++) {
var room_color = room_colors[i];
if (room_color[0] === color_scheme.primary_color &&
room_color[1] === color_scheme.secondary_color)
{
room_color_index = i;
break;
}
}
if (room_color_index === undefined) {
// append the unrecognised colours to our palette
room_color_index = room_colors.length;
room_colors[room_color_index] = [ color_scheme.primary_color, color_scheme.secondary_color ];
}
}
else {
room_color_index = 0;
}
var tags = {};
Object.keys(this.props.room.tags).forEach(function(tagName) {
tags[tagName] = {};
});
var areNotifsMuted = false;
var roomPushRule = MatrixClientPeg.get().getRoomPushRule("global", this.props.room.roomId);
if (roomPushRule) {
if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
areNotifsMuted = true;
}
}
return {
name: this._yankValueFromEvent("m.room.name", "name"),
topic: this._yankValueFromEvent("m.room.topic", "topic"),
join_rule: this._yankValueFromEvent("m.room.join_rules", "join_rule"),
history_visibility: this._yankValueFromEvent("m.room.history_visibility", "history_visibility"),
guest_access: this._yankValueFromEvent("m.room.guest_access", "guest_access"),
power_levels_changed: false,
color_scheme_changed: false,
color_scheme_index: room_color_index,
tags_changed: false,
tags: tags,
areNotifsMuted: areNotifsMuted
};
},
setName: function(name) {
this.setState({
name: name
});
},
setTopic: function(topic) {
this.setState({
topic: topic
});
},
save: function() {
var stateWasSetDefer = q.defer();
// the caller may have JUST called setState on stuff, so we need to re-render before saving
// else we won't use the latest values of things.
// We can be a bit cheeky here and set a loading flag, and listen for the callback on that
// to know when things have been set.
this.setState({ _loading: true}, () => {
stateWasSetDefer.resolve();
this.setState({ _loading: false});
});
return stateWasSetDefer.promise.then(() => {
return this._save();
});
},
_save: function() {
const roomId = this.props.room.roomId;
var promises = this.saveAliases(); // returns Promise[]
var originalState = this.getInitialState();
// diff between original state and this.state to work out what has been changed
console.log("Original: %s", JSON.stringify(originalState));
console.log("New: %s", JSON.stringify(this.state));
// name and topic
if (this._hasDiff(this.state.name, originalState.name)) {
promises.push(MatrixClientPeg.get().setRoomName(roomId, this.state.name));
}
if (this._hasDiff(this.state.topic, originalState.topic)) {
promises.push(MatrixClientPeg.get().setRoomTopic(roomId, this.state.topic));
}
if (this.state.history_visibility !== originalState.history_visibility) {
promises.push(MatrixClientPeg.get().sendStateEvent(
roomId, "m.room.history_visibility",
{ history_visibility: this.state.history_visibility },
""
));
}
if (this.state.join_rule !== originalState.join_rule) {
promises.push(MatrixClientPeg.get().sendStateEvent(
roomId, "m.room.join_rules",
{ join_rule: this.state.join_rule },
""
));
}
if (this.state.guest_access !== originalState.guest_access) {
promises.push(MatrixClientPeg.get().sendStateEvent(
roomId, "m.room.guest_access",
{ guest_access: this.state.guest_access },
""
));
}
if (this.state.areNotifsMuted !== originalState.areNotifsMuted) {
promises.push(MatrixClientPeg.get().setRoomMutePushRule(
"global", roomId, this.state.areNotifsMuted
));
}
// power levels
var powerLevels = this._getPowerLevels();
if (powerLevels) {
promises.push(MatrixClientPeg.get().sendStateEvent(
roomId, "m.room.power_levels", powerLevels, ""
));
}
// tags
if (this.state.tags_changed) {
var tagDiffs = ObjectUtils.getKeyValueArrayDiffs(originalState.tags, this.state.tags);
// [ {place: add, key: "m.favourite", val: "yep"} ]
tagDiffs.forEach(function(diff) {
switch (diff.place) {
case "add":
promises.push(
MatrixClientPeg.get().setRoomTag(roomId, diff.key, {})
);
break;
case "del":
promises.push(
MatrixClientPeg.get().deleteRoomTag(roomId, diff.key)
);
break;
default:
console.error("Unknown tag operation: %s", diff.place);
break;
}
});
}
console.log("Performing %s operations", promises.length);
// color scheme
promises.push(this.saveColor());
return q.allSettled(promises);
},
saveAliases: function() {
if (!this.refs.alias_settings) { return q(); }
if (!this.refs.alias_settings) { return [q()]; }
return this.refs.alias_settings.saveSettings();
},
resetState: function() {
this.setState(this.getInitialState());
saveColor: function() {
if (!this.refs.color_settings) { return q(); }
return this.refs.color_settings.saveSettings();
},
canGuestsJoin: function() {
return this.refs.guests_join.checked;
_hasDiff: function(strA, strB) {
// treat undefined as an empty string because other components may blindly
// call setName("") when there has been no diff made to the name!
strA = strA || "";
strB = strB || "";
return strA !== strB;
},
canGuestsRead: function() {
return this.refs.guests_read.checked;
},
getTopic: function() {
return this.refs.topic ? this.refs.topic.value : "";
},
getJoinRules: function() {
return this.refs.is_private.checked ? "invite" : "public";
},
getHistoryVisibility: function() {
return this.refs.share_history.checked ? "shared" : "invited";
},
areNotificationsMuted: function() {
return this.refs.are_notifications_muted.checked;
},
getPowerLevels: function() {
_getPowerLevels: function() {
if (!this.state.power_levels_changed) return undefined;
var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
power_levels = power_levels.getContent();
var powerLevels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
powerLevels = powerLevels ? powerLevels.getContent() : {};
var new_power_levels = {
var newPowerLevels = {
ban: parseInt(this.refs.ban.getValue()),
kick: parseInt(this.refs.kick.getValue()),
redact: parseInt(this.refs.redact.getValue()),
@ -133,39 +203,11 @@ module.exports = React.createClass({
events_default: parseInt(this.refs.events_default.getValue()),
state_default: parseInt(this.refs.state_default.getValue()),
users_default: parseInt(this.refs.users_default.getValue()),
users: power_levels.users,
events: power_levels.events,
users: powerLevels.users,
events: powerLevels.events,
};
return new_power_levels;
},
getTagOperations: function() {
if (!this.state.tags_changed) return undefined;
var ops = [];
var delta = {};
Object.keys(this.props.room.tags).forEach(function(oldTag) {
delta[oldTag] = delta[oldTag] || 0;
delta[oldTag]--;
});
Object.keys(this.state.tags).forEach(function(newTag) {
delta[newTag] = delta[newTag] || 0;
delta[newTag]++;
});
Object.keys(delta).forEach(function(tag) {
if (delta[tag] == 1) {
ops.push({ type: "put", tag: tag });
} else if (delta[tag] == -1) {
ops.push({ type: "delete", tag: tag });
} else {
console.error("Calculated tag delta of " + delta[tag] +
" - this should never happen!");
}
});
return ops;
return newPowerLevels;
},
onPowerLevelsChanged: function() {
@ -173,27 +215,30 @@ module.exports = React.createClass({
power_levels_changed: true
});
},
getColorScheme: function() {
if (!this.state.color_scheme_changed) return undefined;
return {
primary_color: room_colors[this.state.color_scheme_index][0],
secondary_color: room_colors[this.state.color_scheme_index][1],
};
_yankValueFromEvent: function(stateEventType, keyName, defaultValue) {
// E.g.("m.room.name","name") would yank the "name" content key from "m.room.name"
var event = this.props.room.currentState.getStateEvents(stateEventType, '');
if (!event) {
return defaultValue;
}
return event.getContent()[keyName] || defaultValue;
},
onColorSchemeChanged: function(index) {
// preview what the user just changed the scheme to.
Tinter.tint(room_colors[index][0], room_colors[index][1]);
_onHistoryRadioToggle: function(ev) {
this.setState({
color_scheme_changed: true,
color_scheme_index: index,
history_visibility: ev.target.value
});
},
_onToggle: function(keyName, checkedValue, uncheckedValue, ev) {
console.log("Checkbox toggle: %s %s", keyName, ev.target.checked);
var state = {};
state[keyName] = ev.target.checked ? checkedValue : uncheckedValue;
this.setState(state);
},
onTagChange: function(tagName, event) {
_onTagChange: function(tagName, event) {
if (event.target.checked) {
if (tagName === 'm.favourite') {
delete this.state.tags['m.lowpriority'];
@ -202,13 +247,12 @@ module.exports = React.createClass({
delete this.state.tags['m.favourite'];
}
this.state.tags[tagName] = this.state.tags[tagName] || {};
this.state.tags[tagName] = this.state.tags[tagName] || ["yep"];
}
else {
delete this.state.tags[tagName];
}
// XXX: hacky say to deep-edit state
this.setState({
tags: this.state.tags,
tags_changed: true
@ -220,34 +264,14 @@ module.exports = React.createClass({
// (or turning them into informative stuff)
var AliasSettings = sdk.getComponent("room_settings.AliasSettings");
var ColorSettings = sdk.getComponent("room_settings.ColorSettings");
var EditableText = sdk.getComponent('elements.EditableText');
var PowerSelector = sdk.getComponent('elements.PowerSelector');
var join_rule = this.props.room.currentState.getStateEvents('m.room.join_rules', '');
if (join_rule) join_rule = join_rule.getContent().join_rule;
var history_visibility = this.props.room.currentState.getStateEvents('m.room.history_visibility', '');
if (history_visibility) history_visibility = history_visibility.getContent().history_visibility;
var power_levels = this.props.room.currentState.getStateEvents('m.room.power_levels', '');
var guest_access = this.props.room.currentState.getStateEvents('m.room.guest_access', '');
if (guest_access) {
guest_access = guest_access.getContent().guest_access;
}
var are_notifications_muted;
var roomPushRule = MatrixClientPeg.get().getRoomPushRule("global", this.props.room.roomId);
if (roomPushRule) {
if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
are_notifications_muted = true;
}
}
var events_levels = (power_levels ? power_levels.events : {}) || {};
var user_id = MatrixClientPeg.get().credentials.userId;
if (power_levels) {
power_levels = power_levels.getContent();
@ -305,41 +329,14 @@ module.exports = React.createClass({
if (events_levels['m.room.canonical_alias'] !== undefined) {
canonical_alias_level = events_levels['m.room.canonical_alias'];
}
var can_set_canonical_alias = current_user_level >= canonical_alias_level;
var can_set_tag = true;
var canSetCanonicalAlias = current_user_level >= canonical_alias_level;
var canSetTag = true;
var self = this;
var room_colors_section =
<div>
<h3>Room Colour</h3>
<div className="mx_RoomSettings_roomColors">
{room_colors.map(function(room_color, i) {
var selected;
if (i === self.state.color_scheme_index) {
selected =
<div className="mx_RoomSettings_roomColor_selected">
<img src="img/tick.svg" width="17" height="14" alt="./"/>
</div>
}
var boundClick = self.onColorSchemeChanged.bind(self, i)
return (
<div className="mx_RoomSettings_roomColor"
key={ "room_color_" + i }
style={{ backgroundColor: room_color[1] }}
onClick={ boundClick }>
{ selected }
<div className="mx_RoomSettings_roomColorPrimary" style={{ backgroundColor: room_color[0] }}></div>
</div>
);
})}
</div>
</div>;
var user_levels_section;
var userLevelsSection;
if (Object.keys(user_levels).length) {
user_levels_section =
userLevelsSection =
<div>
<h3>Privileged Users</h3>
<ul className="mx_RoomSettings_userLevels">
@ -354,13 +351,13 @@ module.exports = React.createClass({
</div>;
}
else {
user_levels_section = <div>No users have specific privileges in this room.</div>
userLevelsSection = <div>No users have specific privileges in this room.</div>
}
var banned = this.props.room.getMembersWithMembership("ban");
var banned_users_section;
var bannedUsersSection;
if (banned.length) {
banned_users_section =
bannedUsersSection =
<div>
<h3>Banned users</h3>
<ul className="mx_RoomSettings_banned">
@ -375,10 +372,13 @@ module.exports = React.createClass({
</div>;
}
var create_event = this.props.room.currentState.getStateEvents('m.room.create', '');
var unfederatable_section;
if (create_event.getContent()["m.federate"] === false) {
unfederatable_section = <div className="mx_RoomSettings_powerLevel">Ths room is not accessible by remote Matrix servers.</div>
var unfederatableSection;
if (this._yankValueFromEvent("m.room.create", "m.federate") === false) {
unfederatableSection = (
<div className="mx_RoomSettings_powerLevel">
Ths room is not accessible by remote Matrix servers.
</div>
);
}
// TODO: support editing custom events_levels
@ -395,43 +395,89 @@ module.exports = React.createClass({
}
});
var tags_section =
var tagsSection =
<div className="mx_RoomSettings_tags">
Tagged as:
{ can_set_tag ?
{ canSetTag ?
tags.map(function(tag, i) {
return (<label key={ i }>
<input type="checkbox"
ref={ tag.ref }
checked={ tag.name in self.state.tags }
onChange={ self.onTagChange.bind(self, tag.name) }/>
onChange={ self._onTagChange.bind(self, tag.name) }/>
{ tag.label }
</label>);
}) : tags.map(function(tag) { return tag.label; }).join(", ")
}
</div>
// If there is no history_visibility, it is assumed to be 'shared'.
// http://matrix.org/docs/spec/r0.0.0/client_server.html#id31
var historyVisibility = this.state.history_visibility || "shared";
// FIXME: disable guests_read if the user hasn't turned on shared history
return (
<div className="mx_RoomSettings">
{ tags_section }
{ tagsSection }
<div className="mx_RoomSettings_toggles">
<label><input type="checkbox" ref="are_notifications_muted" defaultChecked={are_notifications_muted}/> Mute notifications for this room</label>
<label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label>
<label><input type="checkbox" ref="share_history" defaultChecked={history_visibility === "shared" || history_visibility === "world_readable"}/> Share message history with new participants</label>
<label><input type="checkbox" ref="guests_join" defaultChecked={guest_access === "can_join"}/> Let guests join this room</label>
<label><input type="checkbox" ref="guests_read" defaultChecked={history_visibility === "world_readable"}/> Let users read message history without joining</label>
<label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label>
<label>
<input type="checkbox" onChange={this._onToggle.bind(this, "areNotifsMuted", true, false)} defaultChecked={this.state.areNotifsMuted}/>
Mute notifications for this room
</label>
<label>
<input type="checkbox" onChange={this._onToggle.bind(this, "join_rule", "invite", "public")}
defaultChecked={this.state.join_rule !== "public"}/>
Make this room private
</label>
<label>
<input type="checkbox" onChange={this._onToggle.bind(this, "guest_access", "can_join", "forbidden")}
defaultChecked={this.state.guest_access === "can_join"}/>
Let guests join this room
</label>
<div className="mx_RoomSettings_settings">
<h3>Who can read history?</h3>
<label htmlFor="hvis_wr">
<input type="radio" id="hvis_wr" name="historyVis" value="world_readable"
defaultChecked={historyVisibility === "world_readable"}
onChange={this._onHistoryRadioToggle} />
Anyone
</label>
<label htmlFor="hvis_sh">
<input type="radio" id="hvis_sh" name="historyVis" value="shared"
defaultChecked={historyVisibility === "shared"}
onChange={this._onHistoryRadioToggle} />
Members only (since the room began)
</label>
<label htmlFor="hvis_inv">
<input type="radio" id="hvis_inv" name="historyVis" value="invited"
defaultChecked={historyVisibility === "invited"}
onChange={this._onHistoryRadioToggle} />
Members only (since they were invited)
</label>
<label htmlFor="hvis_joi">
<input type="radio" id="hvis_joi" name="historyVis" value="joined"
defaultChecked={historyVisibility === "joined"}
onChange={this._onHistoryRadioToggle} />
Members only (since they joined)
</label>
</div>
<label className="mx_RoomSettings_encrypt">
<input type="checkbox" />
Encrypt room
</label>
</div>
{ room_colors_section }
<div>
<h3>Room Colour</h3>
<ColorSettings ref="color_settings" room={this.props.room} />
</div>
<AliasSettings ref="alias_settings"
roomId={this.props.room.roomId}
canSetCanonicalAlias={can_set_canonical_alias}
canSetCanonicalAlias={canSetCanonicalAlias}
canSetAliases={can_set_room_aliases}
canonicalAliasEvent={this.props.room.currentState.getStateEvents('m.room.canonical_alias', '')}
aliasEvents={this.props.room.currentState.getStateEvents('m.room.aliases')} />
@ -476,12 +522,12 @@ module.exports = React.createClass({
);
})}
{ unfederatable_section }
{ unfederatableSection }
</div>
{ user_levels_section }
{ userLevelsSection }
{ banned_users_section }
{ bannedUsersSection }
<h3>Advanced</h3>
<div className="mx_RoomSettings_settings">