OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

WIP all new roomsettings

pull/21833/head
Matthew Hodgson 2016-01-13 13:15:13 +00:00
parent bd226609d0
commit c9c496f0e5
7 changed files with 161 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/SlashCommands.js
View File

@ -57,7 +57,7 @@ var commands = {
}
return success(
MatrixClientPeg.get().setRoomAccountData(
room_id, "m.room.color_scheme", colorScheme
room_id, "org.matrix.room.color_scheme", colorScheme
)
);
}

1
src/component-index.js
View File

@ -40,6 +40,7 @@ module.exports.components['views.dialogs.ErrorDialog'] = require('./components/v
module.exports.components['views.dialogs.LogoutPrompt'] = require('./components/views/dialogs/LogoutPrompt');
module.exports.components['views.dialogs.QuestionDialog'] = require('./components/views/dialogs/QuestionDialog');
module.exports.components['views.elements.EditableText'] = require('./components/views/elements/EditableText');
module.exports.components['views.elements.PowerSelector'] = require('./components/views/elements/PowerSelector');
module.exports.components['views.elements.ProgressBar'] = require('./components/views/elements/ProgressBar');
module.exports.components['views.elements.TintableSvg'] = require('./components/views/elements/TintableSvg');
module.exports.components['views.elements.UserSelector'] = require('./components/views/elements/UserSelector');

2
src/components/structures/MatrixChat.js
View File

@ -360,7 +360,7 @@ module.exports = React.createClass({
var theAlias = MatrixTools.getCanonicalAliasForRoom(room);
if (theAlias) presentedId = theAlias;
var color_scheme_event = room.getAccountData("m.room.color_scheme");
var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
var color_scheme = {};
if (color_scheme_event) {
color_scheme = color_scheme_event.getContent();

6
src/components/structures/RoomView.js
View File

@ -244,7 +244,7 @@ module.exports = React.createClass({
var room = MatrixClientPeg.get().getRoom(this.props.roomId);
if (!room) return;
var color_scheme_event = room.getAccountData("m.room.color_scheme");
var color_scheme_event = room.getAccountData("org.matrix.room.color_scheme");
var color_scheme = {};
if (color_scheme_event) {
color_scheme = color_scheme_event.getContent();
@ -255,7 +255,7 @@ module.exports = React.createClass({
onRoomAccountData: function(room, event) {
if (room.roomId == this.props.roomId) {
if (event.getType === "m.room.color_scheme") {
if (event.getType === "org.matrix.room.color_scheme") {
var color_scheme = event.getContent();
// XXX: we should validate the event
Tinter.tint(color_scheme.primary_color, color_scheme.secondary_color);
@ -810,7 +810,7 @@ module.exports = React.createClass({
if (new_color_scheme) {
deferreds.push(
MatrixClientPeg.get().setRoomAccountData(
this.state.room.roomId, "m.room.color_scheme", new_color_scheme
this.state.room.roomId, "org.matrix.room.color_scheme", new_color_scheme
)
);
}

8
src/components/views/elements/EditableText.js
View File

@ -33,6 +33,7 @@ module.exports = React.createClass({
labelClassName: React.PropTypes.string,
placeholderClassName: React.PropTypes.string,
blurToCancel: React.PropTypes.bool,
editable: React.PropTypes.bool,
},
Phases: {
@ -49,6 +50,7 @@ module.exports = React.createClass({
initialValue: '',
label: '',
placeholder: '',
editable: true,
};
},
@ -141,6 +143,8 @@ module.exports = React.createClass({
},
onClickDiv: function(ev) {
if (!this.props.editable) return;
this.setState({
phase: this.Phases.Edit,
})
@ -178,9 +182,9 @@ module.exports = React.createClass({
render: function() {
var editable_el;
if (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value) {
if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
// show the label
editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{this.props.label}</div>;
editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
} else {
// show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
editable_el = <div ref="editable_div" contentEditable="true" className={this.props.className}

3
src/components/views/messages/TextualBody.js
View File

@ -36,6 +36,9 @@ module.exports = React.createClass({
},
componentDidUpdate: function() {
// XXX: why don't we linkify here?
// XXX: why do we bother doing this on update at all, given events are immutable?
if (this.props.mxEvent.getContent().format === "org.matrix.custom.html")
HtmlUtils.highlightDom(ReactDOM.findDOMNode(this));
},

206
src/components/views/rooms/RoomSettings.js
View File

@ -43,7 +43,7 @@ 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("m.room.color_scheme");
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();
@ -72,6 +72,8 @@ module.exports = React.createClass({
power_levels_changed: false,
color_scheme_changed: false,
color_scheme_index: room_color_index,
aliases_changed: false,
aliases: [],
};
},
@ -133,7 +135,24 @@ module.exports = React.createClass({
});
},
onAliasChanged: function(i, j) {
},
onAliasDeleted: function(i, j) {
},
onAliasAdded: function(i, j) {
},
render: function() {
// TODO: go through greying out things you don't have permission to change
// (or turning them into informative stuff)
var EditableText = sdk.getComponent('elements.EditableText');
var PowerSelector = sdk.getComponent('elements.PowerSelector');
var ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
var join_rule = this.props.room.currentState.getStateEvents('m.room.join_rules', '');
@ -146,6 +165,8 @@ module.exports = React.createClass({
var events_levels = power_levels.events || {};
var user_id = MatrixClientPeg.get().credentials.userId;
if (power_levels) {
power_levels = power_levels.getContent();
@ -163,8 +184,6 @@ module.exports = React.createClass({
var user_levels = power_levels.users || {};
var user_id = MatrixClientPeg.get().credentials.userId;
var current_user_level = user_levels[user_id];
if (current_user_level == undefined) current_user_level = default_user_level;
@ -201,6 +220,67 @@ module.exports = React.createClass({
var self = this;
var alias_events = this.props.room.currentState.getStateEvents('m.room.aliases');
var canonical_alias_event = this.props.room.currentState.getStateEvents('m.room.canonical_alias', '');
var canonical_alias = canonical_alias_event ? canonical_alias_event.getContent().alias : "";
var domain = MatrixClientPeg.get().getDomain();
var aliases_section =
<div>
<h3>Directory</h3>
<div className="mx_RoomSettings_aliasLabel">
{ alias_events.length ? "This room is accessible via:" : "This room has no aliases." }
</div>
<div className="mx_RoomSettings_aliasesTable">
{ alias_events.map(function(alias_event, i) {
return alias_event.getContent().aliases.map(function(alias, j) {
var deleteButton;
if (alias_event && alias_event.getStateKey() === domain) {
deleteButton = <img src="img/cancel.svg" width="18" height="18" alt="Delete" onClick={ self.onAliasDeleted.bind(self, i, j) }/>;
}
return (
<div className="mx_RoomSettings_aliasesTableRow" key={ i + "_" + j }>
<EditableText
className="mx_RoomSettings_alias mx_RoomSettings_editable"
placeholderClassName="mx_RoomSettings_aliasPlaceholder"
placeholder={ "New alias (e.g. #foo:" + domain + ")" }
blurToCancel={ false }
onValueChanged={ self.onAliasChanged.bind(self, i, j) }
editable={ alias_event && alias_event.getStateKey() === domain }
initialValue={ alias }
/>
<div className="mx_RoomSettings_deleteAlias">
{ deleteButton }
</div>
</div>
);
});
})}
<div className="mx_RoomSettings_aliasesTableRow" key="new">
<EditableText
className="mx_RoomSettings_alias mx_RoomSettings_editable"
placeholderClassName="mx_RoomSettings_aliasPlaceholder"
placeholder={ "New alias (e.g. #foo:" + domain + ")" }
blurToCancel={ false }
onValueChanged={ self.onAliasAdded } />
<div className="mx_RoomSettings_addAlias">
<img src="img/add.svg" width="18" height="18" alt="Add" onClick={ self.onAliasAdded }/>
</div>
</div>
</div>
<div className="mx_RoomSettings_aliasLabel">The canonical entry is&nbsp;
<select defaultValue={ canonical_alias }>
{ alias_events.map(function(alias_event, i) {
return alias_event.getContent().aliases.map(function(alias, j) {
return <option value={ alias } key={ i + "_" + j }>{ alias }</option>
});
})}
<option value="" key="unset">not set</option>
</select>
</div>
</div>;
var room_colors_section =
<div>
<h3>Room Colour</h3>
@ -236,19 +316,19 @@ module.exports = React.createClass({
</div>;
}
var banned = this.props.room.getMembersWithMembership("ban");
var events_levels_section;
if (events_levels.length) {
events_levels_section =
var user_levels_section;
if (user_levels.length) {
user_levels_section =
<div>
<h3>Event levels</h3>
<div className="mx_RoomSettings_eventLevels mx_RoomSettings_settings">
{Object.keys(events_levels).map(function(event_type, i) {
<div>
Users with specific roles are:
</div>
<div>
{Object.keys(user_levels).map(function(user, i) {
return (
<div key={event_type}>
<label htmlFor={"mx_RoomSettings_event_"+i}>{event_type}</label>
<input type="text" defaultValue={events_levels[event_type]} size="3" id={"mx_RoomSettings_event_"+i} disabled/>
<div className="mx_RoomSettings_userLevel" key={user}>
{ user } is a
<PowerSelector value={ user_levels[user] } disabled={true}/>
</div>
);
})}
@ -256,6 +336,7 @@ module.exports = React.createClass({
</div>;
}
var banned = this.props.room.getMembersWithMembership("ban");
var banned_users_section;
if (banned.length) {
banned_users_section =
@ -273,69 +354,74 @@ module.exports = React.createClass({
</div>;
}
// TODO: support editing custom events_levels
// TODO: support editing custom user_levels
return (
<div className="mx_RoomSettings">
<label><input type="checkbox" ref="is_private" defaultChecked={join_rule != "public"}/> Make this room private</label> <br/>
<label><input type="checkbox" ref="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
<label><input type="checkbox" ref="guest_access" disabled={join_rule != "public"} defaultChecked={history_visibility == "world_readable"}/> Allow guest access</label> <br/>
<label className="mx_RoomSettings_encrypt"><input type="checkbox" /> Encrypt room</label>
{ room_colors_section }
<h3>Power levels</h3>
<div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
<div>
<label htmlFor="mx_RoomSettings_ban_level">Ban level</label>
<input type="text" defaultValue={ban_level} size="3" ref="ban" id="mx_RoomSettings_ban_level"
disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_kick_level">Kick level</label>
<input type="text" defaultValue={kick_level} size="3" ref="kick" id="mx_RoomSettings_kick_level"
disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_redact_level">Redact level</label>
<input type="text" defaultValue={redact_level} size="3" ref="redact" id="mx_RoomSettings_redact_level"
disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_invite_level">Invite level</label>
<input type="text" defaultValue={invite_level} size="3" ref="invite" id="mx_RoomSettings_invite_level"
disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_event_level">Send event level</label>
<input type="text" defaultValue={send_level} size="3" ref="events_default" id="mx_RoomSettings_event_level"
disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_state_level">Set state level</label>
<input type="text" defaultValue={state_level} size="3" ref="state_default" id="mx_RoomSettings_state_level"
disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div>
<label htmlFor="mx_RoomSettings_user_level">Default user level</label>
<input type="text" defaultValue={default_user_level} size="3" ref="users_default"
id="mx_RoomSettings_user_level" disabled={!can_change_levels || current_user_level < default_user_level}
onChange={this.onPowerLevelsChanged}/>
</div>
</div>
{ aliases_section }
<h3>User levels</h3>
<div className="mx_RoomSettings_userLevels mx_RoomSettings_settings">
{Object.keys(user_levels).map(function(user, i) {
<h3>Permissions</h3>
<div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
<div className="mx_RoomSettings_powerLevel">
The default level for new room members is
<PowerSelector value={default_user_level} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To send messages, you must be a
<PowerSelector value={send_level} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To invite users into the room, you must be a
<PowerSelector value={invite_level} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To configure the room (set room state), you must be a
<PowerSelector value={state_level} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To kick users, you must be a
<PowerSelector value={kick_level} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To ban users, you must be a
<PowerSelector value={ban_level} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
</div>
<div className="mx_RoomSettings_powerLevel">
To redact messages, you must be a
<PowerSelector value={redact_level} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
</div>
{Object.keys(events_levels).map(function(event_type, i) {
return (
<div key={user}>
<label htmlFor={"mx_RoomSettings_user_"+i}>{user}</label>
<input type="text" defaultValue={user_levels[user]} size="3" id={"mx_RoomSettings_user_"+i} disabled/>
<div className="mx_RoomSettings_powerLevel" key={event_type}>
To send events of type <code>{ event_type }</code>, you must be a
<PowerSelector value={ events_levels[event_type] } disabled={true} onChange={this.onPowerLevelsChanged}/>
</div>
);
})}
</div>
{ events_levels_section }
<h3>Users</h3>
<div className="mx_RoomSettings_userLevels mx_RoomSettings_settings">
<div>
You are a <PowerSelector room={ this.props.room } value={current_user_level} disabled={true}/>
</div>
{ user_levels_section }
</div>
{ banned_users_section }
{ change_avatar }
</div>
);
}