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

encore du lipstick

Browse source
This commit is contained in:
Matthew Hodgson 2015-07-18 00:48:22 +01:00
parent b685e784f1
commit 4ded74765a
19 changed files with 76 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
examples/trivial/index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Matrix React SDK Example</title> <title>Matrix React SDK Example</title>
<link href='https://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
</head> </head>
<body style="height: 100%;"> <body style="height: 100%;">
<audio id="ringbackAudio" loop> <audio id="ringbackAudio" loop>

7
skins/base/css/common.css
View file

@ -15,10 +15,9 @@ limitations under the License.
*/ */
body { body {
font-family: 'Muli', Helvetica, Arial, Sans-Serif; font-family: 'Lato', Helvetica, Arial, Sans-Serif;
font-weight: 300; font-size: 16px;
font-size: 15px; color: #454545;
color: #747474;
border: 0px; border: 0px;
margin: 0px; margin: 0px;
} }

3
skins/base/css/molecules/MNoticeTile.css
View file

@ -14,5 +14,6 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_MNoticeTile { .mx_MNoticeTile .mx_MessageTile_content {
opacity: 0.5;
} }

2
skins/base/css/molecules/MessageComposer.css
View file

@ -64,7 +64,7 @@ limitations under the License.
box-shadow: none; box-shadow: none;
/* needed for FF */ /* needed for FF */
font-family: 'Muli', Helvetica, Arial, Sans-Serif; font-family: 'Lato', Helvetica, Arial, Sans-Serif;
font-weight: 300; font-weight: 300;
font-size: 15px; font-size: 15px;
} }

20
skins/base/css/molecules/MessageTile.css
View file

@ -39,22 +39,18 @@ limitations under the License.
margin-top: 8px ! important; margin-top: 8px ! important;
} }
.mx_MessageTile_continuation .mx_MessageTile_avatar,
.mx_MessageTile_continuation .mx_SenderProfile
{
display: none ! important;
}
.mx_MessageTile .mx_SenderProfile { .mx_MessageTile .mx_SenderProfile {
color: #acacac; color: #454545;
font-size: 13px; opacity: 0.5;
font-size: 14px;
margin-bottom: 4px; margin-bottom: 4px;
display: block; display: block;
} }
.mx_MessageTile .mx_MessageTimestamp { .mx_MessageTile .mx_MessageTimestamp {
color: #acacac; color: #454545;
font-size: 13px; opacity: 0.5;
font-size: 14px;
float: right; float: right;
} }
@ -63,6 +59,10 @@ limitations under the License.
display: block; display: block;
} }
.mx_MessageTile_notice {
opacity: 0.5;
}
.mx_MessageTile_sending { .mx_MessageTile_sending {
color: #ddd; color: #ddd;
} }

4
skins/base/css/molecules/RoomDropTarget.css
View file

@ -17,8 +17,8 @@ limitations under the License.
.mx_RoomDropTarget { .mx_RoomDropTarget {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
margin-left: -8px; margin-left: 8px;
margin-right: -8px; margin-right: 8px;
padding-top: 16px; padding-top: 16px;
padding-bottom: 16px; padding-bottom: 16px;
background-color: #fbfbfb; background-color: #fbfbfb;

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

@ -71,7 +71,7 @@ limitations under the License.
height: 28px; height: 28px;
color: #80cef4; color: #80cef4;
font-weight: 400; font-weight: 400;
font-size: 18px; font-size: 20px;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
overflow: scroll; overflow: scroll;
@ -82,7 +82,8 @@ limitations under the License.
vertical-align: bottom; vertical-align: bottom;
float: left; float: left;
max-height: 38px; max-height: 38px;
color: #80cef4; color: #70b5d7;
font-weight: 300;
padding-left: 16px; padding-left: 16px;
padding-right: 16px; padding-right: 16px;
overflow: scroll; overflow: scroll;

28
skins/base/css/molecules/RoomTile.css
View file

@ -17,10 +17,7 @@ limitations under the License.
.mx_RoomTile { .mx_RoomTile {
cursor: pointer; cursor: pointer;
display: table-row; display: table-row;
} color: #818794;
.mx_RoomTile_selected {
text-decoration: underline;
} }
.mx_RoomTile_avatar { .mx_RoomTile_avatar {
@ -28,6 +25,7 @@ limitations under the License.
padding-right: 12px; padding-right: 12px;
padding-top: 3px; padding-top: 3px;
padding-bottom: 3px; padding-bottom: 3px;
padding-left: 16px;
vertical-align: middle; vertical-align: middle;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -38,17 +36,19 @@ limitations under the License.
background-color: #dbdbdb; background-color: #dbdbdb;
} }
.mx_RoomTile_nameBadge {
display: table;
width: 100%;
height: 50px;
}
.mx_RoomTile_name { .mx_RoomTile_name {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-right: 16px;
}
/*
.mx_RoomTile_nameBadge {
display: table;
width: 100%;
height: 50px;
} }
.mx_RoomTile_badgeCell { .mx_RoomTile_badgeCell {
@ -68,8 +68,10 @@ limitations under the License.
height: 26px; height: 26px;
text-align: center; text-align: center;
} }
*/
.mx_RoomTile_unread { .mx_RoomTile_unread {
font-weight: bold;
} }
.mx_RoomTile_highlight { .mx_RoomTile_highlight {
@ -79,5 +81,11 @@ limitations under the License.
font-weight: bold; font-weight: bold;
} }
.mx_RoomTile_selected {
background-color: #f3f8fa;
color: #80cef4;
font-weight: bold;
}
.mx_RoomTile:hover { .mx_RoomTile:hover {
} }

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

@ -39,9 +39,6 @@ limitations under the License.
-webkit-order: 1; -webkit-order: 1;
order: 1; order: 1;
padding-left: 16px;
padding-right: 16px;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
@ -56,12 +53,13 @@ limitations under the License.
-webkit-flex: 0 0 170px; -webkit-flex: 0 0 170px;
flex: 0 0 170px; flex: 0 0 170px;
padding-left: 16px;
padding-right: 16px;
border-top: 1px solid #f3f8fa; border-top: 1px solid #f3f8fa;
} }
.mx_LeftPanel .mx_DirectoryMenu .mx_RoomTile {
color: #378bb4;
}
.mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options { .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
margin-top: 12px; margin-top: 12px;
width: 100%; width: 100%;

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

@ -23,7 +23,7 @@ limitations under the License.
.mx_MemberList_chevron { .mx_MemberList_chevron {
position: absolute; position: absolute;
right: 35px; right: 35px;
margin-top: -13px; margin-top: -15px;
} }
.mx_MemberList_border { .mx_MemberList_border {

5
skins/base/css/organisms/RoomList.css
View file

@ -22,4 +22,9 @@ limitations under the License.
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
}
.mx_RoomList h2 {
padding-left: 16px;
padding-right: 16px;
} }

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

@ -45,7 +45,7 @@ module.exports = React.createClass({
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">
<img src="img/create-big.png" width="42" height="42"/> <img src="img/create-big.png" width="42" height="42"/>
</div> </div>
<div className="mx_RoomTile_name">Create Room</div> <div className="mx_RoomTile_name">Create new room</div>
</div> </div>
<div className="mx_RoomTile"> <div className="mx_RoomTile">
<div className="mx_RoomTile_avatar"> <div className="mx_RoomTile_avatar">

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

@ -20,7 +20,8 @@ var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg"); var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var EventAsTextTileController = require("../../../../src/controllers/molecules/EventAsTextTile"); var EventAsTextTileController = require("../../../../src/controllers/molecules/EventAsTextTile");
var ComponentBroker = require('../../../../src/ComponentBroker');
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
var TextForEvent = require("../../../../src/TextForEvent"); var TextForEvent = require("../../../../src/TextForEvent");
module.exports = React.createClass({ module.exports = React.createClass({
@ -31,7 +32,7 @@ module.exports = React.createClass({
var text = TextForEvent.textForEvent(this.props.mxEvent); var text = TextForEvent.textForEvent(this.props.mxEvent);
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null; var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/> <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
</div> </div>

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

@ -38,7 +38,7 @@ module.exports = React.createClass({
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null; var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/> <img src={ this.props.mxEvent.target ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.target, 40, 40, "crop") : null } width="40" height="40" alt=""/>
</div> </div>

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

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

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

@ -37,6 +37,10 @@ module.exports = React.createClass({
}); });
var name = this.props.room.name.replace(":", ":\u200b"); var name = this.props.room.name.replace(":", ":\u200b");
var badge; var badge;
if (this.props.highlight) {
badge = <img src="/img/badge.png" width="15" height="15" alt=""/>;
}
/*
if (this.props.highlight) { if (this.props.highlight) {
badge = <div className="mx_RoomTile_badge">!</div>; badge = <div className="mx_RoomTile_badge">!</div>;
} }
@ -50,10 +54,11 @@ module.exports = React.createClass({
else { else {
nameCell = <div className="mx_RoomTile_name">{name}</div>; nameCell = <div className="mx_RoomTile_name">{name}</div>;
} }
*/
return ( return (
<div className={classes} onClick={this.onClick}> <div className={classes} onClick={this.onClick}>
<div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/></div> <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40" alt=""/>{ badge }</div>
{ nameCell } <div className="mx_RoomTile_name">{name}</div>
</div> </div>
); );
} }

2
skins/base/views/molecules/voip/MCallAnswerTile.js
View file

@ -34,7 +34,7 @@ module.exports = React.createClass({
render: function() { render: function() {
// XXX: for now, just cheekily borrow the css from message tile... // XXX: for now, just cheekily borrow the css from message tile...
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/> <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
</div> </div>

2
skins/base/views/molecules/voip/MCallHangupTile.js
View file

@ -34,7 +34,7 @@ module.exports = React.createClass({
render: function() { render: function() {
// XXX: for now, just cheekily borrow the css from message tile... // XXX: for now, just cheekily borrow the css from message tile...
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/> <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
</div> </div>

2
skins/base/views/molecules/voip/MCallInviteTile.js
View file

@ -40,7 +40,7 @@ module.exports = React.createClass({
render: function() { render: function() {
// XXX: for now, just cheekily borrow the css from message tile... // XXX: for now, just cheekily borrow the css from message tile...
return ( return (
<div className="mx_MessageTile"> <div className="mx_MessageTile mx_MessageTile_notice">
<div className="mx_MessageTile_avatar"> <div className="mx_MessageTile_avatar">
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/> <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40" alt=""/>
</div> </div>