diff --git a/skins/base/css/molecules/RoomSettings.css b/skins/base/css/molecules/RoomSettings.css new file mode 100644 index 0000000000..4100b9e3ee --- /dev/null +++ b/skins/base/css/molecules/RoomSettings.css @@ -0,0 +1,30 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_RoomSettings_settings { + display: table; + margin: 5px 0; +} + +.mx_RoomSettings_settings > div { + display: table-row; +} + +.mx_RoomSettings_settings > div > * { + display: table-cell; + + margin: 0 10px; +} diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css index 07eeebf1b7..7789374123 100644 --- a/skins/base/css/organisms/RoomView.css +++ b/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; @@ -101,7 +101,7 @@ limitations under the License. .mx_RoomView_statusAreaBox { max-width: 720px; - margin: auto; + margin: auto; border-top: 1px solid #a8dbf3; } diff --git a/skins/base/views/molecules/RoomHeader.js b/skins/base/views/molecules/RoomHeader.js index 22e05868a9..7ad001d660 100644 --- a/skins/base/views/molecules/RoomHeader.js +++ b/skins/base/views/molecules/RoomHeader.js @@ -28,11 +28,15 @@ module.exports = React.createClass({ mixins: [RoomHeaderController], onNameChange: function(new_name) { - if (this.props.room.name != new_name) { + if (this.props.room.name != new_name && new_name) { MatrixClientPeg.get().setRoomName(this.props.room.roomId, new_name); } }, + getRoomName: function() { + return this.refs.name_edit.getDOMNode().value; + }, + render: function() { var header; @@ -46,7 +50,6 @@ module.exports = React.createClass({ } else { var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); - topic = topic ?
{ topic.getContent().topic }
: null; var callButtons; if (this.state) { @@ -62,7 +65,31 @@ module.exports = React.createClass({ } } - header = + var name = null; + var topic_el = null; + var save_button = null; + var settings_button = null; + var actual_name = this.props.room.currentState.getStateEvents('m.room.name', ''); + if (actual_name) actual_name = actual_name.getContent().name; + if (this.props.editing) { + name = ; + // if (topic) topic_el =
+ save_button = ( +
+ Save +
+ ); + } else { + name = ; + if (topic) topic_el =
{ topic.getContent().topic }
; + settings_button = ( +
+ +
+ ); + } + + header =
@@ -70,16 +97,15 @@ module.exports = React.createClass({
- + { name }
- { topic } + { topic_el }
{callButtons}
-
- -
+ { save_button } + { settings_button }
diff --git a/skins/base/views/molecules/RoomSettings.js b/skins/base/views/molecules/RoomSettings.js new file mode 100644 index 0000000000..2eecd096b0 --- /dev/null +++ b/skins/base/views/molecules/RoomSettings.js @@ -0,0 +1,200 @@ +/* +Copyright 2015 OpenMarket Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +'use strict'; + +var React = require('react'); +var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); + +var RoomSettingsController = require("../../../../src/controllers/molecules/RoomSettings"); + +module.exports = React.createClass({ + displayName: 'RoomSettings', + mixins: [RoomSettingsController], + + getTopic: function() { + return this.refs.topic.getDOMNode().value; + }, + + getJoinRules: function() { + return this.refs.is_private.getDOMNode().checked ? "invite" : "public"; + }, + + getHistoryVisibility: function() { + return this.refs.share_history.getDOMNode().checked ? "shared" : "invited"; + }, + + 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 new_power_levels = { + ban: parseInt(this.refs.ban.getDOMNode().value), + kick: parseInt(this.refs.kick.getDOMNode().value), + redact: parseInt(this.refs.redact.getDOMNode().value), + invite: parseInt(this.refs.invite.getDOMNode().value), + events_default: parseInt(this.refs.events_default.getDOMNode().value), + state_default: parseInt(this.refs.state_default.getDOMNode().value), + users_default: parseInt(this.refs.users_default.getDOMNode().value), + users: power_levels.users, + events: power_levels.events, + }; + + return new_power_levels; + }, + + onPowerLevelsChanged: function() { + this.setState({ + power_levels_changed: true + }); + }, + + render: function() { + var topic = this.props.room.currentState.getStateEvents('m.room.topic', ''); + if (topic) topic = topic.getContent().topic; + + 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', ''); + + if (power_levels) { + power_levels = power_levels.getContent(); + + var ban_level = parseInt(power_levels.ban); + var kick_level = parseInt(power_levels.kick); + var redact_level = parseInt(power_levels.redact); + var invite_level = parseInt(power_levels.invite || 0); + var send_level = parseInt(power_levels.events_default || 0); + var state_level = parseInt(power_levels.state_default || 0); + var default_user_level = parseInt(power_levels.users_default || 0); + + if (power_levels.ban == undefined) ban_level = 50; + if (power_levels.kick == undefined) kick_level = 50; + if (power_levels.redact == undefined) redact_level = 50; + + var user_levels = power_levels.users || []; + var events_levels = power_levels.events || []; + + 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; + + var power_level_level = events_levels["m.room.power_levels"]; + if (power_level_level == undefined) { + power_level_level = state_level; + } + + var can_change_levels = current_user_level >= power_level_level; + } else { + var ban_level = 50; + var kick_level = 50; + var redact_level = 50; + var invite_level = 0; + var send_level = 0; + var state_level = 0; + var default_user_level = 0; + + var user_levels = []; + var events_levels = []; + + var current_user_level = 0; + + var power_level_level = 0; + + var can_change_levels = false; + } + + return ( +
+