diff --git a/skins/base/css/molecules/MemberTile.css b/skins/base/css/molecules/MemberTile.css index f296668f..bd622018 100644 --- a/skins/base/css/molecules/MemberTile.css +++ b/skins/base/css/molecules/MemberTile.css @@ -68,6 +68,17 @@ limitations under the License. text-overflow: ellipsis; } +.mx_MemberTile_hover { + background-color: #f0f0f0; + font-size: 12px; + color: #747474; +} + +.mx_MemberTile_userId { + font-weight: bold; +} + +/* .mx_MemberTile_nameWrapper { display: table-cell; vertical-align: middle; @@ -77,19 +88,20 @@ limitations under the License. .mx_MemberTile_nameSpan { } +*/ .mx_MemberTile_unavailable .mx_MemberTile_avatar, .mx_MemberTile_unavailable .mx_MemberTile_name, .mx_MemberTile_unavailable .mx_MemberTile_nameSpan { - opacity: 0.75; + opacity: 0.66; } .mx_MemberTile_offline .mx_MemberTile_avatar, .mx_MemberTile_offline .mx_MemberTile_name, .mx_MemberTile_offline .mx_MemberTile_nameSpan { - opacity: 0.5; + opacity: 0.25; } .mx_MemberTile_zalgo { diff --git a/skins/base/img/delete.png b/skins/base/img/delete.png new file mode 100644 index 00000000..8ff20a11 Binary files /dev/null and b/skins/base/img/delete.png differ diff --git a/skins/base/views/molecules/MemberTile.js b/skins/base/views/molecules/MemberTile.js index bd184051..244a9b6f 100644 --- a/skins/base/views/molecules/MemberTile.js +++ b/skins/base/views/molecules/MemberTile.js @@ -47,6 +47,33 @@ module.exports = React.createClass({ this.setState({ 'hover': false }); }, + getDuration: function(time) { + if (!time) return; + var t = parseInt(time / 1000); + var s = t % 60; + var m = parseInt(t / 60) % 60; + var h = parseInt(t / (60 * 60)) % 24; + var d = parseInt(t / (60 * 60 * 24)); + if (t < 60) { + if (t < 0) { + return "0s"; + } + return s + "s"; + } + if (t < 60 * 60) { + return m + "m"; + } + if (t < 24 * 60 * 60) { + return h + "h"; + } + return d + "d "; + }, + + getPrettyPresence: function(user) { + var presence = user.presence; + return presence.charAt(0).toUpperCase() + presence.slice(1); + }, + render: function() { var isMyUser = MatrixClientPeg.get().credentials.userId == this.props.member.userId; @@ -66,30 +93,43 @@ module.exports = React.createClass({ } } mainClassName += presenceClass; + if (this.state.hover) { + mainClassName += " mx_MemberTile_hover"; + } var name = this.props.member.name; if (isMyUser) name += " (me)"; - var leave = isMyUser ? <span className="mx_MemberTile_leave" onClick={this.onLeaveClick}>X</span> : null; + var leave = isMyUser ? <img className="mx_MemberTile_leave" src="img/delete.png" width="10" height="10" onClick={this.onLeaveClick}/> : null; - var nameClass = this.state.hover ? "mx_MemberTile_nameSpan" : "mx_MemberTile_name"; + var nameClass = "mx_MemberTile_name"; if (zalgo.test(name)) { nameClass += " mx_MemberTile_zalgo"; } var nameEl; if (this.state.hover) { + var presence; + // FIXME: make presence data update whenever User.presence changes... + var active = this.props.member.user.lastActiveAgo || -1; + if (active >= 0) { + presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) } for { this.getDuration(active) }</div>; + } + else { + presence = <div className="mx_MemberTile_presence">{ this.getPrettyPresence(this.props.member.user) }</div>; + } + nameEl = - <div className="mx_MemberTile_nameWrapper"> + <div className="mx_MemberTile_details"> <MemberInfo member={this.props.member} /> - <span className={nameClass}>{name}</span> - {leave} + <div className="mx_MemberTile_userId">{ this.props.member.userId }</div> + { presence } + { leave } </div> } else { nameEl = <div className={nameClass}> - {name} - {leave} + { name } </div> }