mirror of https://github.com/vector-im/riot-web
encore du lipstick
parent
b685e784f1
commit
4ded74765a
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
}
|
||||
|
|
|
@ -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%;
|
||||
|
|
|
@ -23,7 +23,7 @@ limitations under the License.
|
|||
.mx_MemberList_chevron {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
margin-top: -13px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
|
||||
.mx_MemberList_border {
|
||||
|
|
|
@ -22,4 +22,9 @@ limitations under the License.
|
|||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mx_RoomList h2 {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue