PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge remote-tracking branch 'upstream/vector'

Browse source
This commit is contained in:
Erik Johnston 2015-07-22 09:24:13 +01:00
commit 79e03597b3
9 changed files with 77 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/vector/index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" style="height: 100%; overflow: hidden"> <html lang="en" style="height: 100%;">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vector</title> <title>vector</title>

23
skins/base/css/molecules/RoomHeader.css
View file

@ -40,10 +40,10 @@ limitations under the License.
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
width: 100%; flex: 1;
} }
.mx_RoomHeader_hangupButton { .mx_RoomHeader_textButton {
height: 48px; height: 48px;
margin-top: 18px; margin-top: 18px;
background-color: #80cef4; background-color: #80cef4;
@ -75,9 +75,6 @@ limitations under the License.
-ms-flex-order: 3; -ms-flex-order: 3;
-webkit-order: 3; -webkit-order: 3;
order: 3; order: 3;
-webkit-flex: 0 0 200px;
flex: 0 0 200px;
} }
.mx_RoomHeader_info { .mx_RoomHeader_info {
@ -107,6 +104,22 @@ limitations under the License.
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.mx_RoomHeader_nameEditing {
padding-left: 16px;
padding-right: 16px;
margin-top: -5px;
}
.mx_RoomHeader_nameInput {
border-radius: 3px;
width: 260px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
padding: 9px;
margin-top: 6px;
}
.mx_RoomHeader_topic { .mx_RoomHeader_topic {
vertical-align: bottom; vertical-align: bottom;
float: left; float: left;

31
skins/base/css/molecules/RoomSettings.css
View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_RoomSettings { .mx_RoomSettings {
max-height: 250px; max-height: 250px;
padding-top: 12px;
} }
.mx_RoomSettings_settings { .mx_RoomSettings_settings {
@ -32,3 +33,33 @@ limitations under the License.
margin: 0 10px; margin: 0 10px;
} }
.mx_RoomSettings input,
.mx_RoomSettings textarea {
border-radius: 3px;
border: 1px solid #c7c7c7;
font-weight: 300;
font-size: 14px;
padding: 9px;
margin-top: 6px;
}
.mx_RoomSettings_buttons {
text-align: right;
}
.mx_RoomSettings_button {
display: inline;
border: 0px;
height: 36px;
border-radius: 36px;
font-weight: 400;
font-size: 16px;
color: #fff;
background-color: #80cef4;
width: auto;
margin: auto;
padding: 6px;
padding-left: 1em;
padding-right: 1em;
}

1
skins/base/css/molecules/voip/VideoView.css
View file

@ -18,7 +18,6 @@ limitations under the License.
width: 100%; width: 100%;
position: relative; position: relative;
z-index: 30; z-index: 30;
margin-top: 12px;
} }
.mx_VideoView video { .mx_VideoView video {

2
skins/base/css/organisms/LeftPanel.css
View file

@ -39,8 +39,8 @@ limitations under the License.
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
height: 100%;
overflow-y: scroll; overflow-y: scroll;
flex: 1 1 0;
} }
.mx_LeftPanel .mx_BottomLeftMenu { .mx_LeftPanel .mx_BottomLeftMenu {

3
skins/base/css/organisms/RoomView.css
View file

@ -47,10 +47,13 @@ limitations under the License.
-webkit-order: 2; -webkit-order: 2;
order: 2; order: 2;
min-width: 0px;
max-width: 720px; max-width: 720px;
width: 100%; width: 100%;
margin: auto; margin: auto;
border-bottom: 1px solid #a8dbf3;
overflow: scroll; overflow: scroll;
-webkit-flex: 0 0 auto; -webkit-flex: 0 0 auto;
flex: 0 0 auto; flex: 0 0 auto;

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

@ -57,7 +57,7 @@ module.exports = React.createClass({
case "ringback": case "ringback":
case "connected": case "connected":
callButtons = ( callButtons = (
<div className="mx_RoomHeader_hangupButton" onClick={this.onHangupClick}> <div className="mx_RoomHeader_textButton" onClick={this.onHangupClick}>
End call End call
</div> </div>
); );
@ -72,15 +72,16 @@ module.exports = React.createClass({
var actual_name = this.props.room.currentState.getStateEvents('m.room.name', ''); var actual_name = this.props.room.currentState.getStateEvents('m.room.name', '');
if (actual_name) actual_name = actual_name.getContent().name; if (actual_name) actual_name = actual_name.getContent().name;
if (this.props.editing) { if (this.props.editing) {
name = <input type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>; name =
// if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div> <div className="mx_RoomHeader_nameEditing">
save_button = ( <input className="mx_RoomHeader_nameInput" type="text" defaultValue={actual_name} placeholder="Name" ref="name_edit"/>
<div className="mx_RoomHeader_button"onClick={this.props.onSaveClick}>
Save
</div> </div>
); // if (topic) topic_el = <div className="mx_RoomHeader_topic"><textarea>{ topic.getContent().topic }</textarea></div>
} else { } 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>; if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
settings_button = ( settings_button = (
<div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}> <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=""/> <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48" alt=""/>
</div> </div>
<div className="mx_RoomHeader_info"> <div className="mx_RoomHeader_info">
<div className="mx_RoomHeader_name"> { name }
{ name }
</div>
{ topic_el } { topic_el }
</div> </div>
</div> </div>
{callButtons} {callButtons}
<div className="mx_RoomHeader_rightRow"> <div className="mx_RoomHeader_rightRow">
{ save_button }
{ settings_button } { settings_button }
<div className="mx_RoomHeader_button"> <div className="mx_RoomHeader_button">
<img src="img/search.png" width="32" height="32"/> <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 ( return (
<div className="mx_RoomSettings"> <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="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="share_history" defaultChecked={history_visibility == "shared"}/> Share message history with new users</label> <br/>
<label><input type="checkbox" /> Encrypt room</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 className="mx_RoomSettings_power_levels mx_RoomSettings_settings">
<div> <div>
<label htmlFor="mx_RoomSettings_ban_level">Ban level</label> <label htmlFor="mx_RoomSettings_ban_level">Ban level</label>
@ -173,7 +173,7 @@ module.exports = React.createClass({
</div> </div>
</div> </div>
User levels: <h3>User levels</h3>
<div className="mx_RoomSettings_user_levels mx_RoomSettings_settings"> <div className="mx_RoomSettings_user_levels mx_RoomSettings_settings">
{Object.keys(user_levels).map(function(user, i) { {Object.keys(user_levels).map(function(user, i) {
return ( return (
@ -185,7 +185,7 @@ module.exports = React.createClass({
})} })}
</div> </div>
Event levels: <h3>Event levels</h3>
<div className="mx_RoomSettings_event_lvels mx_RoomSettings_settings"> <div className="mx_RoomSettings_event_lvels mx_RoomSettings_settings">
{Object.keys(events_levels).map(function(event_type, i) { {Object.keys(events_levels).map(function(event_type, i) {
return ( return (
@ -197,7 +197,7 @@ module.exports = React.createClass({
})} })}
</div> </div>
Banned users: <h3>Banned users</h3>
<div className="mx_RoomSettings_banned"> <div className="mx_RoomSettings_banned">
{banned.map(function(member, i) { {banned.map(function(member, i) {
return ( return (
@ -207,6 +207,12 @@ module.exports = React.createClass({
); );
})} })}
</div> </div>
<div className="mx_RoomSettings_buttons">
<div className="mx_RoomSettings_button" onClick={this.props.onSaveClick}>
Save this room
</div>
</div>
</div> </div>
); );
} }

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

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