mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

vaguely make room editing prettier

Browse source
This commit is contained in:
Matthew Hodgson 2015-07-21 23:19:24 -07:00
parent 904754b20d
commit 538536eb88
8 changed files with 76 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

22
skins/base/views/molecules/RoomHeader.js
View file

@ -57,7 +57,7 @@ module.exports = React.createClass({
case "ringback":
case "connected":
callButtons = (
<div className="mx_RoomHeader_hangupButton" onClick={this.onHangupClick}>
<div className="mx_RoomHeader_textButton" onClick={this.onHangupClick}>
End call
</div>
);
@ -72,15 +72,16 @@ module.exports = React.createClass({
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 = <input type="text" defaultValue={actual_name} placeholder="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
name =
<div className="mx_RoomHeader_nameEditing">
<input className="mx_RoomHeader_nameInput" type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>
</div>
);
// if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
} else {
name = <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />;
name =
<div className="mx_RoomHeader_name">
<EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
</div>
if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
settings_button = (
<div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
@ -96,15 +97,12 @@ module.exports = React.createClass({
<img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48" alt=""/>
</div>
<div className="mx_RoomHeader_info">
<div className="mx_RoomHeader_name">
{ name }
</div>
{ name }
{ topic_el }
</div>
</div>
{callButtons}
<div className="mx_RoomHeader_rightRow">
{ save_button }
{ settings_button }
<div className="mx_RoomHeader_button">
<img src="img/search.png" width="32" height="32"/>

16
skins/base/views/molecules/RoomSettings.js
View file

@ -128,12 +128,12 @@ module.exports = React.createClass({
return (
<div className="mx_RoomSettings">
<textarea placeholder="Description" defaultValue={topic} ref="topic"/> <br/>
<textarea className="mx_RoomSettings_description" placeholder="Topic" defaultValue={topic} ref="topic"/> <br/>
<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" /> Encrypt room</label> <br/>
Power levels:
<h3>Power levels</h3>
<div className="mx_RoomSettings_power_levels mx_RoomSettings_settings">
<div>
<label htmlFor="mx_RoomSettings_ban_level">Ban level</label>
@ -173,7 +173,7 @@ module.exports = React.createClass({
</div>
</div>
User levels:
<h3>User levels</h3>
<div className="mx_RoomSettings_user_levels mx_RoomSettings_settings">
{Object.keys(user_levels).map(function(user, i) {
return (
@ -185,7 +185,7 @@ module.exports = React.createClass({
})}
</div>
Event levels:
<h3>Event levels</h3>
<div className="mx_RoomSettings_event_lvels mx_RoomSettings_settings">
{Object.keys(events_levels).map(function(event_type, i) {
return (
@ -197,7 +197,7 @@ module.exports = React.createClass({
})}
</div>
Banned users:
<h3>Banned users</h3>
<div className="mx_RoomSettings_banned">
{banned.map(function(member, i) {
return (
@ -207,6 +207,12 @@ module.exports = React.createClass({
);
})}
</div>
<div className="mx_RoomSettings_buttons">
<div className="mx_RoomSettings_button" onClick={this.props.onSaveClick}>
Save this room
</div>
</div>
</div>
);
}

4
skins/base/views/organisms/RoomView.js
View file

@ -133,7 +133,7 @@ module.exports = React.createClass({
var roomEdit = null;
if (this.state.editingRoomSettings) {
roomEdit = <RoomSettings ref="room_settings" room={this.state.room} />;
roomEdit = <RoomSettings ref="room_settings" onSaveClick={this.onSaveClick} room={this.state.room} />;
}
if (this.state.uploadingRoomSettings) {
@ -143,7 +143,7 @@ module.exports = React.createClass({
return (
<div className="mx_RoomView">
<RoomHeader ref="header" room={this.state.room} editing={this.state.editingRoomSettings}
onSettingsClick={this.onSettingsClick} onSaveClick={this.onSaveClick}/>
onSettingsClick={this.onSettingsClick}/>
<div className="mx_RoomView_auxPanel">
<CallView room={this.state.room}/>
{ roomEdit }