badges and broken avatars

This commit is contained in:
Matthew Hodgson 2015-07-14 02:13:00 +01:00
parent 341fe868e4
commit 6b0167375c
7 changed files with 39 additions and 6 deletions

View File

@ -29,6 +29,11 @@ limitations under the License.
height: 32px;
}
.mx_MemberTile_avatar img {
border-radius: 16px;
background-color: #dbdbdb;
}
.mx_MemberTile_name {
display: table-cell;
vertical-align: middle;

View File

@ -29,6 +29,12 @@ limitations under the License.
float: left;
}
.mx_MessageTile_avatar img {
background-color: #dbdbdb;
border-radius: 16px;
border: 0px;
}
.mx_MessageTile_continuation {
margin-top: 8px ! important;
}

View File

@ -31,6 +31,7 @@ limitations under the License.
vertical-align: middle;
width: 32px;
height: 32px;
border-radius: 16px;
}
.mx_RoomTile_name {
@ -40,12 +41,24 @@ limitations under the License.
text-overflow: ellipsis;
}
.mx_RoomTile_badge {
float: right;
background-color: #d8d8d8;
color: #747474;
border-radius: 10px;
font-weight: 400;
font-size: 14px;
line-height: 22px;
width: 34px;
height: 20px;
vertical-align: top;
text-align: center;
}
.mx_RoomTile_unread {
font-weight: bold;
}
.mx_RoomTile_highlight {
background-color: lime;
}
.mx_RoomTile_invited {

View File

@ -18,6 +18,7 @@ limitations under the License.
var React = require('react');
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var MemberTileController = require("../../../../src/controllers/molecules/MemberTile");
module.exports = React.createClass({
@ -26,7 +27,7 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_MemberTile">
<div className="mx_MemberTile_avatar"><img src="img/placeholder.png" width="32" height="32" alt="()"/></div>
<div className="mx_MemberTile_avatar"><img src={ this.props.member ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.member, 32, 32, "crop") : null } width="32" height="32"/></div>
<div className="mx_MemberTile_name">{this.props.member.name}</div>
</div>
);

View File

@ -20,6 +20,7 @@ var React = require('react');
var classNames = require("classnames");
var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
var ComponentBroker = require('../../../../src/ComponentBroker');
var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
@ -58,7 +59,7 @@ module.exports = React.createClass({
return (
<div className={classes}>
<div className="mx_MessageTile_avatar">
<img src="img/placeholder.png" width="32" height="32"/>
<img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 32, 32, "crop") : null } width="32" height="32"/>
</div>
<MessageTimestamp ts={this.props.mxEvent.getTs()} />
<SenderProfile mxEvent={this.props.mxEvent} />

View File

@ -35,10 +35,18 @@ module.exports = React.createClass({
'mx_RoomTile_highlight': this.props.highlight,
'mx_RoomTile_invited': this.props.room.currentState.members[myUserId].membership == 'invite'
});
var name = this.props.room.name.replace(":", ":\u200b");
var badge;
if (this.props.highlight) {
badge = <div className="mx_RoomTile_badge">!</div>;
}
else if (this.props.unread) {
badge = <div className="mx_RoomTile_badge">1</div>;
}
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_name">{this.props.room.name}</div>
<div className="mx_RoomTile_name">{name}{ badge }</div>
</div>
);
}

View File

@ -234,7 +234,6 @@ module.exports = {
this.state.room.timeline[i].sender.userId ===
this.state.room.timeline[i - 1].sender.userId)
{
console.log("i=" + i + ", continuation=true");
continuation = true;
}
if (!TileType) continue;