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

implement latest skin

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

15
skins/base/views/molecules/DirectoryMenu.js
View file

@ -29,19 +29,24 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_DirectoryMenu">
<h2>Directory</h2>
<div className="mx_DirectoryMenu_options">
<div className="mx_RoomTile">
<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 className="mx_RoomTile_name">Users</div>
<div className="mx_RoomTile_name">Create Room</div>
</div>
<div className="mx_RoomTile">
<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 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>

7
skins/base/views/molecules/MessageComposer.js
View file

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

5
skins/base/views/molecules/MessageTile.js
View file

@ -56,12 +56,13 @@ module.exports = React.createClass({
mx_MessageTile_highlight: this.shouldHighlight(),
mx_MessageTile_continuation: this.props.continuation,
});
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return (
<div className={classes}>
<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>
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
{ timestamp }
<SenderProfile mxEvent={this.props.mxEvent} />
<TileType mxEvent={this.props.mxEvent} />
</div>

2
skins/base/views/molecules/RoomCreate.js
View file

@ -32,7 +32,7 @@ module.exports = React.createClass({
<div className="mx_RoomCreate_table">
<div className="mx_RoomTile">
<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 className="mx_RoomTile_name">Create new room</div>
</div>

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

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var RoomHeaderController = require("../../../../src/controllers/molecules/RoomHeader");
module.exports = React.createClass({
@ -25,19 +26,26 @@ module.exports = React.createClass({
mixins: [RoomHeaderController],
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 (
<div className="mx_RoomHeader">
<div className="mx_RoomHeader_wrapper">
<div className="mx_RoomHeader_leftRow">
<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 className="mx_RoomHeader_name">{this.props.room.name}</div>
<div className="mx_RoomHeader_button">
<img src="img/info.png" width="32" height="32"/>
<div className="mx_RoomHeader_info">
<div className="mx_RoomHeader_name">{ this.props.room.name }</div>
{ topic }
</div>
</div>
<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">
<img src="img/search.png" width="32" height="32"/>
</div>

2
skins/base/views/molecules/RoomTile.js
View file

@ -45,7 +45,7 @@ module.exports = React.createClass({
}
return (
<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>
);

1
skins/base/views/organisms/LeftPanel.js
View file

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

10
skins/base/views/organisms/RightPanel.js
View file

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

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

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