From 6b0167375c779b76c168046463fb93734291beec Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 14 Jul 2015 02:13:00 +0100
Subject: [PATCH] badges and broken avatars

---
 skins/base/css/molecules/MemberTile.css   |  5 +++++
 skins/base/css/molecules/MessageTile.css  |  6 ++++++
 skins/base/css/molecules/RoomTile.css     | 17 +++++++++++++++--
 skins/base/views/molecules/MemberTile.js  |  3 ++-
 skins/base/views/molecules/MessageTile.js |  3 ++-
 skins/base/views/molecules/RoomTile.js    | 10 +++++++++-
 src/controllers/organisms/RoomView.js     |  1 -
 7 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css
index a01947e3f0..efe59984c6 100644
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@@ -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;
diff --git a/skins/base/css/molecules/MessageTile.css b/skins/base/css/molecules/MessageTile.css
index 244c8b7367..6fccd49315 100644
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@@ -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;
 }
diff --git a/skins/base/css/molecules/RoomTile.css b/skins/base/css/molecules/RoomTile.css
index b3f4018cda..b700775601 100644
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@@ -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 {
diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js
index 7ed4eadc20..d1d731092c 100644
--- a/skins/base/views/molecules/MemberTile.js
+++ b/skins/base/views/molecules/MemberTile.js
@@ -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>
         );
diff --git a/skins/base/views/molecules/MessageTile.js b/skins/base/views/molecules/MessageTile.js
index c6d8b62be7..6f13f28598 100644
--- a/skins/base/views/molecules/MessageTile.js
+++ b/skins/base/views/molecules/MessageTile.js
@@ -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} />
diff --git a/skins/base/views/molecules/RoomTile.js b/skins/base/views/molecules/RoomTile.js
index f4b596cbc0..e34f92214a 100644
--- a/skins/base/views/molecules/RoomTile.js
+++ b/skins/base/views/molecules/RoomTile.js
@@ -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>
         );
     }
diff --git a/src/controllers/organisms/RoomView.js b/src/controllers/organisms/RoomView.js
index 33d50df8bf..df3675b5ec 100644
--- a/src/controllers/organisms/RoomView.js
+++ b/src/controllers/organisms/RoomView.js
@@ -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;