Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
skins/base/css/molecules/MemberTile.css
View File

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

38
skins/base/css/molecules/MessageComposer.css
View File

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

2
skins/base/css/molecules/MessageTile.css
View File

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

65
skins/base/css/molecules/RoomHeader.css
View File

@ -20,42 +20,85 @@ limitations under the License.
.mx_RoomHeader_wrapper {
max-width: 720px;
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 {
display: table-row;
margin-left: 12px;
height: 50px;
float: left;
height: 48px;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
.mx_RoomHeader_rightRow {
display: table-row;
height: 50px;
margin-right: -26px;
float: right;
height: 48px;
background-color: #fff;
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 {
display: table-cell;
vertical-align: middle;
height: 50px;
height: 28px;
color: #80cef4;
font-weight: 400;
font-size: 20px;
font-size: 18px;
padding-left: 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 {
display: table-cell;
height: 50px;
vertical-align: middle;
}
.mx_RoomHeader_avatar img {
border-radius: 24px;
}
.mx_RoomHeader_button {
height: 50px;
height: 48px;
display: table-cell;
vertical-align: middle;
padding-right: 16px;
padding-left: 8px;
padding-right: 8px;
}

13
skins/base/css/molecules/RoomTile.css
View File

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

8
skins/base/css/organisms/LeftPanel.css
View File

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

3
skins/base/css/organisms/MemberList.css
View File

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

24
skins/base/css/organisms/RightPanel.css
View File

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

14
skins/base/css/organisms/RoomView.css
View File

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

3
skins/base/css/pages/MatrixChat.css
View File

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

BIN
skins/base/img/file.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 308 B

After

Width:  |  Height:  |  Size: 441 B

BIN
skins/base/img/hide.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 415 B

BIN
skins/base/img/members.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 910 B

After

Width:  |  Height:  |  Size: 998 B

BIN
skins/base/img/search.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 651 B

After

Width:  |  Height:  |  Size: 694 B

BIN
skins/base/img/video.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 624 B

BIN
skins/base/img/voip.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 541 B

After

Width:  |  Height:  |  Size: 636 B

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>
);
}

2
src/controllers/molecules/MessageComposer.js
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({
action: 'message_sent'
});

6
src/controllers/organisms/RoomView.js
View File

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