From a3082753ef39afa42be4f3b7d963a3e9cd8c7731 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 9 Nov 2015 02:12:26 +0000
Subject: [PATCH] shove initials onto default room & member avatars as per the
design
---
src/skins/vector/css/atoms/MemberAvatar.css | 5 +++
src/skins/vector/css/atoms/RoomAvatar.css | 24 ++++++++++++++
src/skins/vector/views/atoms/MemberAvatar.js | 19 +++++++++++
src/skins/vector/views/atoms/RoomAvatar.js | 34 ++++++++++++++++----
4 files changed, 75 insertions(+), 7 deletions(-)
create mode 100644 src/skins/vector/css/atoms/RoomAvatar.css
diff --git a/src/skins/vector/css/atoms/MemberAvatar.css b/src/skins/vector/css/atoms/MemberAvatar.css
index fc5fd60d..616882fd 100644
--- a/src/skins/vector/css/atoms/MemberAvatar.css
+++ b/src/skins/vector/css/atoms/MemberAvatar.css
@@ -19,3 +19,8 @@ limitations under the License.
border-radius: 20px;
}
+.mx_MemberAvatar_initial {
+ position: absolute;
+ color: #fff;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/skins/vector/css/atoms/RoomAvatar.css b/src/skins/vector/css/atoms/RoomAvatar.css
new file mode 100644
index 00000000..40d9064b
--- /dev/null
+++ b/src/skins/vector/css/atoms/RoomAvatar.css
@@ -0,0 +1,24 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_RoomAvatar {
+}
+
+.mx_RoomAvatar_initial {
+ position: absolute;
+ color: #fff;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/skins/vector/views/atoms/MemberAvatar.js b/src/skins/vector/views/atoms/MemberAvatar.js
index 69652e1a..088e7de2 100644
--- a/src/skins/vector/views/atoms/MemberAvatar.js
+++ b/src/skins/vector/views/atoms/MemberAvatar.js
@@ -40,6 +40,25 @@ module.exports = React.createClass({
},
render: function() {
+ // XXX: recalculates default avatar url constantly
+ if (this.state.imageUrl === this.defaultAvatarUrl(this.props.member)) {
+ var initial;
+ if (this.props.member.name[0])
+ initial = this.props.member.name[0].toUpperCase();
+ if (initial === '@' && this.props.member.name[1])
+ initial = this.props.member.name[1].toUpperCase();
+
+ return (
+ <span>
+ <span className="mx_MemberAvatar_initial"
+ style={{ fontSize: (this.props.width * 0.75) + "px",
+ width: this.props.width + "px",
+ lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+ <img className="mx_MemberAvatar" src={this.state.imageUrl}
+ onError={this.onError} width={this.props.width} height={this.props.height} />
+ </span>
+ );
+ }
return (
<img className="mx_MemberAvatar" src={this.state.imageUrl}
onError={this.onError}
diff --git a/src/skins/vector/views/atoms/RoomAvatar.js b/src/skins/vector/views/atoms/RoomAvatar.js
index a1d87f7f..1cad4c21 100644
--- a/src/skins/vector/views/atoms/RoomAvatar.js
+++ b/src/skins/vector/views/atoms/RoomAvatar.js
@@ -43,13 +43,33 @@ module.exports = React.createClass({
render: function() {
var style = {
- maxWidth: this.props.width,
- maxHeight: this.props.height,
+ width: this.props.width,
+ height: this.props.height,
};
- return (
- <img className="mx_RoomAvatar" src={this.state.imageUrl} onError={this.onError}
- style={style}
- />
- );
+
+ // XXX: recalculates fallback avatar constantly
+ if (this.state.imageUrl === this.getFallbackAvatar()) {
+ var initial;
+ if (this.props.room.name[0])
+ initial = this.props.room.name[0].toUpperCase();
+ if (initial === '@' && this.props.room.name[1])
+ initial = this.props.room.name[1].toUpperCase();
+
+ return (
+ <span>
+ <span className="mx_RoomAvatar_initial"
+ style={{ fontSize: (this.props.width * 0.75) + "px",
+ width: this.props.width + "px",
+ lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
+ <img className="mx_RoomAvatar" src={this.state.imageUrl}
+ onError={this.onError} style={style} />
+ </span>
+ );
+ }
+ else {
+ return <img className="mx_RoomAvatar" src={this.state.imageUrl}
+ onError={this.onError} style={style} />
+ }
+
}
});