WIP all new roomsettings

src/SlashCommands.js

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

src/component-index.js

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

src/components/structures/MatrixChat.js

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

src/components/structures/RoomView.js

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

src/components/views/elements/EditableText.js

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

src/components/views/messages/TextualBody.js

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

src/components/views/rooms/RoomSettings.js

@@ -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>
+                { aliases_section }
+
+                <h3>Permissions</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 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>
-                        <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 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>
-                        <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 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>
-                        <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 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>
-                        <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 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>
-                        <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 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>
 
-                <h3>User levels</h3>
-                <div className="mx_RoomSettings_userLevels mx_RoomSettings_settings">
-                    {Object.keys(user_levels).map(function(user, i) {
+                    {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>
         );
     }