From 6b0167375c779b76c168046463fb93734291beec Mon Sep 17 00:00:00 2001 From: Matthew Hodgson 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 (
-
()
+
{this.props.member.name}
); 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 (
- +
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 =
!
; + } + else if (this.props.unread) { + badge =
1
; + } return (
()
-
{this.props.room.name}
+
{name}{ badge }
); } 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;