implement latest skin

This commit is contained in:
Matthew Hodgson 2015-07-15 04:16:38 +01:00
parent c0bd574997
commit 9b384e52b5
27 changed files with 172 additions and 71 deletions

View file

@ -30,7 +30,7 @@ limitations under the License.
} }
.mx_MemberTile_avatar img { .mx_MemberTile_avatar img {
border-radius: 16px; border-radius: 20px;
background-color: #dbdbdb; background-color: #dbdbdb;
} }

View file

@ -19,9 +19,9 @@ limitations under the License.
height: 50px; height: 50px;
vertical-align: middle; vertical-align: middle;
margin: auto; margin: auto;
border-top: 1px solid #d8d8d8; background-color: #fff;
border-left: 1px solid #d8d8d8; border-radius: 25px;
border-right: 1px solid #d8d8d8; border: 1px solid #e1e1e1;
} }
.mx_MessageComposer_row { .mx_MessageComposer_row {
@ -32,32 +32,44 @@ limitations under the License.
.mx_MessageComposer .mx_MessageComposer_avatar { .mx_MessageComposer .mx_MessageComposer_avatar {
display: table-cell; display: table-cell;
padding-left: 12px; padding-left: 5px;
padding-right: 12px; padding-right: 10px;
padding-top: 3px; height: 50px;
padding-bottom: 3px; }
vertical-align: middle;
width: 32px; .mx_MessageComposer .mx_MessageComposer_avatar img {
height: 32px; margin-top: 5px;
border-radius: 20px;
background-color: #bdbdbd;
} }
.mx_MessageComposer_input { .mx_MessageComposer_input {
display: table-cell; display: table-cell;
width: 100%; width: 100%;
padding-right: 1em;
vertical-align: middle; vertical-align: middle;
height: 50px;
} }
.mx_MessageComposer_input textarea { .mx_MessageComposer_input textarea {
font-size: 15px; font-size: 15px;
width: 100%; width: 100%;
height: 1em; height: 1em;
padding-top: 0.7em;
padding-bottom: 0.7em;
border: 0px; border: 0px;
resize: none; resize: none;
outline: none; outline: none;
padding-top: 0.7em;
padding-bottom: 0.7em;
-webkit-box-shadow: none; -webkit-box-shadow: none;
-moz-box-shadow: none; -moz-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.mx_MessageComposer_upload {
display: table-cell;
vertical-align: middle;
padding-right: 15px;
}
.mx_MessageComposer_upload img {
margin-top: 5px;
}

View file

@ -31,7 +31,7 @@ limitations under the License.
.mx_MessageTile_avatar img { .mx_MessageTile_avatar img {
background-color: #dbdbdb; background-color: #dbdbdb;
border-radius: 16px; border-radius: 20px;
border: 0px; border: 0px;
} }

View file

@ -20,42 +20,85 @@ limitations under the License.
.mx_RoomHeader_wrapper { .mx_RoomHeader_wrapper {
max-width: 720px; max-width: 720px;
margin: auto; margin: auto;
height: 50px; height: 86px;
margin-top: 18px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
} }
.mx_RoomHeader_leftRow { .mx_RoomHeader_leftRow {
display: table-row; display: table-row;
margin-left: 12px; margin-left: 12px;
height: 50px; height: 48px;
float: left;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
} }
.mx_RoomHeader_rightRow { .mx_RoomHeader_rightRow {
display: table-row; display: table-row;
height: 50px; height: 48px;
margin-right: -26px; background-color: #fff;
float: right; border-radius: 48px;
border: 1px solid #e1e1e1;
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
-webkit-flex: 0 0 200px;
flex: 0 0 200px;
}
.mx_RoomHeader_info {
display: table-cell;
height: 48px;
vertical-align: middle;
} }
.mx_RoomHeader_name { .mx_RoomHeader_name {
display: table-cell;
vertical-align: middle; vertical-align: middle;
height: 50px; height: 28px;
color: #80cef4;
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 18px;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
.mx_RoomHeader_topic {
vertical-align: bottom;
float: left;
max-height: 38px;
color: #80cef4;
padding-left: 16px;
padding-right: 16px;
overflow: scroll;
}
.mx_RoomHeader_avatar { .mx_RoomHeader_avatar {
display: table-cell; display: table-cell;
height: 50px; height: 50px;
vertical-align: middle; vertical-align: middle;
} }
.mx_RoomHeader_avatar img {
border-radius: 24px;
}
.mx_RoomHeader_button { .mx_RoomHeader_button {
height: 50px; height: 48px;
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
padding-right: 16px; padding-left: 8px;
padding-right: 8px;
} }

View file

@ -34,7 +34,7 @@ limitations under the License.
} }
.mx_RoomTile_avatar img { .mx_RoomTile_avatar img {
border-radius: 16px; border-radius: 20px;
background-color: #dbdbdb; background-color: #dbdbdb;
} }
@ -47,15 +47,14 @@ limitations under the License.
.mx_RoomTile_badge { .mx_RoomTile_badge {
float: right; float: right;
background-color: #d8d8d8; background-color: #80cef4;
color: #747474; color: #fff;
border-radius: 10px; border-radius: 10px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 28px;
width: 34px; width: 26px;
height: 20px; height: 26px;
vertical-align: top;
text-align: center; text-align: center;
} }

View file

@ -49,6 +49,7 @@ limitations under the License.
overflow-y: scroll; overflow-y: scroll;
} }
/*
.mx_LeftPanel .mx_RoomCreate { .mx_LeftPanel .mx_RoomCreate {
-webkit-box-ordinal-group: 2; -webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2; -moz-box-ordinal-group: 2;
@ -69,6 +70,7 @@ limitations under the License.
width: 100%; width: 100%;
height: 46px; height: 46px;
} }
*/
.mx_LeftPanel .mx_DirectoryMenu { .mx_LeftPanel .mx_DirectoryMenu {
-webkit-box-ordinal-group: 3; -webkit-box-ordinal-group: 3;
@ -77,12 +79,14 @@ limitations under the License.
-webkit-order: 3; -webkit-order: 3;
order: 3; order: 3;
min-height: 150px; -webkit-flex: 0 0 170px;
flex: 0 0 170px;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
} }
.mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options { .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
margin-top: -12px; margin-top: 12px;
width: 100%; width: 100%;
} }

View file

@ -22,7 +22,7 @@ limitations under the License.
.mx_MemberList_chevron { .mx_MemberList_chevron {
position: absolute; position: absolute;
right: 20px; right: 35px;
margin-top: -13px; margin-top: -13px;
} }
@ -33,6 +33,7 @@ limitations under the License.
max-height: 75%; max-height: 75%;
border-radius: 8px; border-radius: 8px;
padding: 20px 14px 14px 24px; padding: 20px 14px 14px 24px;
background-color: #fff;
} }
.mx_MemberList_wrapper { .mx_MemberList_wrapper {

View file

@ -33,18 +33,28 @@ limitations under the License.
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 0 0 50px; -webkit-flex: 0 0 66px;
flex: 0 0 50px; flex: 0 0 66px;
}
text-align: right; /** Fixme - factor this out with the main header **/
height: 50px; .mx_RightPanel_headerButtonGroup {
border-bottom: 1px solid #d8d8d8; margin-top: 18px;
height: 48px;
float: right;
background-color: #fff;
border-radius: 48px;
border: 1px solid #e1e1e1;
margin-right: 22px;
} }
.mx_RightPanel_headerButton { .mx_RightPanel_headerButton {
margin-top: 9px; height: 48px;
margin-right: 16px; display: table-cell;
vertical-align: middle;
padding-left: 8px;
padding-right: 8px;
} }
.mx_RightPanel .mx_MemberList { .mx_RightPanel .mx_MemberList {

View file

@ -35,9 +35,8 @@ limitations under the License.
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
-webkit-flex: 0 0 50px; -webkit-flex: 0 0 86px;
flex: 0 0 50px; flex: 0 0 86px;
border-bottom: 1px solid #d8d8d8;
} }
.mx_RoomView_auxPanel { .mx_RoomView_auxPanel {
@ -47,7 +46,10 @@ limitations under the License.
-webkit-order: 2; -webkit-order: 2;
order: 2; order: 2;
max-width: 720px;
width: 100%; width: 100%;
margin: auto;
border-top: 1px solid #a8dbf3;
height: 0%; height: 0%;
} }
@ -86,7 +88,7 @@ limitations under the License.
order: 4; order: 4;
width: 100%; width: 100%;
-webkit-flex: 0 0 50px; -webkit-flex: 0 0 63px;
flex: 0 0 50px; flex: 0 0 63px;
/* background-color: #ff0; */ margin-left: 3px;
} }

View file

@ -45,7 +45,7 @@ limitations under the License.
-webkit-order: 2; -webkit-order: 2;
order: 2; order: 2;
/* background-color: #00f; */ background-color: #f3f8fa;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
@ -57,6 +57,7 @@ limitations under the License.
-webkit-order: 3; -webkit-order: 3;
order: 3; order: 3;
background-color: #f3f8fa;
-webkit-flex: 0 0 230px; -webkit-flex: 0 0 230px;
flex: 0 0 230px; flex: 0 0 230px;
height: 100%; height: 100%;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 441 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 415 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 910 B

After

Width:  |  Height:  |  Size: 998 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 651 B

After

Width:  |  Height:  |  Size: 694 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 624 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 541 B

After

Width:  |  Height:  |  Size: 636 B

View file

@ -29,19 +29,24 @@ module.exports = React.createClass({
render: function() { render: function() {
return ( return (
<div className="mx_DirectoryMenu"> <div className="mx_DirectoryMenu">
<h2>Directory</h2>
<div className="mx_DirectoryMenu_options"> <div className="mx_DirectoryMenu_options">
<div className="mx_RoomTile"> <div className="mx_RoomTile">
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
<img src="img/placeholder.png" width="32" height="32" alt="(+)"/> <img src="img/create-big.png" width="42" height="42"/>
</div> </div>
<div className="mx_RoomTile_name">Users</div> <div className="mx_RoomTile_name">Create Room</div>
</div> </div>
<div className="mx_RoomTile"> <div className="mx_RoomTile">
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
<img src="img/placeholder.png" width="32" height="32" alt="(+)"/> <img src="img/directory-big.png" width="42" height="42"/>
</div> </div>
<div className="mx_RoomTile_name">Rooms</div> <div className="mx_RoomTile_name">Directory</div>
</div>
<div className="mx_RoomTile">
<div className="mx_RoomTile_avatar">
<img src="img/settings-big.png" width="42" height="42"/>
</div>
<div className="mx_RoomTile_name">Settings</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react'); var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer"); var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer");
module.exports = React.createClass({ module.exports = React.createClass({
@ -25,16 +26,20 @@ module.exports = React.createClass({
mixins: [MessageComposerController], mixins: [MessageComposerController],
render: function() { render: function() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
return ( return (
<div className="mx_MessageComposer"> <div className="mx_MessageComposer">
<div className="mx_MessageComposer_wrapper"> <div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row"> <div className="mx_MessageComposer_row">
<div className="mx_MessageComposer_avatar"> <div className="mx_MessageComposer_avatar">
<img src="img/placeholder.png" width="32" height="32" alt="(+)"/> <img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40"/>
</div> </div>
<div className="mx_MessageComposer_input"> <div className="mx_MessageComposer_input">
<textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" /> <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
</div> </div>
<div className="mx_MessageComposer_upload">
<img src="img/upload.png" width="32" height="32"/>
</div>
</div> </div>
</div> </div>
</div> </div>

View file

@ -56,12 +56,13 @@ module.exports = React.createClass({
mx_MessageTile_highlight: this.shouldHighlight(), mx_MessageTile_highlight: this.shouldHighlight(),
mx_MessageTile_continuation: this.props.continuation, mx_MessageTile_continuation: this.props.continuation,
}); });
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return ( return (
<div className={classes}> <div className={classes}>
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 32, 32, "crop") : null } width="32" height="32"/> <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
</div> </div>
<MessageTimestamp ts={this.props.mxEvent.getTs()} /> { timestamp }
<SenderProfile mxEvent={this.props.mxEvent} /> <SenderProfile mxEvent={this.props.mxEvent} />
<TileType mxEvent={this.props.mxEvent} /> <TileType mxEvent={this.props.mxEvent} />
</div> </div>

View file

@ -32,7 +32,7 @@ module.exports = React.createClass({
<div className="mx_RoomCreate_table"> <div className="mx_RoomCreate_table">
<div className="mx_RoomTile"> <div className="mx_RoomTile">
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
<img src="img/create.png" width="32" height="32" alt="(+)"/> <img src="img/create.png" width="32" height="32"/>
</div> </div>
<div className="mx_RoomTile_name">Create new room</div> <div className="mx_RoomTile_name">Create new room</div>
</div> </div>

View file

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react'); var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var RoomHeaderController = require("../../../../src/controllers/molecules/RoomHeader"); var RoomHeaderController = require("../../../../src/controllers/molecules/RoomHeader");
module.exports = React.createClass({ module.exports = React.createClass({
@ -25,19 +26,26 @@ module.exports = React.createClass({
mixins: [RoomHeaderController], mixins: [RoomHeaderController],
render: function() { render: function() {
var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
topic = topic ? <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div> : null;
return ( return (
<div className="mx_RoomHeader"> <div className="mx_RoomHeader">
<div className="mx_RoomHeader_wrapper"> <div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow"> <div className="mx_RoomHeader_leftRow">
<div className="mx_RoomHeader_avatar"> <div className="mx_RoomHeader_avatar">
<img src="img/placeholder.png" width="32" height="32" alt="(+)"/> <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48"/>
</div> </div>
<div className="mx_RoomHeader_name">{this.props.room.name}</div> <div className="mx_RoomHeader_info">
<div className="mx_RoomHeader_button"> <div className="mx_RoomHeader_name">{ this.props.room.name }</div>
<img src="img/info.png" width="32" height="32"/> { topic }
</div> </div>
</div> </div>
<div className="mx_RoomHeader_rightRow"> <div className="mx_RoomHeader_rightRow">
<div className="mx_RoomHeader_button">
<img src="img/settings.png" width="32" height="32"/>
</div>
<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"/>
</div> </div>

View file

@ -45,7 +45,7 @@ module.exports = React.createClass({
} }
return ( return (
<div className={classes} onClick={this.onClick}> <div className={classes} onClick={this.onClick}>
<div className="mx_RoomTile_avatar"><img src="img/placeholder.png" width="32" height="32" alt="()"/></div> <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
<div className="mx_RoomTile_name">{name}{ badge }</div> <div className="mx_RoomTile_name">{name}{ badge }</div>
</div> </div>
); );

View file

@ -31,7 +31,6 @@ module.exports = React.createClass({
<div className="mx_LeftPanel"> <div className="mx_LeftPanel">
<img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/> <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
<RoomList selectedRoom={this.props.currentRoom} /> <RoomList selectedRoom={this.props.currentRoom} />
<RoomCreate/>
<DirectoryMenu /> <DirectoryMenu />
</div> </div>
); );

View file

@ -28,8 +28,14 @@ module.exports = React.createClass({
return ( return (
<div className="mx_RightPanel"> <div className="mx_RightPanel">
<div className="mx_RightPanel_header"> <div className="mx_RightPanel_header">
<img className="mx_RightPanel_headerButton" src="img/file.png" width="32" height="32" alt="Files"/> <div className="mx_RightPanel_headerButtonGroup">
<img className="mx_RightPanel_headerButton" src="img/members.png" width="32" height="32" alt="Members"/> <div className="mx_RightPanel_headerButton">
<img src="img/file.png" width="32" height="32" alt="Files"/>
</div>
<div className="mx_RightPanel_headerButton">
<img src="img/members.png" width="32" height="32" alt="Members"/>
</div>
</div>
</div> </div>
<MemberList roomId={this.props.roomId} key={this.props.roomId} /> <MemberList roomId={this.props.roomId} key={this.props.roomId} />
</div> </div>

View file

@ -67,6 +67,7 @@ module.exports = React.createClass({
return ( return (
<div className="mx_RoomView"> <div className="mx_RoomView">
<RoomHeader room={this.state.room} /> <RoomHeader room={this.state.room} />
<div className="mx_RoomView_auxPanel"></div>
<div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}> <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}>
<div className="mx_RoomView_messageListWrapper"> <div className="mx_RoomView_messageListWrapper">
<div className="mx_RoomView_MessageList" aria-live="polite"> <div className="mx_RoomView_MessageList" aria-live="polite">
@ -76,7 +77,7 @@ module.exports = React.createClass({
</div> </div>
</div> </div>
</div> </div>
<MessageComposer roomId={this.props.roomId} /> <MessageComposer room={this.state.room} />
</div> </div>
); );
} }

View file

@ -54,7 +54,7 @@ module.exports = {
}; };
} }
MatrixClientPeg.get().sendMessage(this.props.roomId, content).then(function() { MatrixClientPeg.get().sendMessage(this.props.room.roomId, content).then(function() {
dis.dispatch({ dis.dispatch({
action: 'message_sent' action: 'message_sent'
}); });

View file

@ -227,6 +227,10 @@ module.exports = {
var mxEv = this.state.room.timeline[i]; var mxEv = this.state.room.timeline[i];
var TileType = tileTypes[mxEv.getType()]; var TileType = tileTypes[mxEv.getType()];
var continuation = false; var continuation = false;
var last = false;
if (i == this.state.room.timeline.length - 1) {
last = true;
}
if (i > 0 && if (i > 0 &&
count < this.state.messageCap - 1 && count < this.state.messageCap - 1 &&
this.state.room.timeline[i].sender && this.state.room.timeline[i].sender &&
@ -238,7 +242,7 @@ module.exports = {
} }
if (!TileType) continue; if (!TileType) continue;
ret.unshift( ret.unshift(
<TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation}/> <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
); );
++count; ++count;
} }