diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss
index ccd3afe26c..2014bb6404 100644
--- a/res/css/views/rooms/_RoomTile.scss
+++ b/res/css/views/rooms/_RoomTile.scss
@@ -35,7 +35,20 @@ limitations under the License.
.mx_RoomTile_nameContainer {
display: inline-block;
width: 180px;
- height: 24px;
+ //height: 24px;
+ vertical-align: middle;
+}
+
+.mx_RoomTile_subtext {
+ display: inline-block;
+ font-size: 0.8em;
+ padding: 0 0 0 7px;
+ margin: 0;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: clip;
+ position: relative;
+ bottom: 4px;
}
.mx_RoomTile_avatar_container {
@@ -76,6 +89,10 @@ limitations under the License.
text-overflow: ellipsis;
}
+.mx_RoomTile_hasSubtext .mx_RoomTile_avatar {
+ padding-top: 0;
+}
+
.mx_RoomTile_invite {
/* color: rgba(69, 69, 69, 0.5); */
}
diff --git a/src/components/views/rooms/EntityTile.js b/src/components/views/rooms/EntityTile.js
index 6b3264d123..27215430a1 100644
--- a/src/components/views/rooms/EntityTile.js
+++ b/src/components/views/rooms/EntityTile.js
@@ -70,6 +70,7 @@ const EntityTile = React.createClass({
onClick: PropTypes.func,
suppressOnHover: PropTypes.bool,
showPresence: PropTypes.bool,
+ subtextLabel: PropTypes.string,
},
getDefaultProps: function() {
@@ -125,19 +126,31 @@ const EntityTile = React.createClass({
let nameClasses = 'mx_EntityTile_name';
if (this.props.showPresence) {
presenceLabel = ;
+ currentlyActive={this.props.presenceCurrentlyActive}
+ presenceState={this.props.presenceState}/>;
nameClasses += ' mx_EntityTile_name_hover';
}
+ if (this.props.subtextLabel) {
+ presenceLabel = {this.props.subtextLabel};
+ }
nameEl = (
-
+
- { name }
+ {name}
{presenceLabel}
);
+ } else if (this.props.subtextLabel) {
+ nameEl = (
+
+
+ {name}
+
+ {this.props.subtextLabel}
+
+ );
} else {
nameEl = (
{ name }
diff --git a/src/components/views/rooms/MemberTile.js b/src/components/views/rooms/MemberTile.js
index 2359bc242c..d246b37234 100644
--- a/src/components/views/rooms/MemberTile.js
+++ b/src/components/views/rooms/MemberTile.js
@@ -84,6 +84,7 @@ module.exports = React.createClass({
const name = this._getDisplayName();
const active = -1;
const presenceState = member.user ? member.user.presence : null;
+ const statusMessage = member.user ? member.user.statusMessage : null;
const av = (
@@ -106,7 +107,9 @@ module.exports = React.createClass({
presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
- name={name} powerStatus={powerStatus} showPresence={this.props.showPresence} />
+ name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+ subtextLabel={statusMessage}
+ />
);
},
});
diff --git a/src/components/views/rooms/RoomTile.js b/src/components/views/rooms/RoomTile.js
index 54044e8d65..2c48862ee9 100644
--- a/src/components/views/rooms/RoomTile.js
+++ b/src/components/views/rooms/RoomTile.js
@@ -251,6 +251,17 @@ module.exports = React.createClass({
const mentionBadges = this.props.highlight && this._shouldShowMentionBadge();
const badges = notifBadges || mentionBadges;
+ const isJoined = this.props.room.getMyMembership() === "join";
+ const looksLikeDm = this.props.room.currentState.getMembers().length === 2;
+ let subtext = null;
+ if (!isInvite && isJoined && looksLikeDm) {
+ const selfId = MatrixClientPeg.get().getUserId();
+ const otherMember = this.props.room.currentState.getMembersExcept([selfId])[0];
+ if (otherMember.user && otherMember.user.statusMessage) {
+ subtext = otherMember.user.statusMessage;
+ }
+ }
+
const classes = classNames({
'mx_RoomTile': true,
'mx_RoomTile_selected': this.state.selected,
@@ -261,6 +272,7 @@ module.exports = React.createClass({
'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
'mx_RoomTile_noBadges': !badges,
'mx_RoomTile_transparent': this.props.transparent,
+ 'mx_RoomTile_hasSubtext': !!subtext && !this.props.isCollapsed,
});
const avatarClasses = classNames({
@@ -291,6 +303,7 @@ module.exports = React.createClass({
const EmojiText = sdk.getComponent('elements.EmojiText');
let label;
+ let subtextLabel;
let tooltip;
if (!this.props.collapsed) {
const nameClasses = classNames({
@@ -299,6 +312,8 @@ module.exports = React.createClass({
'mx_RoomTile_badgeShown': badges || this.state.badgeHover || this.state.menuDisplayed,
});
+ subtextLabel = subtext ? { subtext } : null;
+
if (this.state.selected) {
const nameSelected = { name };
@@ -339,6 +354,7 @@ module.exports = React.createClass({
{ label }
+ { subtextLabel }
{ badge }
{ /* { incomingCallBox } */ }