encore du lipstick

pull/1/head
Matthew Hodgson 2015-07-18 00:48:22 +01:00
parent b685e784f1
commit 4ded74765a
19 changed files with 76 additions and 50 deletions

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<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>
<body style="height: 100%;">
<audio id="ringbackAudio" loop>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -38,7 +38,7 @@ module.exports = React.createClass({
var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
return (
<div className="mx_MessageTile">
<div className="mx_MessageTile mx_MessageTile_notice">
<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=""/>
</div>

View File

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

View File

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

View File

@ -34,7 +34,7 @@ module.exports = React.createClass({
render: function() {
// XXX: for now, just cheekily borrow the css from message tile...
return (
<div className="mx_MessageTile">
<div className="mx_MessageTile mx_MessageTile_notice">
<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=""/>
</div>

View File

@ -34,7 +34,7 @@ module.exports = React.createClass({
render: function() {
// XXX: for now, just cheekily borrow the css from message tile...
return (
<div className="mx_MessageTile">
<div className="mx_MessageTile mx_MessageTile_notice">
<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=""/>
</div>

View File

@ -40,7 +40,7 @@ module.exports = React.createClass({
render: function() {
// XXX: for now, just cheekily borrow the css from message tile...
return (
<div className="mx_MessageTile">
<div className="mx_MessageTile mx_MessageTile_notice">
<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=""/>
</div>